ListView dengan Tata Letak Baris yang disesuaikan - Android
Saya ingin membuat Activity yang berisi daftar yang baris-barisnya memiliki tata letak khusus.
Jadi saya telah membuat file list_entry_layout.xml yang mendefinisikan tata letak yang harus dimiliki setiap baris dari daftar saya (dalam contoh saya, setiap baris harus memiliki judul dan ringkasan):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/list_entry_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp" >
</TextView>
<TextView
android:id="@+id/list_entry_summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10dp" >
</TextView>
</LinearLayout>Masalahnya adalah saya tidak tahu bagaimana cara menambahkan data ke setiap baris di kelas ListActivity.
Dengan potongan kode berikut, saya dapat menambahkan judul setiap baris:
public class MyActivity extends ListActivity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.list_activity);
ListView listView = (ListView) findViewById(android.R.id.list);
String[] values = new String[] { "Android", "iPhone", "WindowsMobile",
"Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X",
"Linux", "OS/2" };
ArrayAdapter<String> titleAdapter = new ArrayAdapter<String>(this, R.layout.list_entry_layout, R.id.list_entry_title, values);
// Assign adapter to ListView
listView.setAdapter(titleAdapter);
}
}Untuk menambahkan ringkasannya bagaimana caranya?
Jika saya menambahkan kode ini, ringkasannya akan divisualisasikan, bukan judulnya:
String[] values = new String[] { "Android_summary", "iPhone_summary", "WindowsMobile_summary", "Blackberry_summary", "WebOS_summary", "Ubuntu_summary", "Windows7_summary", "Max OS X_summary", "Linux_summary", "OS/2_summary" };
ArrayAdapter<String> summaryAdapter = new ArrayAdapter<String>(this, R.layout.list_entry_layout, R.id.list_entry_summary, values);
// Assign adapter to ListView
listView.setAdapter(summaryAdapter);Berikut ini adalah hasil yang ingin saya peroleh:
Anda perlu membuat ArrayAdapter Anda sendiri:
private class YourAdapter extends ArrayAdapter<String> {
// do some work
}Kemudian Anda harus menentukan bagaimana tampilan baris Anda dengan XML, sesuai dengan tujuan Anda, saya sarankan Anda menggunakan RelativeLayout dan akan terlihat seperti ini:
baris.xml
<?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="fill_parent">
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="@+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@id/name"
/>
</RelativeLayout>Jadi, di YourAdapter Anda harus mengatur konstuktor super:
public YourAdapter() {
super(YourActivity.this, R.layout.row, data);
}Kemudian untuk menyesuaikan data Anda di ListView + implementasi yang lebih efektif, saya sarankan Anda untuk mengganti metode getView() dan juga menggunakan pola desain Holder.
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
LayoutInflater inflater = getLayoutInflater();
if (convertView == null) {
convertView = inflater.inflate(R.layout.row, null, false);
holder = new ViewHolder(convertView);
convertView.setTag(holder);
}
else {
holder = (ViewHolder) convertView.getTag();
}
holder.getUpperText().setText(dataSource[position]);
holder.getLowerText().setText(dataSource[position]);
return convertView;
}Terakhir, inisialisasi ListView dan set Adapter:
ListView list = (ListView) findViewById(R.id.list);
list.setAdapter(new YourAdapter());
Catatan: Pola desain Holder mewakili objek sembarang yang menyimpan widget anak dari setiap baris, jadi Anda hanya perlu menemukannya sekali saja dan kemudian dengan objek Holder Anda akan selalu dapat mengaksesnya.
Implementasi Holder dapat terlihat seperti ini:
public class ViewHolder {
private View row;
private TextView upperText = null, lowerText = null;
public ViewHolder(View row) {
this.row = row;
}
public TextView getUpperText() {
if (this.upperText == null) {
this.upperText = (TextView) inView.findViewById(R.id.someId);
}
return this.upperText;
}
public TextView getLowerText() {
if (this.lowerText == null) {
this.lowerText = (TextView) inView.findViewById(R.id.someId);
}
return this.lowerText;
}
}
Semoga membantu.
Anda dapat mencapai tata letak ini dengan menggunakan android.R.layout.simple_list_item_2 daripada membuat tata letak baris kustom.
Bagaimanapun jika Anda ingin menggunakan pendekatan tata letak baris kustom maka saya memiliki cuplikan yang siap untuk Anda.
Ini dia.
SampleActivity.java
package org.sample;
import java.util.ArrayList;
import android.app.ListActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import android.widget.TwoLineListItem;
public class SampleActivity extends ListActivity {
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
Mobile mobile;
ArrayList<Mobile> mobiles new ArrayList<Mobile>();
mobile = new Mobile();
mobile.setName("Android");
mobile.setSummary("summary goes here");
mobiles.add(mobile);
mobile = new Mobile();
mobile.setName("Blackberry");
mobile.setSummary("summary goes here");
mobiles.add(mobile);
setListAdapter(new MyAdapter(this, mobiles));
}
}Mobile.java
class Mobile {
String name;
String summary;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSummary() {
return summary;
}
public void setSummary(String summary) {
this.summary = summary;
}
}MyAdapter.java
class MyAdapter extends BaseAdapter {
private Context context;
private ArrayList<Mobile> mobiles;
public MyAdapter(Context context, ArrayList<Mobile> mobiles) {
this.context = context;
this.mobiles = mobiles;
}
@Override
public int getCount() {
return mobiles.size();
}
@Override
public Object getItem(int position) {
return mobiles.get(position);
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = (View) inflater.inflate(
R.layout.list_entry_layout, null);
}
TextView name = (TextView)convertView.findViewById(R.id.list_entry_title);
TextView summary=(TextView)convertView.findViewById(R.id.list_entry_summary);
name.setText(mobiles.get(position).getName());
summary.setText(mobiles.get(position).getSummary());
return convertView;
}
}
Buatlah ArrayAdapter Anda sendiri.
Lihat misalnya http://www.ezzylearning.com/tutorial.aspx?tid=1763429.
