web-dev-qa-db-ja.com

カスタム行レイアウトを使用したリストビュー-Android

行にカスタムレイアウトがあるリストを含むActivityを作成したいと思います。リストの各行に必要なレイアウトを定義するlist_entry_layout.xmlファイルを作成しました（この例では、各行にタイトルと要約が必要です）。

<?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>

私の問題は、ListActivityクラスの各行にデータを追加する方法がわからないことです。次のコードスニペットを使用して、各行のタイトルを追加できます。

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

    }
}

要約も追加するにはどうすればよいですか？

このコードを追加すると、タイトルではなく要約が視覚化されます。

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

以下は私が取得したい結果です：

enter image description here

javaandroidandroid-listviewandroid-arrayadapter
22
Matteo

独自のArrayAdapterを作成する必要があります。

_private class YourAdapter extends ArrayAdapter<String> {
   // do some work
}
_

次に、目的に合わせてXMLで行をどのように表示するかを指定する必要があります。RelativeLayoutを使用することをお勧めします。次のようになります。

row.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>
_

したがって、YourAdapterでは、スーパーコンストラクターを設定する必要があります。

_public YourAdapter() {
   super(YourActivity.this, R.layout.row, data);
}
_

その後、ListView +より効果的な実装でデータをカスタマイズするには、getView()メソッドをオーバーライドし、_Holder design pattern_を使用することをお勧めします。

_@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;  
}
_

最後にListViewを初期化し、Adapterを設定します。

_ListView list = (ListView) findViewById(R.id.list);
list.setAdapter(new YourAdapter());
_


注： _Design pattern Holder_は、各行の子ウィジェットを保持する任意のオブジェクトを表すため、一度だけ検索する必要があり、Holderオブジェクトを使用すると、常にそれらにアクセスできます。 。

Holderの実装は次のようになります。

_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;
   }
}
_


それが役に立てば幸い。

32
Simon Dorociak

カスタムレイアウトを作成するのではなく、Android.R.layout.simple_list_item_2を使用してこのレイアウトを実現できます。

とにかく、カスタム行レイアウトアプローチを使用したい場合は、スニペットを用意します。

どうぞ。

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;
    }
}
13
Vipul Shah

独自のArrayAdapterを作成します。
たとえば http://www.ezzylearning.com/tutorial.aspx?tid=1763429 を参照してください。

4
nhaarman