Wednesday, October 4, 2017

ListView with images android

Bạn muốn tạo một ListView có nhiều ảnh khác nhau ở mỗi dòng, kiểu như bảng lịch thi đấu bóng đá. Ta phải dùng custom Adapter.
Hãy tạo một class bất kỳ, khai báo vào file Androidmanifest.xml.
Layout của class này chỉ có một listView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  android:background="#ffffff"
    android:orientation="vertical" >
<ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"      
        android:dividerHeight="1px"
        android:lineSpacingExtra="-8dp"
        android:singleLine="true"
        android:textColor="#00F" >
    </ListView>
</LinearLayout>
Tạo một class có tên customadapter.
public class customadapter extends ArrayAdapter<String> {
          private final Activity context;      
          private final Integer[] imgid;
          private final Integer[] imgid2;
          private final String[]  item;
          private final String[]  item2;
          private final String[]  item3;
          public customadapter(Activity context, String[] item, String[] item2, String[] item3, Integer[] imgid,Integer[] imgid2) {
              super(context,R.layout.lit,item);
              // TODO Auto-generated constructor stub             
              this.context=context;
              this.item=item;
              this.item2=item2;
              this.item3=item3;
              this.imgid=imgid;
              this.imgid2=imgid2;
          }        
          @SuppressLint({ "ViewHolder", "InflateParams" })
          public View getView(int position,View view,ViewGroup parent) {
              LayoutInflater inflater=context.getLayoutInflater();
View rowView=inflater.inflate(R.layout.lit, null,true);
             
TextView txtTitle = (TextView) rowView.findViewById(R.id.text1);
TextView txtTitle2 = (TextView) rowView.findViewById(R.id.text2);
TextView txtTitle3 = (TextView) rowView.findViewById(R.id.text3);
ImageView imageView = (ImageView) rowView.findViewById(R.id.im);       
ImageView imageView2 = (ImageView) rowView.findViewById(R.id.im2);          
txtTitle.setText(item[position]);
txtTitle2.setText(item2[position]);
txtTitle3.setText(item3[position]);
imageView.setImageResource(imgid[position]);
imageView2.setImageResource(imgid2[position]);           
     return rowView;             
          };
     }
Nhập các thư viện cần dùng vào.
Copy các image cần dùng vào thư mục drawable dưới res.
Trong class có listView, khai báo adapter, các mảng cần dùng lên trên dòng Override.
ListView lv;
private ArrayAdapter<String> adapter;
     String[] ten = { "France", "Albania", "Romania", "France", "Switzerland", "Romania" };
     String[] ten2 = { "Romania", "Switzerland", "Switzerland", "Albania",
              "France", "Albania" };
     String[] kq = { "1-0", "2-1", "2-3", "3-3", "1-4", "3-2" };
     Integer[] mg = new Integer[] { R.drawable.phap, R.drawable.anba,
              R.drawable.roma, R.drawable.phap, R.drawable.thuysi,
              R.drawable.roma };
     Integer[] mg2 = new Integer[] { R.drawable.roma, R.drawable.thuysi,
              R.drawable.thuysi, R.drawable.anba, R.drawable.phap,
              R.drawable.anba };
Tiếp theo tham chiếu địa chỉ và set listView với adapter từ class customadapter đã tạo.
lv = (ListView) findViewById(R.id.list);
lv.setChoiceMode(ListView.CHOICE_MODE_SINGLE); 
     adapter= new customadapter(this,ten,kq,ten2,mg,mg2);
         
     lv.setOnItemClickListener(new OnItemClickListener() {
              @Override
     public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                        long arg3) {
                   // int sodong = arg2;
                   //dem = 1;
              }
          });
          lv.setAdapter(adapter);

Chạy thử để thấy listView đã có các ảnh, chữ như ta set trong mảng.


No comments:

Post a Comment