Học Lập Trình: Custom ListView Android

Thứ Hai, 2 tháng 6, 2014

Custom ListView Android

Bài này Học Lập Trình sẽ huớng dẫn các bạn tùy chỉnh ListView theo ý của mình. Nhứng úng dụng thực tế của ListView đựoc sử dụng rất là rộng rãi.
Bài viết gồm 4 phần:
1. Xây dưng giao diện ở layout
2. Xử lý code ở Java
3. Chạy chuơng trình để xem thành quả nhé
4. Download Source Code

Listview trên có 3 thành phần đó là : Tên Danh Mục, Phần miêu tả chi tiết, và ô checkBox bên cạnh phía trái để cho người dùng chọn.
1. Xây dưng giao diện ở layout
Trong Layout có:
+ list_view.xml

+ activity_main.xml

+ list_view.xml
CODE:

-<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <CheckBox
        android:id="@+id/cbDanhMuc"
        android:layout_width="wrap_content"
        android:layout_height="66dp"
        android:paddingRight="10sp"
        android:paddingTop="20sp"
        android:text="" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tvDanhMuc"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:lines="1"
            android:textColor="#0101DF"
            android:textSize="15sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tvMieuTa"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:lines="1"
            android:textColor="#DF013A"
            android:textSize="13sp" />
    </LinearLayout>

</LinearLayout>-

+ activity_main.xml
CODE:

-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:context="${packageName}.${activityClass}" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="StudyCoding.Net ?"
        android:textSize="20sp" />

    <ListView
        android:id="@+id/listDanhMuc"
        android:layout_width="fill_parent"
        android:layout_height="358dp"
        android:scrollbars="vertical" />

</LinearLayout>-

2. Xử lý code ở Java
+ DanhMuc
+ CustomDanhMuc
+ ListDanhMucAdapter
+ MainActivity

+ DanhMuc
CODE:

package com.studycoding.customlistviewandroid;

import java.io.Serializable;

public class DanhMuc implements Serializable{
  private String tenDanhMuc;
  private String moTa;
  private boolean checked;
  public DanhMuc(String tenDanhMuc){
  this.tenDanhMuc = tenDanhMuc;
  }
  public String getTenDanhMuc(){
  return this.tenDanhMuc;
  }
  public void setMoTa(String moTa) {
  this.moTa = moTa;
  }
  public String getMoTa() {
  return this.moTa;
  }
  @Override
  public boolean equals(Object o) {
  // TODO Auto-generated method stub
  if(o instanceof DanhMuc) {
  DanhMuc f = (DanhMuc)o;
  return this.tenDanhMuc.equalsIgnoreCase(f.getTenDanhMuc());
  }
  return false;
  }
  @Override
  public int hashCode() {
  // TODO Auto-generated method stub
  return this.tenDanhMuc.hashCode();
  }
  }

+ CustomDanhMuc
CODE:

package com.studycoding.customlistviewandroid;

import android.content.Context;
import android.view.LayoutInflater;
import android.widget.CheckBox;
import android.widget.LinearLayout;
import android.widget.TextView;

public class CustomDanhMuc extends LinearLayout {
  CheckBox cbDanhMuc;
  TextView tvDanhMuc;
  TextView tvMieuTa;
  Context context;
  public CustomDanhMuc(Context context) {
  super(context);
  // TODO Auto-generated constructor stub
  this.context = context;
  LayoutInflater li = (LayoutInflater)this.getContext()
  .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  li.inflate(R.layout.list_view, this,true);
  
  cbDanhMuc = (CheckBox)findViewById(R.id.cbDanhMuc);
  tvDanhMuc= (TextView)findViewById(R.id.tvDanhMuc);
  tvMieuTa = (TextView)findViewById(R.id.tvMieuTa);
  }
 }

+ ListDanhMucAdapter
+ MainActivity
CODE:

package com.studycoding.customlistviewandroid;

import java.util.ArrayList;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.TextView;

public class ListDanhMucAdapter extends ArrayAdapter{
  ArrayList array;
  int resource;
  CheckBox check;
  TextView tvDanhMuc;
  TextView tvMieuTa;
  Context context;
  DanhMuc DanhMuc;
  
  public ListDanhMucAdapter(Context context, int textViewResourceId,ArrayList array) {
  super(context, textViewResourceId,array);
  // TODO Auto-generated constructor stub
  
  this.context = context;
  this.resource = textViewResourceId;
  this.array = array;
  }
  public View getView(int position, View convertView, ViewGroup parent){
  View friendView = convertView;
  if(friendView ==null ){
  friendView = new CustomDanhMuc(getContext());
  }
  DanhMuc = array.get(position);
  if(DanhMuc !=null){
  tvDanhMuc = ((CustomDanhMuc)friendView).tvDanhMuc;
  tvMieuTa = ((CustomDanhMuc)friendView).tvMieuTa;
  check =((CustomDanhMuc)friendView).cbDanhMuc;
  // lay doi tuong friend va dua ra UI
  tvDanhMuc.setText(DanhMuc.getTenDanhMuc());
  tvMieuTa.setText(DanhMuc.getMoTa());
  
  }
  return friendView;
  }
  
 }