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

Custom Button trong Android




Không có nhận xét nào:

Đăng nhận xét