平凡エンジニアからの出発

一に努力、二に理想、三に積小為大。

【Android講座】第3回 ListViewの基本的な使い方



Lesson 3で学ぶこと

  • パーツ(ListView)について
  • Step by Stepで実装
    ↓ Lesson3 アプリ
f:id:atuyan39:20210501194316p:plain:w300f:id:atuyan39:20210501194321p:plain:w300

パーツについて

ListView

要素(Item)をリスト上に表示するView

developer.android.com

◆ListViewの実装方法

  1. Itemを用意する
    ArrayListやarray-stringで定義する
  2. Adapterを用意する
    →ArrayAdapterにリストItemのレイアウトを設定して、1で作成したItemをセットする
  3. ListViewに表示する
    →ListViewに2で作成したAdapterをセットする

Androidでは、下記のテキストが一つ入るItemのリストを用意されている。
android.R.layout.simple_list_item_1.xml : TextViewが一つ配置されているシンプルなリスト。

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingStart="?android:attr/listPreferredItemPaddingStart"
    android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
    android:minHeight="?android:attr/listPreferredItemHeightSmall" />

Lesson 3 Step by Step実装

基本の流れ

  1. 画面作成(Activityやlayoutの追加)
  2. 画面調節(パーツの追加や位置調節)
  3. イベント処理(ボタン押下された等)
  4. 画面更新(表示する、消去する等)

画面作成

EmptyActivityを選択して、新規にLesson3Activity.javaを追加する

画面修正

ListViewを配置する

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Lesson3Activity">

    <ListView
        android:id="@+id/lesson3_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="161dp"
        tools:layout_editor_absoluteY="303dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

ListViewを取得

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_lesson3);
    // Viewを取得
    ListView listView = findViewById(R.id.lesson3_list_view);
}

Adapterを作成

    // Adapterを作成する//////////////////////////////////////////////////////////
    // 方法1 : 表示するリストを動的に作成
    List<String> listItems = new ArrayList<>();
    listItems.add("月曜日");
    listItems.add("火曜日");
    listItems.add("水曜日");
    ListAdapter adapter1 = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, listItems);
    // 方法2 : 表示するリストを静的に作成
    ListAdapter adapter2 = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.week)
    // 方法3 : 方法2の別の方法。Resourceからの参照する際に使える。
    ListAdapter adapter3 = ArrayAdapter.createFromResource(this, R.array.week, android.R.layout.simple_list_item_1);
    ////////////////////////////////////////////////////////////////////////////

イベント処理

ボタンが押下された際の処理を追加

    // ListItemが押下された時の処理を追加する
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            TextView textView = (TextView) view;
            Toast.makeText(Lesson3Activity.this, textView.getText(), Toast.LENGTH_SHORT).show();
        }
    });

画面更新

    // 作成したAdapterをListViewに表示
    listView.setAdapter(adapter1);

code

Lesson 3 · atuyan39/AndroidLesson@ef9363d · GitHub