ANDROID: CUSTOM LISTVIEW WITH IMAGE AND TEXT USING ARRAYADAPTER | Exam-Lib
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

ANDROID: CUSTOM LISTVIEW WITH IMAGE AND TEXT USING ARRAYADAPTER

abdelouafiApr 8, 2018

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      617
      Likes Received:
      13
      Trophy Points:
      18
      Joined
      Sep 13, 2016
      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:

      Code:
      <?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:
      Code:
      <?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:
      Code:
      <?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
      Code:
      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

      Code:
      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;
          }
      }

      upload_2018-4-8_12-33-58.png

      6- La structure des dossiers de notre projet:
      upload_2018-4-8_12-35-22.png

       
      Loading...

Share This Page

Share