AndroidのRecyclerViewで可変アイテムの高さが正確に計算されない

Question

実現したいこと

• スクロールビュー内のRecyclerViewがスクロールなしで全アイテムを3列でにグリッド上に表示できること

(RecyclerView)にこだわりはないので別のアプローチでも大丈夫です！

• リスト可変アイテムの高さを持つRecyclerViewで、正確に全体の高さを計算する方法はありますか？
• リストあるいは、他にアプローチとして考えられる解決策があれば教えてください。

前提

現在、AndroidのRecyclerViewを使ってスクロール無しの横３列で
グリッド上にアイテムを表示しようと思っています。

表示する各アイテムはアイテム内の要素をGONEにしたり、VISIBLEにしているので高さが異なるため、
行ごとに一番高いアイテムの高さに合わせてRecyclerViewの高さを動的に計算しようとしています。

しかし、RecyclerViewの高さを正確に計算できず、特定の行が見切れる、
または高さが合わない問題が発生しています。

発生している問題

• リストスクロールをしないようにしたRecyclerViewの高さが正確に計算されず、一部の行が見切れる。
• 1行ごとのアイテムの高さが異なるため、行ごとの最大高さを正しく反映させたいが、うまくいかない。

該当のソースコード

1. レイアウトファイル (ScrollView + RecyclerView)

<ScrollView
    android:id="@+id/main_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <!-- グリッド表示のRecyclerView -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/articleRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:nestedScrollingEnabled="false" />
        <!-- 以下にその他項目(省略) -->
    </LinearLayout>
</ScrollView>

1. アイテムのレイアウト (item_article.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="8dp"
    android:paddingLeft="8dp"
    android:paddingRight="8dp">

    <!-- 固定表示される記事のサムネイル -->
    <ImageView
        android:id="@+id/articleImage"
        android:layout_width="104dp"
        android:layout_height="104dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <!-- Newアイコン（表示/非表示） -->
    <TextView
        android:id="@+id/articleNewIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/articleImage"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="4dp"
        android:text="NEW!"
        android:visibility="gone" />

    <!-- 投稿日（nullの場合非表示） -->
    <TextView
        android:id="@+id/publishDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/articleNewIcon"
        android:layout_centerHorizontal="true"
        android:visibility="gone" />

    <!-- 常に表示されるタイトル -->
    <TextView
        android:id="@+id/articleTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/publishDate"
        android:layout_centerHorizontal="true"
        android:text="Article Title" />

    <!-- ブログ名（nullの場合非表示） -->
    <TextView
        android:id="@+id/blogName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/articleTitle"
        android:layout_centerHorizontal="true"
        android:visibility="gone" />
</RelativeLayout>

1. アダプタ (ArticleListAdapter.java)

public class ArticleListAdapter extends RecyclerView.Adapter<ArticleListAdapter.ArticleViewHolder> {
    private List<Article> dataList;

    public ArticleListAdapter(List<Article> dataList) {
        this.dataList = dataList;
    }

    @NonNull
    @Override
    public ArticleViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_article, parent, false);
        return new ArticleViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull ArticleViewHolder holder, int position) {
        Article data = dataList.get(position);
        // サムネイル
        holder.articleImage.setImageResource(data.getImageResourceId());
        // タイトル（常に表示）
        holder.titleView.setText(data.getTitle());
        // Newアイコン
        holder.newIcon.setVisibility(data.isNew() ? View.VISIBLE : View.GONE);
        // 投稿日（nullの場合非表示）
        if (data.getPublishDate() != null) {
            holder.publishDate.setText(data.getPublishDate());
            holder.publishDate.setVisibility(View.VISIBLE);
        } else {
            holder.publishDate.setVisibility(View.GONE);
        }
        // ブログ名（nullの場合非表示）
        if (data.getBlogName() != null) {
            holder.blogName.setText(data.getBlogName());
            holder.blogName.setVisibility(View.VISIBLE);
        } else {
            holder.blogName.setVisibility(View.GONE);
        }
    }

    @Override
    public int getItemCount() {
        return dataList.size();
    }

    public static class ArticleViewHolder extends RecyclerView.ViewHolder {
        TextView titleView, newIcon, publishDate, blogName;
        ImageView articleImage;
        public ArticleViewHolder(@NonNull View itemView) {
            super(itemView);
            titleView = itemView.findViewById(R.id.articleTitle);
            newIcon = itemView.findViewById(R.id.articleNewIcon);
            publishDate = itemView.findViewById(R.id.publishDate);
            blogName = itemView.findViewById(R.id.blogName);
            articleImage = itemView.findViewById(R.id.articleImage);
        }
    }
}

1. フラグメント (MyFragment.java)

public class MyFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout, container, false);

        RecyclerView recyclerView = view.findViewById(R.id.articleRecyclerView);
        recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 3));
        recyclerView.setAdapter(new ArticleListAdapter(getDummyData()));

        // 高さを動的に設定
        adjustRecyclerViewHeight(recyclerView, 3);
        return view;
    }

    // RecyclerViewの高さを動的に調整する
    private void adjustRecyclerViewHeight(RecyclerView recyclerView, int columns) {
        RecyclerView.Adapter adapter = recyclerView.getAdapter();
        if (adapter == null) {
            return;
        }

        int totalHeight = 0;  // 最終的な RecyclerView の高さ
        int itemCount = adapter.getItemCount();  // アイテム数

        // 1行の高さを記録するための変数
        List<Integer> rowHeights = new ArrayList<>();  // 各行の高さを格納するリスト

        // 各行の高さを計算
        for (int rowIndex = 0; rowIndex < Math.ceil((double) itemCount / columns); rowIndex++) {
            int maxHeightInRow = 0;

            // 各行内の各アイテムの高さを計測し、最大値を取る
            for (int columnIndex = 0; columnIndex < columns; columnIndex++) {
                int itemIndex = rowIndex * columns + columnIndex;

                // アイテムが存在する場合のみ計測
                if (itemIndex < itemCount) {
                    // アイテムの ViewHolder を取得
                    RecyclerView.ViewHolder holder = adapter.createViewHolder(recyclerView, adapter.getItemViewType(itemIndex));
                    View itemView = holder.itemView;

                    // アイテムの高さを測定
                    itemView.measure(
                            View.MeasureSpec.makeMeasureSpec(recyclerView.getWidth() / columns, View.MeasureSpec.EXACTLY),
                            View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
                    );

                    // アイテムの高さを取得
                    int itemHeight = itemView.getMeasuredHeight();

                    // アイテムのマージンを考慮
                    ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) itemView.getLayoutParams();
                    int itemVerticalMargin = layoutParams.topMargin + layoutParams.bottomMargin;
                    itemHeight += itemVerticalMargin;

                    // この行の最大高さを更新
                    if (itemHeight > maxHeightInRow) {
                        maxHeightInRow = itemHeight;
                    }
                }
            }

            // 行の最大高さをリストに追加
            rowHeights.add(maxHeightInRow);
        }

        // 各行の高さを合計して最終的な RecyclerView の高さを計算
        for (int rowHeight : rowHeights) {
            totalHeight += rowHeight;
        }

        // RecyclerView のパディングを考慮
        totalHeight += recyclerView.getPaddingTop() + recyclerView.getPaddingBottom();

        // 高さを設定
        ViewGroup.LayoutParams params = recyclerView.getLayoutParams();
        params.height = totalHeight;
        recyclerView.setLayoutParams(params);
    }
}

試したこと

• GridViewを使用したGrid表示(各行のアイテムの高さが揃わず断念しRecyclerViewに移行)
• ViewHolderを使ってアイテムの高さを取得し、行ごとの最大高さを計算
• ViewTreeObserver.OnGlobalLayoutListener でRecyclerViewが描画された後に高さを計算
• スクロールを無効にして全アイテムが表示されるように設定（nestedScrollingEnabled=false）

補足情報（FW/ツールのバージョンなど）

• Java
• minSdkVersion 21
• targetSdkVersion 33
• Android Studio

Comments

[jimbe]

質問本文の最大文字数に引っかかったのかもしれませんが、幾つかの重要な部分(ArticleクラスやgetDammyDataメソッド)が省略されていて、状況の確認が出来ません。
もしまだ最大文字数まで余裕がありましたら、本文で説明されている状況が『こちらでコード・データを補完せずに』確認できる十分なコード・データをご提示ください。
もし書ききれないようでしたら、 GitHub 等外部のストレージ(質問本文はずっと残りますので少なくとも短期間では消えない所)をご利用になって、その URL を載せて頂く等で対応をお願いします。

[croakubi]

ありがとうございます！
こちらがArticleクラスやgetDammyDataメソッドを保管したコードとなります。
プロジェクト全体は大変申し訳ありませんがちょっとセキュリティの兼ね合いがありまして必要最低限のコードの展開となります。
https://gist.github.com/c-akubi/0ff915397e7a3e3754544499c1323cfb

[jimbe]

ありがとうございます。
テストデータですが、drawable に置く R.drawable.article_image_1～3を 高さ100px/200px/300px で作成しておく等で良いのでしょうか。

[croakubi]

ありがとうございます。
R.drawable.article_imageのサイズは100px固定で
newIconやarticleImageをVISIBLEやGONEなどにして各アイテムごとに高さを変える感じですね。

[croakubi]

すみません、補足としてデータが30件くらいある場合にリストにアイテムが表示し切れなくなったので高さの計算処理を実装したという経緯があります。

Answer 1

minSDK が 21 で出来るか分かりませんが、手元の 30 でざっくりやってみた感じですと、

・フラグメントのレイアウトで RecyclerView を含む ScrollView は、 androidx.core.widget.NestedScrollView を用いる。
→ でも試したら ScrollView でも大丈夫かも？
→ でもでも、やっぱり ScrollView だと RecyclerView の表示が崩れてるかもしれない。

・ RecyclerView の高さの計算・設定は しない。

でそれっぽくなったような感じがします。

Comments

[croakubi]

おお？
adjustRecyclerViewHeight()を使用せずただ表示するだけって言うことでしょうか？

[jimbe]

フラグメントのレイアウトを ScrollView をトップレベルにして、後はテストデータをコピペで16個用意して表示した所、高さを計算しなくても スクロールしないRecyclerView(全6行)＋TextView が ScrollView 内でスクロールする状態となりました。

[croakubi]

ありがとうございます！
androidx.core.widget.NestedScrollView を使用することで解決しました！

[jimbe]

良かったです。お疲れさまでした。