androidのグリッドレイアウトの使い方

実現したいこと

androidについて質問します。
グリッドレイアウトを組み込んでいます。ですが、アイテムを3つ以上組み込んだ場合アイテムが消えてしまいます。原因が全く分かりません。
androidx.constraintlayout.widget.ConstraintLayoutが多くなっているのは現在共有しているのはグリッドの箇所を切り抜いたもので少しでも本番環境に近づけたいからです。
また、android:layout_marginTop="500dp"に設定しているのも本番環境に近づけるためなので、できるだけ触れないでいただけるとありがたいです。
ちなみにandroid:layout_marginTop="0dp"などとした場合にはしっかりと表示されるので処理では間違ってはないと思います。
※画像は用意してください。

参考url
https://akira-watson.com/android/gridview.html

該当のソースコード

java(MainActivity)
1package local.hal.st42.android.gridlayoutsample;
2
3import androidx.appcompat.app.AppCompatActivity;
4
5import android.os.Bundle;
6import android.widget.GridView;
7
8import java.util.ArrayList;
9import java.util.List;
10
11public class MainActivity extends AppCompatActivity {
12    // 表示する画像の名前（拡張子無し）
13    private final String[] members = {
14            "sake", "store" ,"group","group"
15    };
16    private final String[] members2 = {
17            "酒", "店" ,"サンプル","サンプル２"
18    };
19
20    // Resource IDを格納するarray
21    private final List<Integer> imgList = new ArrayList<>();
22    @Override
23    protected void onCreate(Bundle savedInstanceState) {
24        super.onCreate(savedInstanceState);
25        setContentView(R.layout.activity_main);
26
27        // for-each member名をR.drawable.名前としてintに変換してarrayに登録
28        for (String member: members){
29            int imageId = getResources().getIdentifier(
30                    member,"drawable", getPackageName());
31            imgList.add(imageId);
32        }
33
34        // GridViewのインスタンスを生成
35        GridView gridview = findViewById(R.id.gridview);
36        // BaseAdapter を継承したGridAdapterのインスタンスを生成
37        // 子要素のレイアウトファイル grid_items.xml を
38        // activity_main.xml に inflate するためにGridAdapterに引数として渡す
39        GridAdapter adapter = new GridAdapter(this.getApplicationContext(),
40                R.layout.grid_items,
41                imgList,
42                members2
43        );
44
45        // gridViewにadapterをセット
46        gridview.setAdapter(adapter);
47    }
48}

java(GridAdapter)
1package local.hal.st42.android.gridlayoutsample;//package your.package.name;
2
3import android.content.Context;
4import android.view.LayoutInflater;
5import android.view.View;
6import android.view.ViewGroup;
7import android.widget.BaseAdapter;
8import android.widget.ImageView;
9import android.widget.TextView;
10import java.util.List;
11
12public class GridAdapter extends BaseAdapter {
13
14    static class ViewHolder {
15        ImageView imageView;
16        TextView textView;
17    }
18
19    private final List<Integer> imageList;
20    private final String[] names;
21    private final LayoutInflater inflater;
22    private final int layoutId;
23
24    // 引数がMainActivityからの設定と合わせる
25    GridAdapter(Context context,
26                int layoutId,
27                List<Integer> iList,
28                String[] members) {
29
30        super();
31        this.inflater = (LayoutInflater)
32                context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
33        this.layoutId = layoutId;
34        imageList = iList;
35        names = members;
36    }
37
38    @Override
39    public View getView(int position, View convertView, ViewGroup parent) {
40
41        ViewHolder holder;
42        if (convertView == null) {
43            // main.xml の <GridView .../> に grid_items.xml を inflate して convertView とする
44            convertView = inflater.inflate(layoutId, parent, false);
45            // ViewHolder を生成
46            holder = new ViewHolder();
47
48            holder.imageView = convertView.findViewById(R.id.image_view);
49            holder.textView = convertView.findViewById(R.id.text_view);
50
51            convertView.setTag(holder);
52        }
53        else {
54            holder = (ViewHolder) convertView.getTag();
55        }
56
57        holder.imageView.setImageResource(imageList.get(position));
58        holder.textView.setText(names[position]);
59
60        return convertView;
61    }
62
63    @Override
64    public int getCount() {
65        // List<String> imgList の全要素数を返す
66        return imageList.size();
67    }
68
69    @Override
70    public Object getItem(int position) {
71        return null;
72    }
73
74    @Override
75    public long getItemId(int position) {
76        return 0;
77    }
78}

xml(activity_main)
1<?xml version="1.0" encoding="utf-8"?>
2<ScrollView
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    xmlns:tools="http://schemas.android.com/tools"
6    android:layout_width="match_parent"
7    android:layout_height="wrap_content"
8    android:fillViewport="true"
9    tools:context=".MainActivity">
10
11    <androidx.constraintlayout.widget.ConstraintLayout
12        android:layout_width="match_parent"
13        android:layout_height="wrap_content">
14
15        <androidx.constraintlayout.widget.ConstraintLayout
16            android:layout_width="wrap_content"
17            android:layout_height="wrap_content"
18            android:layout_marginTop="500dp"
19            app:layout_constraintTop_toTopOf="parent">
20
21            <GridView
22                android:id="@+id/gridview"
23                android:layout_width="match_parent"
24                android:layout_height="wrap_content"
25                android:gravity="center"
26                android:horizontalSpacing="1dp"
27                android:numColumns="2"
28                android:stretchMode="columnWidth"
29                android:verticalSpacing="1dp"
30                app:layout_constraintEnd_toEndOf="parent"
31                app:layout_constraintHorizontal_bias="0.0"
32                app:layout_constraintStart_toStartOf="parent"
33                tools:layout_editor_absoluteY="27dp" />
34        </androidx.constraintlayout.widget.ConstraintLayout>
35
36    </androidx.constraintlayout.widget.ConstraintLayout>
37
38</ScrollView>

xml(grid_items)
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    android:padding="3dp" >
8
9    <ImageView
10        android:id="@+id/image_view"
11        android:layout_width="match_parent"
12        android:layout_height="140dp"
13        android:scaleType="centerCrop"
14        app:layout_constraintEnd_toEndOf="parent"
15        app:layout_constraintStart_toStartOf="parent"
16        app:layout_constraintTop_toTopOf="parent" />
17
18    <TextView
19        android:id="@+id/text_view"
20        android:layout_width="match_parent"
21        android:layout_height="wrap_content"
22        android:layout_marginTop="8dp"
23        android:gravity="center"
24        app:layout_constraintEnd_toEndOf="parent"
25        app:layout_constraintStart_toStartOf="parent"
26        app:layout_constraintTop_toBottomOf="@+id/image_view" />
27
28</androidx.constraintlayout.widget.ConstraintLayout>

試したこと

グリッド用にscrollviewを用意してみてもダメで、layout_width、layout_heightを変えてみてもダメでした。
layout_marginTopを変えたら表示されないみたいなのですが対処方法が分かりません。

jimbe

2023/06/05 03:56 編集

>アイテムを3つ以上組み込んだ場合アイテムが消えてしまいます。 3つ全部が消えるのでしょうか、3つ目以降だけが消える（？）のでしょうか。アイテムが幾つの場合どのような表示となるモノを作ろうとされているのか、手書きでも良いですのでレイアウトイメージ絵をご提示頂けますでしょうか。テスト環境では画面の大きさは如何ほどなのでしょう。極端に言えば縦が 500dp の環境でマージンを 500dp 取ったら表示されないわけですし。テストに使われている4つの画像の大きさは如何ほどでしょう。 OS や API のバージョンは幾つでしょうか。 activity_main.xml を張り付けてみると、内側の ConstraintLayout とその中の GridView にワーニングが出ます。それぞれ制約が足りていません。それらを設定したらどうなるでしょうか。(GridView よりも ConstraintLayout の制約の問題かもしれません。)

回答1件

ベストアンサー

少なくとも、 GridView は自前でスクロールしますので ScrollView は必要ありません。

500dp に当たる ( 仮に Dummy) 部分と、 GridView 的に 2 列で画像を表示する Member 部分を含めて全体がスクロールするような構造を RecyclerView で作ってみます。
Dummy 部分はテキトウにテキスト2行のデータとしています。
文字列から画像リソースIDを求める処理は関係無いので直接書いています。

java
1import androidx.annotation.*;
2import androidx.appcompat.app.AppCompatActivity;
3import androidx.recyclerview.widget.RecyclerView;
4
5import android.os.Bundle;
6import android.view.*;
7import android.widget.*;
8
9import java.util.ArrayList;
10import java.util.List;
11
12public class MainActivity extends AppCompatActivity {
13  @Override
14  protected void onCreate(Bundle savedInstanceState) {
15    super.onCreate(savedInstanceState);
16    setContentView(R.layout.activity_main);
17
18    RecyclerAdapter adapter = new RecyclerAdapter();
19
20    adapter.addDummy("Aaa", "111-1");
21    adapter.addDummy("Bbb", "222-22");
22    adapter.addDummy("Ccc", "333-333");
23    adapter.addDummy("Ddd", "444-4444");
24    adapter.addDummy("Eee", "555-55555");
25    adapter.addDummy("Fff", "666-666666");
26    adapter.addDummy("Ggg", "777-7777777");
27
28    adapter.addMember(R.drawable.sake, "酒");
29    adapter.addMember(R.drawable.store, "店");
30    adapter.addMember(R.drawable.group, "グループ");
31    adapter.addMember(R.drawable.group, "グループ２");
32    adapter.addMember(R.drawable.sample, "サンプル");
33
34    RecyclerView recyclerview = findViewById(R.id.recycler_view);
35    recyclerview.setAdapter(adapter);
36  }
37
38  /**
39   * Dummy (1行1件)・ Member (1行2件)を表示するアダプタ.
40   */
41  private static class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
42    private static abstract class ViewHolder extends RecyclerView.ViewHolder {
43      ViewHolder(@NonNull ViewGroup parent, @LayoutRes int resource) {
44        super(LayoutInflater.from(parent.getContext()).inflate(resource, parent, false));
45      }
46      abstract void bind(int position);
47    }
48
49    private static class Dummy {
50      final String text1, text2;
51      Dummy(String text1, String text2) {
52        this.text1 = text1;
53        this.text2 = text2;
54      }
55    }
56    private final List<Dummy> dummyList = new ArrayList<>();
57
58    void addDummy(String text1, String text2) {
59      dummyList.add(new Dummy(text1, text2));
60      notifyItemInserted(dummyList.size() - 1);
61    }
62
63    private class DummyViewHolder extends ViewHolder {
64      private final TextView text1, text2;
65      DummyViewHolder(@NonNull ViewGroup parent) {
66        super(parent, R.layout.dummy_row);
67        text1 = itemView.findViewById(R.id.name1);
68        text2 = itemView.findViewById(R.id.name2);
69      }
70      @Override
71      void bind(int position) {
72        Dummy dummy = dummyList.get(position);
73        text1.setText(dummy.text1);
74        text2.setText(dummy.text2);
75      }
76    }
77
78    private static class Member {
79      final @DrawableRes int id;
80      final String name;
81      Member(@DrawableRes int id, String name) {
82        this.id = id;
83        this.name = name;
84      }
85    }
86    private final List<Member> memberList = new ArrayList<>();
87
88    void addMember(@DrawableRes int id, String name) {
89      int position = dummyList.size() + memberList.size() / 2;
90      memberList.add(new Member(id, name));
91      if(memberList.size() % 2 == 1) {
92        notifyItemInserted(position);
93      } else {
94        notifyItemChanged(position);
95      }
96    }
97
98    private class MemberViewHolder extends ViewHolder {
99      private final ImageView image1, image2;
100      private final TextView name1, name2;
101      MemberViewHolder(@NonNull ViewGroup parent) {
102        super(parent, R.layout.member_row);
103        image1 = itemView.findViewById(R.id.image1);
104        image2 = itemView.findViewById(R.id.image2);
105        name1 = itemView.findViewById(R.id.name1);
106        name2 = itemView.findViewById(R.id.name2);
107      }
108      @Override
109      void bind(int position) {
110        int index = (position - dummyList.size()) * 2;
111        Member member = memberList.get(index);
112        image1.setImageResource(member.id);
113        name1.setText(member.name);
114
115        if(++index < memberList.size()) {
116          member = memberList.get(index);
117          image2.setImageResource(member.id);
118          name2.setText(member.name);
119        } else {
120          image2.setImageResource(0);
121          name2.setText("");
122        }
123      }
124    }
125
126    @Override
127    public int getItemViewType(int position) {
128      return position < dummyList.size() ? 0 : 1;
129    }
130
131    @NonNull
132    @Override
133    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
134      switch(viewType) {
135        case 0: return new DummyViewHolder(parent);
136        case 1: return new MemberViewHolder(parent);
137      }
138      throw new IllegalArgumentException("viewType=" + viewType);
139    }
140
141    @Override
142    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
143      holder.bind(position);
144    }
145
146    @Override
147    public int getItemCount() {
148      return dummyList.size() + (memberList.size() + 1) / 2;
149    }
150  }
151}

res/layout/activity_main.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:tools="http://schemas.android.com/tools"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    android:id="@+id/recycler_view"
6    android:layout_width="match_parent"
7    android:layout_height="match_parent"
8    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
9    tools:context=".MainActivity" />

res/layout/dummy_row.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    android:layout_width="match_parent"
5    android:layout_height="wrap_content"
6    android:padding="3dp">
7
8  <TextView
9      android:id="@+id/name1"
10      android:layout_width="0dp"
11      android:layout_height="wrap_content"
12      android:textSize="30dp"
13      app:layout_constraintEnd_toEndOf="parent"
14      app:layout_constraintStart_toStartOf="parent"
15      app:layout_constraintTop_toTopOf="parent" />
16
17  <TextView
18      android:id="@+id/name2"
19      android:layout_width="0dp"
20      android:layout_height="wrap_content"
21      android:textAlignment="textEnd"
22      app:layout_constraintEnd_toEndOf="parent"
23      app:layout_constraintStart_toStartOf="parent"
24      app:layout_constraintTop_toBottomOf="@id/name1" />
25</androidx.constraintlayout.widget.ConstraintLayout>

res/layout/member_row.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    android:layout_width="match_parent"
5    android:layout_height="wrap_content"
6    android:padding="3dp">
7
8  <ImageView
9      android:id="@+id/image1"
10      android:layout_width="0dp"
11      android:layout_height="140dp"
12      android:scaleType="centerCrop"
13      android:layout_margin="1dp"
14      app:layout_constraintEnd_toStartOf="@id/image2"
15      app:layout_constraintStart_toStartOf="parent"
16      app:layout_constraintTop_toTopOf="parent" />
17  <TextView
18      android:id="@+id/name1"
19      android:layout_width="0dp"
20      android:layout_height="wrap_content"
21      android:layout_marginTop="8dp"
22      android:gravity="center"
23      app:layout_constraintEnd_toEndOf="@id/image1"
24      app:layout_constraintStart_toStartOf="@id/image1"
25      app:layout_constraintTop_toBottomOf="@+id/image1" />
26
27  <ImageView
28      android:id="@+id/image2"
29      android:layout_width="0dp"
30      android:layout_height="140dp"
31      android:scaleType="centerCrop"
32      android:layout_margin="1dp"
33      app:layout_constraintEnd_toEndOf="parent"
34      app:layout_constraintStart_toEndOf="@id/image1"
35      app:layout_constraintTop_toTopOf="parent" />
36  <TextView
37      android:id="@+id/name2"
38      android:layout_width="0dp"
39      android:layout_height="wrap_content"
40      android:layout_marginTop="8dp"
41      android:gravity="center"
42      app:layout_constraintEnd_toEndOf="@id/image2"
43      app:layout_constraintStart_toStartOf="@id/image2"
44      app:layout_constraintTop_toBottomOf="@+id/image2" />
45</androidx.constraintlayout.widget.ConstraintLayout>

エミュレータ実行時スクリーンショット

投稿2023/06/05 04:40

編集2023/06/08 15:48

jimbe

総合スコア11798

回答へのコメント

syosinsya109

2023/06/05 05:39

回答ありがとうございます。 ScrollViewを入れているのには理由がありまして、android:layout_marginTop="500dp"を設定している枠にScrollViewを用いて沢山のデータを入れたのちに下部にGridViewを使用しようとしていますのでこのような切り抜きになっています。なのでScrollViewは入れたいと思っています。実現したいことの条件に書くのを忘れてしまい申し訳ございませんでした。

jimbe

2023/06/05 05:56 編集

基本的にはスクロールする領域内に更にスクロールするものを入れることは出来ません。 500dp 部分がスクロールするのならそこだけに ScrollView を使うべきで、 GridView まで含める必要は無いでしょう。そうではなくて 500dp の部分(ここもデータ量は可変)と GridView の部分を含めて全体としてスクロールさせるというのなら、全く別の方法(ScrollView&GridView では無く全体を RecyclerView で構成する)が必要かも知れません。一部分だけを見ても全体への影響が分かりにくいので、質問へのコメントとしてレイアウトイメージの絵をお願いしています。