【Android】画面コンポーネント / ListView ~ 入門編 ~

■ はじめに

ListView (リストビュー)について、学ぶ。

後日談

* RecyclerView ってのがあるみたい。

https://dk521123.hatenablog.com/entry/2020/07/21/000000

■ 主なプロパティ

padding

余白

■ Adapter

【1】 ArrayAdapter
【2】 SimpleAdapter
【3】 BaseAdapter

【1】 ArrayAdapter

* 配列やListを1行に1つ表示する時に使う

【2】 SimpleAdapter

* XMLファイルで定義されたビューを表示する時に使う

【3】 BaseAdapter

* 【1】【2】のスーパークラスで、
 独自のAdapterクラスを定義する時に使う

 補足:それ以外のAdapter

以下の関連記事を参照のこと。

 画面コンポーネント / ListView ~ Realm データを表示 ~
https://dk521123.hatenablog.com/entry/2018/09/02/130212

 ■ サンプル

例1:Kotlin

デザイン部

[1] ListView を追加し、プロパティを変更する
 + id : 任意の文字列(今回は「sampleListView」)
 + padding : 16dp
[2] ListView の各行のレイアウトを追加するために
 [app]-[res]-[layout] を選択し、
 右クリックし、[New]-[Layout Resource File]を選択し
 以下を入力し「OK」ボタン押下
 + File Name : 任意の文字列(今回は「sample_row.xml」)
 + Root element : TextView
[3] [app]-[res]-[layout] 配下にある[2]のファイルをダブルクリックし
 以下のプロパティを入力する
 + id : 任意の文字列(今回は「sampleItem」)

デザイン部

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ArrayAdapter
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // 再開時の呼び出されるイベント
    override fun onResume() {
        super.onResume()

        // 表示するリスト
        val sampleList = arrayOf("[1] Row1", "[2] Row2", "[3] Row3", "[4] Row4")

        // ListView の adapter に設定する
        sampleListView.adapter = ArrayAdapter<String>(
            this@MainActivity,
            R.layout.sample_row,
            sampleList
        )
    }
}

その他のサンプル

以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2018/09/02/130212

例2:Java / クリックおよび長押しイベントの拾う方法

画面 : activity_main.xml

* ListView x 1を画面に追加

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        // ★ここ★
        String[] members = {
                "Mike",
                "Tom",
                "Ken",
                "Kevin",
                "Jastin",
                "Coco",
                "Bella"
        };

        ArrayAdapter<String> adapter =
                new ArrayAdapter<>(
                        this, android.R.layout.simple_list_item_1, members);
        ListView listView = (ListView) findViewById(R.id.listView);
        // アダプターを設定します
        listView.setAdapter(adapter);

        //リスト項目が選択された時のイベントを追加
        listView.setOnItemClickListener(this.onItemClickListener);

        //リスト項目が長押しされた時のイベントを追加
        listView.setOnItemLongClickListener(this.onItemLongClickListener);
    }

    private AdapterView.OnItemClickListener onItemClickListener = new AdapterView.OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            String message = position + "番目のアイテムがクリックされました";
            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
        }
    };

    private AdapterView.OnItemLongClickListener onItemLongClickListener = new AdapterView.OnItemLongClickListener() {
        @Override
        public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
            String message = position + "番目のアイテムが長押しされました";
            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
            return false;
        }
    };
}

例3:java

画面 : activity_main.xml

* ListView x 1、EditText x1 を画面に追加

MainActivity.java

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;

public class MainActivity extends Activity implements OnClickListener {
    private EditText editText1;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.editText1 = (EditText)findViewById(R.id.editText1);

        // ★ここ★
        String[] members = {
                "Mike",
                "Tom",
                "Ken",
                "Kevin",
                "Jastin",
                "Coco",
                "Bella"
                };
        
        ArrayAdapter<String> adapter = 
                new ArrayAdapter<String>(
                        this, android.R.layout.simple_list_item_1, members);
        ListView listView = (ListView) findViewById(R.id.listView1);
        // アダプターを設定します
        listView.setAdapter(adapter);
        // リスト項目がクリックされた時の処理
        listView.setOnItemClickListener(new SampleOnItemClickListener(this.editText1));
        // リスト項目が選択された時の処理
        listView.setOnItemSelectedListener(new SampleOnItemSelectedListener(this.editText1));
        // リスト項目が長押しされた時の処理
        listView.setOnItemLongClickListener(new SampleOnItemLongClickListener(this.editText1));        
    }
}

イベント・ハンドラクラス:SampleOnItemClickListener.java

import android.view.View;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.ListView;

public class SampleOnItemClickListener implements AdapterView.OnItemClickListener {
    private EditText editText1;
    
    public SampleOnItemClickListener(EditText editText1) {
        this();
        this.editText1 = editText1;
    }
    private SampleOnItemClickListener() {
    }
    
    @Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        ListView listView = (ListView) arg0;
        String item = (String) listView.getItemAtPosition(arg2);
        this.editText1.setText(item + " Click");
    }
}

SampleOnItemSelectedListener.java

import android.view.View;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.ListView;

public class SampleOnItemSelectedListener implements AdapterView.OnItemSelectedListener {
    private EditText editText1;
    
    public SampleOnItemSelectedListener(EditText editText1) {
        this();
        this.editText1 = editText1;
    }
    private SampleOnItemSelectedListener() {
    }

    @Override
    public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,
            long arg3) {
        ListView listView = (ListView) arg0;
        String item = (String) listView.getItemAtPosition(arg2);
        this.editText1.setText(item + " Selected");     
    }
    @Override
    public void onNothingSelected(AdapterView<?> arg0) {
        // TODO Auto-generated method stub
        
    }
}

SampleOnItemLongClickListener.java

import android.view.View;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.ListView;

public class SampleOnItemLongClickListener implements AdapterView.OnItemLongClickListener {
    private EditText editText1;
    
    public SampleOnItemLongClickListener(EditText editText1) {
        this();
        this.editText1 = editText1;
    }
    private SampleOnItemLongClickListener() {
    }
    @Override
    public boolean onItemLongClick(AdapterView<?> arg0, View arg1, int arg2,
            long arg3) {
        ListView listView = (ListView) arg0;
        String item = (String) listView.getItemAtPosition(arg2);
        this.editText1.setText(item + " Long Click");
        
        return false;
    }
}

参考文献

例1で参考にした
https://programming-beginner-memo.com/?p=837
例2で参考にした
http://androidroid.info/android/listview/30/
http://techbooster.org/android/ui/9039/
http://qiita.com/Tsumugi/items/47f31bb7351979a45653
https://www.usaco-pg.com/2017/05/15/kotlin-de-android-simple-listview/
ListView選択時のイベント
https://buildbox.net/kotlin-listview%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%A8%E9%81%B8%E6%8A%9E%E5%87%A6%E7%90%86/

関連記事

画面コンポーネント / ListView ~ Realm データを表示 ~
https://dk521123.hatenablog.com/entry/2018/09/02/130212
Kotlin / Realm で英単語帳を作る
https://dk521123.hatenablog.com/entry/2020/07/20/232009
画面コンポーネント / RecyclerView ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/07/21/000000