Android でボタンを入れた ListView を使う

ListViewにButtonを入れて、Buttonのクリックイベントで何か処理してみます。まずは、基本となる TextView を2つ表示する SimpleAdapter を作ってみます。ここは良くあるサンプルですし、特に説明なしで。

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:drawSelectorOnTop="false"/>
</RelativeLayout>

 

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/list_item_text1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:gravity="center_vertical" />

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/list_item_text2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:gravity="center_vertical" />
</LinearLayout>

 

MainActivity.java

public class MainActivity extends Activity {

    private static final String LIST_ITEM_TEXT1 = "Id";
    private static final String LIST_ITEM_TEXT2 = "Name";

    private List<Map<String, String>> mList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ListView listView = (ListView) findViewById(R.id.list_view);

        //アダプタ作成
        mList = new ArrayList<>();
        final SimpleAdapter adapter = new SimpleAdapter(this, mList,
                R.layout.list_item,
                new String[]{LIST_ITEM_TEXT1, LIST_ITEM_TEXT2},
                new int[]{R.id.list_item_text1, R.id.list_item_text2}
        );

        // /クリックイベント処理
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Log.d("ItemClick", "Position=" + String.valueOf(position));
            }
        });
        listView.setAdapter(adapter);

        // 表示するデータを設定
        for (int i = 0; i < 5; i++) {
            Map<String, String> map = new HashMap<>();
            map.put(LIST_ITEM_TEXT1, String.valueOf(i));
            map.put(LIST_ITEM_TEXT2, "名前・・・");
            mList.add(map);
        }
    }
}

 

さて、 TextView を2つ入ったListViewが出来ましたので、3ステップでボタン付きListViewに変更します。

1.Buttonをlist_item.xmlに追加します。

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/list_item_text1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:gravity="center_vertical" />

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/list_item_text2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:gravity="center_vertical" />

    <Button
        android:id="@+id/list_item_button"
        android:text="ボタン"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

 

2.SimpleAdapterを継承したAdapterを作成します。名前はあまり考えもなくSimple2Adapterとしています。

Simple2Adapter.java

public class Simple2Adapter extends SimpleAdapter {
    private int mButton;

    public Simple2Adapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to, int button) {
        super(context, data, resource, from, to);
        mButton = button;
    }

    public View getView(final int position, View convertView, final ViewGroup parent) {
        View view = super.getView(position, convertView, parent);

        Button btn = (Button) view.findViewById(mButton);
        btn.setTag(position);

        final ListView list =  (ListView) parent;
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg) {
                AdapterView.OnItemClickListener listener = list.getOnItemClickListener();
                long id = getItemId(position);
                listener.onItemClick((AdapterView<?>) parent, arg, position, id);
            }
        });

        return view;
    }
}

 

3.上記で作成したSimple2Adapterに差し替えます。

MainActivity.java(差し替え部分のみ)

        final Simple2Adapter adapter = new Simple2Adapter(this, mList,
                R.layout.list_item,
                new String[]{LIST_ITEM_TEXT1, LIST_ITEM_TEXT2},
                new int[]{R.id.list_item_text1, R.id.list_item_text2},
                R.id.list_item_button
        );

 

な感じで、Buttonのクリックイベントのみを取得するコードの出来上がりです。

Comments are closed.

Post Navigation