[Android] ArrayAdapter を使ってレイアウトをアレンジする

手っ取り早くテキストだけの単純なリスト表示をしたところで、タイトルが欲しいのでヘッダーを追加したり、あるいは広告をフッターに貼りたいというよう要求が出てきます。

Android Studio
2021.2.1

ArrayAdapter

　
ListView と ArrayAdapter 簡単なテキストリストの表示の続きで、
ヘッダーやフッター、タップでトーストを表示させてみましょう。

目次
1. Header & Footer
2. item の add()
3. setOnItemClickListener

Header & Footer

　
ヘッダーやフッターをListViewに追加するメソッド addHeaderView addFooterView があります。ただこれはちょっと期待したものと少し違うと（個人的に）思いましたので、汎用的作ってみました。作り方はいろいろあるとは思います。
　
レイアウトとしてRelativeLayoutを使いヘッダーはListViewとまとめてLinearLayoutに入れる。フッターとしてのボタンはBottomに張り付ける形です。
　
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- Header -->
        <TextView
            android:text="@string/decade"
            android:background="#888"
            android:textSize="20sp"
            android:textColor="#fff"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="40dp" />

        <ListView android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <!-- Footer -->
    <Button
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

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

tools:context=".MainActivity">

<LinearLayout

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<TextView

android:text="@string/decade"

android:background="#888"

android:textSize="20sp"

android:textColor="#fff"

android:gravity="center"

android:layout_width="match_parent"

android:layout_height="40dp" />

<ListView android:id="@+id/listview"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</LinearLayout>

<Button

android:text="@string/button"

android:layout_alignParentBottom="true"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</RelativeLayout>

　
リソース
strings.xml

<resources>
    <string name="app_name">Your App Name</string>
    <string name="decade">Globe Decade</string>
    <string name="button">Button</string>
</resources>

<string name="decade">Globe Decade</string>

<string name="button">Button</string>

</resources>

　
ListViewの中は、TextViewで設定します。
list.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#444400"
    android:paddingStart="40dp"
    android:paddingEnd="5dp"
    android:textSize="24sp"
    android:textColor="#aaffdd" >

</TextView>

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#444400"

android:paddingStart="40dp"

android:paddingEnd="5dp"

android:textSize="24sp"

android:textColor="#aaffdd" >

</TextView>

　
このようにすれば、ListViewをレイアウトのViewの一部として扱えて便利になります。ただ最後のitemが見えなくなる可能性があります。空itemを使うなどの対応で解消できます。

item の add()

　
ArrayAdapterにitemを追加するにはadd()を使います。また、リスト表示しているitemを削除する場合はremove()です。insert()で挿入することもできます。

setOnItemClickListener

　
ここでは、add()を使って配列からitemを追加してリストを作り、itemをクリックするとその要素をToastで表示するようにしてみました。(lambda式を使い簡略化できます)
　

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(MainActivity.this, 
            String.format(Locale.US,"%sがtapされました",texts[position]),
            Toast.LENGTH_LONG).show();
   }
});

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

Toast.makeText(MainActivity.this,

String.format(Locale.US,"%sがtapされました",texts[position]),

Toast.LENGTH_LONG).show();

}

});

　
まとめると

MainActivity.java

//package com.example.testarrayadapter;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
import java.util.Locale;

public class MainActivity extends AppCompatActivity {

    private static final String[] texts = {
            // Globe Decade の楽曲リストより
            "Feel Like dance",
            "Joy to the love (globe)",
            "SWEET PAIN",
            "DEPARTURES (RADIO EDIT)",
            "FREEDOM (RADIO EDIT)",
            "Is this love",
            "Can't Stop Fallin' in Love",
            "FACE",
            "FACES PLACES",
            "Anytime smokin' cigarette",
            "Wanderin' Destiny",
            "Love again",
            "wanna Be A Dreammaker",
            "Sa Yo Na Ra",
            "sweet heart",
            "Perfume of love",
            "MISS YOUR BODY",
            "still growin' up",
            "biting her nails",
            "とにかく無性に…", "G", "l", "o", "b", "e"
    };

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

        // itemを表示するTextViewが設定されているlist.xmlを指す
        ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(this, R.layout.list);

        // activity_main.xmlのlistViewにListViewをセット
        ListView listView = findViewById(R.id.listview);

        for (String str: texts){
            // ArrayAdapterにitemを追加する
            arrayAdapter.add(str);
        }

        // adapterをListViewにセット
        listView.setAdapter(arrayAdapter);

        // itemがクリックされた時のリスナー, lambda
        listView.setOnItemClickListener((parent, view, position, id) ->
                Toast.makeText(MainActivity.this,
                String.format(Locale.US,"%sがtapされました",texts[position]),
                Toast.LENGTH_LONG).show());
    }
}

//package com.example.testarrayadapter;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.Toast;

import java.util.Locale;

public class MainActivity extends AppCompatActivity {

private static final String[] texts = {

// Globe Decade の楽曲リストより

"Feel Like dance",

"Joy to the love (globe)",

"SWEET PAIN",

"DEPARTURES (RADIO EDIT)",

"FREEDOM (RADIO EDIT)",

"Is this love",

"Can't Stop Fallin' in Love",

"FACE",

"FACES PLACES",

"Anytime smokin' cigarette",

"Wanderin' Destiny",

"Love again",

"wanna Be A Dreammaker",

"Sa Yo Na Ra",

"sweet heart",

"Perfume of love",

"MISS YOUR BODY",

"still growin' up",

"biting her nails",

"とにかく無性に…", "G", "l", "o", "b", "e"

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// itemを表示するTextViewが設定されているlist.xmlを指す

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(this, R.layout.list);

// activity_main.xmlのlistViewにListViewをセット

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

for (String str: texts){

// ArrayAdapterにitemを追加する

arrayAdapter.add(str);

}

// adapterをListViewにセット

listView.setAdapter(arrayAdapter);

// itemがクリックされた時のリスナー, lambda

listView.setOnItemClickListener((parent, view, position, id) ->

Toast.makeText(MainActivity.this,

String.format(Locale.US,"%sがtapされました",texts[position]),

Toast.LENGTH_LONG).show());

}

　
Listのitemをダイナミックに追加したり削除したりはArrayListを使う方法　ListViewアイテムの移動、削除　で説明しています。
このケースではadd(), remove()などは使わずにArrayListの要素自体を追加・削除しています。個人的にはこの方法がやりやすいのですが、お好みです。
　
　

ListView と ArrayAdapter 簡単なテキストリストの表示
ArrayAdapterを使ってレイアウトをアレンジ
ListActivity と ArrayAdapterで画像とテキストをリスト表示

References:
ListView
ArrayAdapter