Khi việt một ứng dụng android, bạn thường xuyên phải làm việc với listview. Tuy listview mặc định không đáp ứng được nhu cầu của chúng ta nên thường thì chúng ta phải cusumize listview theo yêu cầu thích hợp. Trong bài viết này chúng ta sẻ cùng nhau thảo luận về việc làm sao để customize một listview với image và text. Bạn có thể download source code đính kèm thể xem.
Source Code :CustomizedListView
Kho App của mình :https://play.google.com/store/apps/d...eAppAndroiFree
Khi chúng ta build sẻ có một cái listview như bên dưới


Dữ Liệu
Dữ liệu mà chúng ta cần đổ lên listview được lưu trên một một file XML. Bạn sẻ lấy file XML bằng cách truy cập vào url : Someone Like You .
File XML có dạng như dưới đây.
<?xml version="1.0" encoding="UTF-8"?>
<music>
<song>
<id>1</id>
<title>Someone Like You</title>
<artist>Adele</artist>
<duration>4:47</duration>
<plays>1662</plays>
<thumb_url>http://api.androidhive.info/music/images/adele.png</thumb_url>
</song>
<song>
<id>2</id>
<title>Space Bound</title>
<artist>Eminem</artist>
<duration>4:38</duration>
<plays>1900</plays>
<thumb_url>http://api.androidhive.info/music/images/eminem.png</thumb_url>
</song>
.
.
.
.
</music>

Chúng ta sẻ parser file xml này và lấy dữ liệu đổ lên listview của chúng ta. Tôi sẻ viết một bài viết khác về parser XML

Tạo Project
1. Tạo một project mới trong Eclipse. Fileè New Project
2. Bây giờ bạn mở file main.xml và định nghĩa một listview vào trong nó.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">

<ListView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:listSelector="@drawable/list_selector" />

</LinearLayout>

3. Bước tiếp theo chúng ta cần thiết kế cho mỗi dòng listview theo mong muốn của chúng ta. Tạo một file XML mới trong folder layout và đặt tên là list_row.xml. chúng ta sẻ tạo một layout có thiết kế như dưới đây :

Bạn mở file list_row.xml và code những dòng code như dưới đây vào :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/list_selector"
android:orientation="horizontal"
android:padding="5dip" >

<!-- ListRow Left sied Thumbnail image -->
<LinearLayout android:id="@+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:background="@drawable/image_bg"
android:layout_marginRight="5dip">

<ImageView
android:id="@+id/list_image"
android:layout_width="50dip"
android:layout_height="50dip"
android:src="@drawable/rihanna"/>

</LinearLayout>

<!-- Title Of Song-->
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/thumbnail"
android:layout_toRightOf="@+id/thumbnail"
android:text="Rihanna Love the way lie"
android:textColor="#040404"
android:typeface="sans"
android:textSize="15dip"
android:textStyle="bold"/>

<!-- Artist Name -->
<TextView
android:id="@+id/artist"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/title"
android:textColor="#343434"
android:textSize="10dip"
android:layout_marginTop="1dip"
android:layout_toRightOf="@+id/thumbnail"
android:text="Just gona stand there and ..." />

<!-- Rightend Duration -->
<TextView
android:id="@+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/title"
android:gravity="right"
android:text="5:45"
android:layout_marginRight="5dip"
android:textSize="10dip"
android:textColor="#10bcc9"
android:textStyle="bold"/>

<!-- Rightend Arrow -->
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>

</RelativeLayout>

Dưới đây là hình ảnh của một dòng trên listview khi chúng ta đã thực hiện việc đổ dữ liệu lên :

1. Bây giờ là bước quan trọng nhất trong việc customize một listview. Chúng ta đã layout cho mỗi dòng listview theo mong muốn, bây giờ chúng ta thực hiện việc đổ dữ liệu lên mỗi dòng của listview đó. Chúng ta tạo một file class trong thư mục src của bạn và đặt tên là LazyAdapter.java. Class này được extends từ BaseAdapter
package com.example.androidhive;

import java.util.ArrayList;
import java.util.HashMap;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class LazyAdapter extends BaseAdapter {

private Activity activity;
private ArrayList&lt;HashMap&lt;String, String&gt;&gt; data;
private static LayoutInflater inflater=null;
public ImageLoader imageLoader;

public LazyAdapter(Activity a, ArrayList&lt;HashMap&lt;String, String&gt;&gt; d) {
activity = a;
data=d;
inflater = (LayoutInflater)activity.getSystemService(Context. LAYOUT_INFLATER_SERVICE);
imageLoader=new ImageLoader(activity.getApplicationContext());
}

public int getCount() {
return data.size();
}

public Object getItem(int position) {
return position;
}

public long getItemId(int position) {
return position;
}

// thuc hien viec do du lieu len list_row
public View getView(int position, View convertView, ViewGroup parent) {
View vi=convertView;
if(convertView==null)
vi = inflater.inflate(R.layout.list_row, null);

TextView title = (TextView)vi.findViewById(R.id.title); // title
TextView artist = (TextView)vi.findViewById(R.id.artist); // artist name
TextView duration = (TextView)vi.findViewById(R.id.duration); // duration
ImageView thumb_image=(ImageView)vi.findViewById(R.id.list_i mage); // thumb image

HashMap&lt;String, String&gt; song = new HashMap&lt;String, String&gt;();
song = data.get(position);

// Setting all values in listview
title.setText(song.get(CustomizedListView.KEY_TITL E));
artist.setText(song.get(CustomizedListView.KEY_ART IST));
duration.setText(song.get(CustomizedListView.KEY_D URATION));
imageLoader.DisplayImage(song.get(CustomizedListVi ew.KEY_THUMB_URL), thumb_image);
return vi;
}
}

2. Bây giờ chúng ta mở file MainActivity và thực hiện những dòng code bên dưới vào. Nhưng dòng code dưới đây sẻ làm nhiệm vụ lấy file xml từ url và parsing nó ra. Trong khi parsing chúng ta lưu dữ liệu của chúng ta vào trong một HashMap và sau đó truyền HashMap vào trong LazyAdapter.
package com.example.androidhive;

import java.util.ArrayList;
import java.util.HashMap;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

public class CustomizedListView extends Activity {
// All static variables
static final String URL = "Someone Like You";
// XML node keys
static final String KEY_SONG = "song"; // parent node
static final String KEY_ID = "id";
static final String KEY_TITLE = "title";
static final String KEY_ARTIST = "artist";
static final String KEY_DURATION = "duration";
static final String KEY_THUMB_URL = "thumb_url";

ListView list;
LazyAdapter adapter;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

ArrayList&lt;HashMap&lt;String, String&gt;&gt; songsList = new ArrayList&lt;HashMap&lt;String, String&gt;&gt;();

XMLParser parser = new XMLParser();
String xml = parser.getXmlFromUrl(URL); // getting XML from URL
Document doc = parser.getDomElement(xml); // getting DOM element

NodeList nl = doc.getElementsByTagName(KEY_SONG);
// looping through all song nodes &lt;song&gt;
for (int i = 0; i &lt; nl.getLength(); i++) {
// creating new HashMap
HashMap&lt;String, String&gt; map = new HashMap&lt;String, String&gt;();
Element e = (Element) nl.item(i);
// adding each child node to HashMap key =&gt; value
map.put(KEY_ID, parser.getValue(e, KEY_ID));
map.put(KEY_TITLE, parser.getValue(e, KEY_TITLE));
map.put(KEY_ARTIST, parser.getValue(e, KEY_ARTIST));
map.put(KEY_DURATION, parser.getValue(e, KEY_DURATION));
map.put(KEY_THUMB_URL, parser.getValue(e, KEY_THUMB_URL));

// adding HashList to ArrayList
songsList.add(map);
}

list=(ListView)findViewById(R.id.list);

// Getting adapter by passing xml data ArrayList
adapter=new LazyAdapter(this, songsList);
list.setAdapter(adapter);

// Click event for single list row
list.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView&lt;?&gt; parent, View view,
int position, long id) {

}
});
}
}

3. Thêm Permissions trong file AndroidManifest.xml
Mở file AndroidManifest và thêm vào 2 permission INTERNET và WRITE_EXTERNAL_STORAGE
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.androidhive" android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="8" />

<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".CustomizedListView" android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_ST ORAGE" />
</manifest>

Nhưng class khác thực hiên việc parser xml như thế nào, load image từ url, bạn có thể xem trong source code mà mình đính kèm nhé.

Chủ đề tương tự: