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:

Larutan

Anda perlu membuat ArrayAdapter Anda sendiri:

private class YourAdapter extends ArrayAdapter {
   // 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"?>






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.

Komentar (0)

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 mobiles  new ArrayList();

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

    public MyAdapter(Context context, ArrayList 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;
    }
}
Komentar (1)

Buatlah ArrayAdapter Anda sendiri.
Lihat misalnya http://www.ezzylearning.com/tutorial.aspx?tid=1763429.

Komentar (5)