ListViewにGridViewを埋め込むAdapter

Question

GridViewに見出しを付け、この図のような画面を作りたいと考えております。
将来的にはこの見出し部分にボタンも埋め込みたいと考えております。

色々と検索して見つかった以下のページを参考に、ListViewにGridViewを埋め込む方式のものを作成しているのですが、こちらのページでは足りないクラスやxmlレイアウトがあるようで、どのようなものを作成すればいいのか調べながら理解しようとしましたが、解決出来ませんでした。
https://qiita.com/KeithYokoma/items/a479ee529c520e829e7f

public class SectionListAdapter extends ArrayAdapter<SectionData> {
    public SectionListAdapter(Context context, List<SectionData> objects) {
        super(context, R.layout.list_item_layout, R.id.label_section_title, objects);
    }

    @Nullable
    @Override
    public View getView(int position, View convertView, ViewGroup group) {
        View row = super.getView(position, convertView, group);

        SectionData data = getItem(position);

        TextView sectionName = (TextView) row.findViewById(R.id.label_section_name);
        sectionName.setText(data.getSectionName());

        GridView grid = (GridView) row.findViewById(R.id.grid);
        SectionGridAdapter adapter = new SectionGridAdapter(getContext(), data.getImageUrls());
        grid.setAdapter(adapter);

        return row;
    }
}

↑こちらのR.id.label_section_titleはlist_item_layout.xml内に記述するべき何かなのでしょうか。
また、getSectionName、getImageUrlsの定義や取得する値についてはどのように記述すればいいのでしょうか。

public class SectionGridAdapter extends ArrayAdapter<String> {
    public SectionGridAdapter(Context context, List<String> objects) {
        super(context, R.layout.grid_item, R.id.label_grid, objects);
    }

(省略)

↑こちらのR.id.label_gridも同様に理解ができません。

↓自分で追加したxmlレイアウトです。

list_item_layout.xml

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

    <TextView
        android:id="@+id/label_section_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="16dp" />

    <GridView
        android:id="@+id/grid"
        android:layout_width="wrap_content"
        android:layout_height="22dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteY="35dp" />


</androidx.constraintlayout.widget.ConstraintLayout>

grid_item.xml

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

    <ImageView
        android:id="@+id/image_cell"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:padding="3dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

以上の情報で何かお分かりでしたらご教授頂きたく思います。宜しくお願い致します。

Answer 1

ListView よりも RecyclerView と GridLayoutManager を組み合わせて使った方がいいと思います。
サンプルプロジェクト を作ってみたのでご覧ください。以下、解説します。

まず MainActivity より、

        List<String> sectionTitles = new ArrayList<>();
        List<List<String>> sectionItems = new ArrayList<>();

見出しと表示項目のデータを作ってます。サンプルなのでどちらも単なる文字列ですが、実際には Section とか Item みたいなクラスを作る (かつ、各セクションの項目は Section に持たせる) のがお勧めです。
この後の for 文で、セクション 10 個と、各セクションにランダムに 1 〜 20 個の項目を作ってます。

        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if (adapter.getSectionItemIndex(position).length == 1) {
                    return 3;
                } else {
                    return 1;
                }
            }
        });

GridLayoutManager というのを使うと横にいくつ項目を並べるかを指定できます。また、SpanSizeLookup を設定すると、項目ごとの横幅を指定できますので、見出しの場合は横いっぱいに表示するようにしています。
参考: android - RecyclerView GridLayoutManager with full width header - Stack Overflow

次に SectionGridAdapter ですが、RecyclerView の Adapter は (某 iOS の TableView と違って) 単なる 1 次元配列を想定しているので、例えば以下のようなデータの場合、まず getItemCount で合計項目数 (count = 9) を計算する必要があります。また、Adapter のメソッドは 0 〜 count - 1 の position の値を使って呼ばれるので、それがどのセクションの何番目の項目かを getSectionItemIndex で計算しています。

├── Section 1           position = 0        index = [0]
│   └── Item 1-1        position = 1        index = [0, 0]
├── Section 2           position = 2        index = [1]
│   ├── Item 2-1        position = 3        index = [1, 0]
│   └── Item 2-2        position = 4        index = [1, 1]
└── Section 3           position = 5        index = [2]
    ├── Item 3-1        position = 6        index = [2, 0]
    ├── Item 3-2        position = 7        index = [2, 1]
    └── Item 3-3        position = 8        index = [2, 2]

合計項目数 count = 9

    // 合計項目数 (セクションの数 + 各セクションの項目数の合計) を計算する。
    @Override
    public int getItemCount() {
        int count = sectionTitles.size();
        for (List<String> items : sectionItems) {
            count += items.size();
        }
        return count;
    }

    // position が見出しの場合は長さ 1 の配列 [セクション番号]、
    // 項目の場合は長さ 2 の配列 [セクション番号, 項目番号] を返す。
    public int[] getSectionItemIndex(int position) {
        for (int section = 0; section < sectionTitles.size(); section++) {
            if (position == 0) {
                return new int[] { section };
            } else if (position <= sectionItems.get(section).size()) {
                return new int[] { section, position - 1 };
            }
            position -= 1 + sectionItems.get(section).size();
        }
        return null;
    }

あとは普通の RecyclerView ですね。見出しと項目はそれぞれ layout_header と layout_item で作ってますので、必要に応じて修正してください。

Comments

[TTYTT]

ご丁寧に解説やサンプルまで頂き、とても理解がしやすく大変助かりました。ありがとうございます。
RecyclerViewというものの存在を知らずにListViewを使う方法しかないと思い込んでいたため、幅が広がり大変勉強になりました。
頂いた情報を参考に見出し(Section)と画像(Item)を、想像していた通りの一覧配置で表示することができました。

これを元にそれぞれのItemにClickListnerを設定する際は、こちらのサンプルの場合のItemViewHolderクラス内に記述をすれば宜しいのでしょうか。

[hoshi-takanori]

はい。各項目が押された場合の処理は ItemViewHolder の bindItem, 見出しが押された場合の処理は HeaderViewHolder の bindHeader に書けばいいと思います。

[TTYTT]

なんとか構造を理解し先に進むことが出来そうです、大変勉強になりました。ありがとうございました。