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

3. Chạy chuơng trình để xem thành quả nhé

4. Download Source Code

Tại đây

XEM THÊM ANDROID

Custom Button trong Android

TỔNG HỢP BÀI VIẾT HƯỚNG DẪN HỌC LẬP TRÌNH ANDROID