ANDROID: CUSTOM LISTVIEW WITH IMAGE AND TEXT USING ARRAYADAPTER

[abdelouafi]

أحدث المقالات

إذا كنت ترغب في مشاهدة الصور ، يرجى النقر عليها

Blog
SUIVEZ NOTRE CHAINE YOUTUBE: قم بالتسجيل في قناتنا عبر هذا الرابط https://www.youtube.com/channel/UCCITRMWPcElh-96wCS3EyUg
devoir 1 math tronc commun

مجموعة من دروس و فروض جميع المستويات

دروس الإعدادي - دروس الثانوي الثأهيلي - دروس التعليم الابتدائي - فروض مختلف المستويات الدراسية

فضلا و ليس أمرا شارك هذه الصفحة مع أصدقائك:

Dans ce projet Android, on va créer une listeView avec deux TextView( l'une pour afficher le titre de l'image et l'autre Textview pour afficher la description de l'image). on va ensuite remplir cette listView en utilisant ArrayAdapter.

Environnement utilisé:

• JDK 6 (Java SE 6)
• Eclipse Indigo IDE for Java EE Developers (3.7.2)
• Android SDK 4.0.3 / 4.1 Jelly Bean
• Android Development Tools (ADT) Plugin for Eclipse (ADT version 20.0.0)

Etape1: créer un nouveau projet android

Rmplacer le fichier string. xml par le code suivant:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, ImageTextListViewActivity!</string>
    <string name="app_name">SimpleImageTextListView</string>
    <string name="name">ListViewBaseAdapter</string>
    <string name="image">Thumbnail</string>
</resources>

Puis afficher le fichier res/layout/main.xml et remplacez son contenu par le suivant:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
     />
</LinearLayout>

Créer un nouveau fichier list_item.xml dans res/layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <ImageView
        android:id="@+id/icon"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:contentDescription="@string/image"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" />
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/icon"
        android:paddingBottom="10dp"
        android:textColor="#CC0033"
        android:textSize="16dp" />
    <TextView
        android:id="@+id/desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_toRightOf="@+id/icon"
        android:paddingLeft="10dp"
        android:textColor="#3399FF"
        android:textSize="14dp" />
</RelativeLayout>

Créer une nouvelle Classe RowItem” in “com.theopentutorials.android.beans” package

package com.theopentutorials.android.beans;
public class RowItem {
    private int imageId;
    private String title;
    private String desc;
 
    public RowItem(int imageId, String title, String desc) {
        this.imageId = imageId;
        this.title = title;
        this.desc = desc;
    }
    public int getImageId() {
        return imageId;
    }
    public void setImageId(int imageId) {
        this.imageId = imageId;
    }
    public String getDesc() {
        return desc;
    }
    public void setDesc(String desc) {
        this.desc = desc;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    @Override
    public String toString() {
        return title + "\n" + desc;
    }
}

Personnaliser la classe ArrayAdapter:
Créer une nouvelle classe “CustomListViewAdapter” dans “com.theopentutorials.android.adapters” package

package com.theopentutorials.android.adapters;
import java.util.List;
import com.theopentutorials.android.R;
import com.theopentutorials.android.beans.RowItem;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class CustomListViewAdapter extends ArrayAdapter<RowItem> {
    Context context;
    public CustomListViewAdapter(Context context, int resourceId,
            List<RowItem> items) {
        super(context, resourceId, items);
        this.context = context;
    }
 
    /*private view holder class*/
    private class ViewHolder {
        ImageView imageView;
        TextView txtTitle;
        TextView txtDesc;
    }
 
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        RowItem rowItem = getItem(position);
     
        LayoutInflater mInflater = (LayoutInflater) context
                .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.list_item, null);
            holder = new ViewHolder();
            holder.txtDesc = (TextView) convertView.findViewById(R.id.desc);
            holder.txtTitle = (TextView) convertView.findViewById(R.id.title);
            holder.imageView = (ImageView) convertView.findViewById(R.id.icon);
            convertView.setTag(holder);
        } else
            holder = (ViewHolder) convertView.getTag();
             
        holder.txtDesc.setText(rowItem.getDesc());
        holder.txtTitle.setText(rowItem.getTitle());
        holder.imageView.setImageResource(rowItem.getImageId());
     
        return convertView;
    }
}

6- La structure des dossiers de notre projet: