TOC

Androidリストビューの例

Android ListViewの例

Androidでは、ListViewを使用すると、コンポーネントを垂直方向のスクロール可能なリストに配置できます。

このチュートリアルでは、2ListViewの例を示します。

  1. コンポーネントをListViewで表示する通常の方法。

  2. ListViewでのアイテム表示をカスタマイズするためのカスタム配列アダプター。

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. 通常のリストビューの例

この例では、ListViewを介して果物の名前のリストを表示する方法を示します。これは、簡単でわかりやすいはずです。

1.1 Android Layout file

ファイル：res / layout / list_fruit.xml

1.2 ListView

package com.example.android;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class ListFruitActivity extends ListActivity {

    static final String[] FRUITS = new String[] { "Apple", "Avocado", "Banana",
            "Blueberry", "Coconut", "Durian", "Guava", "Kiwifruit",
            "Jackfruit", "Mango", "Olive", "Pear", "Sugar-apple" };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // no more this
        // setContentView(R.layout.list_fruit);

        setListAdapter(new ArrayAdapter(this, R.layout.list_fruit,FRUITS));

        ListView listView = getListView();
        listView.setTextFilterEnabled(true);

        listView.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView parent, View view,
                    int position, long id) {
                // When clicked, show a toast with the TextView text
                Toast.makeText(getApplicationContext(),
                ((TextView) view).getText(), Toast.LENGTH_SHORT).show();
            }
        });

    }

}

1.3 Demo

android listview example

2. カスタムArrayAdapterの例

この例では、ListViewに4つのアイテムを作成し、カスタムの「ArrayAdapter」を使用して、リストの「アイテム名」に基づいてさまざまな画像を表示する方法を示します。

2.1 Images
デモンストレーション用に4つの画像を取得します。

images in android project

2.2 Android Layout file
ファイル：res / layout / list_mobile.xml

2.3 Custom ArrayAdapter
クラスを作成してArrayAdapterを拡張し、getView()メソッドでアイテムの表示をカスタマイズします。 

package com.example.android.adaptor;

import com.example.android.R;

import android.content.Context;
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 MobileArrayAdapter extends ArrayAdapter {
    private final Context context;
    private final String[] values;

    public MobileArrayAdapter(Context context, String[] values) {
        super(context, R.layout.list_mobile, values);
        this.context = context;
        this.values = values;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View rowView = inflater.inflate(R.layout.list_mobile, parent, false);
        TextView textView = (TextView) rowView.findViewById(R.id.label);
        ImageView imageView = (ImageView) rowView.findViewById(R.id.logo);
        textView.setText(values[position]);

        // Change icon based on name
        String s = values[position];

        System.out.println(s);

        if (s.equals("WindowsMobile")) {
            imageView.setImageResource(R.drawable.windowsmobile_logo);
        } else if (s.equals("iOS")) {
            imageView.setImageResource(R.drawable.ios_logo);
        } else if (s.equals("Blackberry")) {
            imageView.setImageResource(R.drawable.blackberry_logo);
        } else {
            imageView.setImageResource(R.drawable.android_logo);
        }

        return rowView;
    }
}

2.4 ListView
ListViewですが、上記のカスタムアダプタを使用してリストを表示します。 

package com.example.android;

import com.example.android.adaptor.MobileArrayAdapter;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.Toast;
import android.view.View;

public class ListMobileActivity extends ListActivity {

    static final String[] MOBILE_OS =
               new String[] { "Android", "iOS", "WindowsMobile", "Blackberry"};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setListAdapter(new MobileArrayAdapter(this, MOBILE_OS));

    }

    @Override
    protected void onListItemClick(ListView l, View v, int position, long id) {

        //get selected items
        String selectedValue = (String) getListAdapter().getItem(position);
        Toast.makeText(this, selectedValue, Toast.LENGTH_SHORT).show();

    }

}

2.5 Demo

android custom array adapter example

ソースコードをダウンロード

両方の例をダウンロード–Android-ListView-Example.zip（21 KB）

参考文献

  1. Android ListViewの例

  2. Android ListView JavaDoc

Related