Thông thường ở chế độ mặc định các item (hay các dòng) trong ListView chỉ hiển thị các dòng text. Để tùy biến các item của ListView trông đẹp hơn, lập trình viên có thể thêm các biểu tượng (icon), checkbox hoặc bất cứ cái gì vào item. Đơn giản chỉ là cung cấp dữ liệu cho adapter để tạo ra tập các đối tượng hiển thị (view objects) cho mỗi item.
Trong ví dụ bên dưới đây, chúng ta sẽ thêm biểu tượng vào item của ListView. Trước hết tạo một project có tên DemoCustomListView. Chỉnh sửa file layout xml của project có tên activity_main.xml như bên dưới:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.democustomlistview.MainActivity"
>
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
>
</ListView>
</RelativeLayout>
Trong file xml trên ta khai báo ListView để hiển thị danh sách các item cho người dùng chọn.
Tiếp theo tạo một file layout xml có tên custom_listview.xml dành để việc thể hiện custom giao diện cho item của ListView nằm trong thư mục res/layout/ có nội dung như sau:
<?xml version="1.0"
encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/textView1"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@drawable/bg_tv_nguphap"
android:gravity="center"
android:text="TextView" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:layout_toRightOf="@+id/textView1"
android:background="@drawable/hotboy"
/>
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_toRightOf="@+id/imageView1"
android:gravity="left|center"
android:text="TextView"
android:textSize="30dp"
android:textStyle="bold"
/>
</RelativeLayout>
Bây giờ chúng ta chuyển sang xử lý code:
Tạo một class Item.java để Get Set cho từng thành phần trong item.
package com.example.democustomlistview;
public class Item {
int icon;
String
id;
String
title;
public int getIcon() {
return icon;
}
public void setIcon(int icon) {
this.icon = icon;
}
public String getId()
{
return id;
}
public void setId(String
id) {
this.id = id;
}
public String
getTitle() {
return title;
}
public void setTitle(String
title) {
this.title = title;
}
}
Tiếp theo ta tạo một class Adapter.java:
package
com.example.democustomlistview;
import
java.util.ArrayList;
import java.util.List;
import
android.app.Activity;
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 Adapter extends ArrayAdapter<Item>
{
Activity
context;
int id;
ArrayList<Item>
items;
public
Adapter(Activity context, int resource, ArrayList<Item>
objects) {
super(context,
resource, objects);
// TODO
Auto-generated constructor stub
this.context = context;
this.id = resource;
this.items = objects;
}
@Override
public View getView(int position, View
v, ViewGroup parent) {
// TODO
Auto-generated method stub
if (v == null) {
LayoutInflater
inflater = context.getLayoutInflater();
v
= inflater.inflate(id, null);
}
TextView
tvId = (TextView) v.findViewById(R.id.textView1);
TextView
tvTitle = (TextView) v.findViewById(R.id.textView2);
ImageView
imgIcon = (ImageView) v.findViewById(R.id.imageView1);
Item
item = items.get(position);
tvId.setText(item.getId());
tvTitle.setText(item.getTitle());
imgIcon.setBackgroundResource(item.getIcon());
return v;
}
}
Cuối cùng ta xử lý code trong MainActivity.java
Trước tiên ta cần import các file ảnh vào thư mục drawable
xử lý code:
package
com.example.democustomlistview;
import
java.util.ArrayList;
import
android.app.Activity;
import
android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ListView;
public class MainActivity extends Activity {
private ListView listview;
private
ArrayList<Item> listitem = new ArrayList<Item>();
int[] icon = { R.drawable.hotgirl, R.drawable.hotboy, R.drawable.hoahau,
R.drawable.casy };
String[]
str = { "HotGirl", "HotBoy", "Hoa Hậu", "Ca sỹ" };
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listview = (ListView)
findViewById(R.id.listView1);
for (int i = 0; i < str.length; i++) {
Item
item = new Item();
item.setId("" + (i + 1));
item.setIcon(icon[i]);
item.setTitle(str[i]);
listitem.add(item);
}
Adapter
adapter = new Adapter(this, R.layout.custom_listview, listitem);
adapter.notifyDataSetChanged();
listview.setAdapter(adapter);
}
}
Hoàn tất,bây giờ bạn mở máy ảo lên và chạy để xem kết quả.
Đây chỉ là tut hướng dẫn cơ bản để bạn làm quen và hiểu được cách để custom một item trong ListView theo ý của mình. Với công việc sau này hầu như tất cả các item trong listview đều được custom lên nhằm làm cho giao diện của bạn hiển thị trở lên sinh động và tối ưu hơn.
Trong bài sau mình sẽ chia sẻ các bạn cách để hiển thị dữ liệu lên listview bằng cách get dữ liệu từ database sqlite.
download full code demo:
http://www.mediafire.com/download/kwo877ecd5gxxy1/DemoCustomListView.rar
Cảm ơn bạn đã đọc bài viết !
Các bạn góp ý để mình rút kinh nghiệm và xây dựng bài tốt hơn. thân!
Xem video hướng dẫn tại đây:
