如何使 RecyclerView 的网格项具有相等的高度和宽度? [英] How to make RecyclerView's grid item to have equal height and width?

问题描述

我通过使用跨度计数为 3 的 GridLayoutManger 设置其布局，将我的 RecyclerView 定义为网格，这已经可以正常工作了.我还在我的回收站视图中添加了一个项目装饰器，它将管理网格项目之间的间距，这也可以正常工作.

I define my RecyclerView as grid by setting its layout with GridLayoutManger that has a span count of 3 which are already working fine. I also add an item decorator to my recycler view which will manage the spacing between grid items, this also works fine.

public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {

    private int spanCount;
    private int spacing;
    private boolean includeEdge;

    public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) {
        this.spanCount = spanCount;
        this.spacing = spacing;
        this.includeEdge = includeEdge;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildAdapterPosition(view); // item position
        int column = position % spanCount; // item column

        if (includeEdge) {
            outRect.left = spacing - column * spacing / spanCount; // spacing - column * ((1f / spanCount) * spacing)
            outRect.right = (column + 1) * spacing / spanCount; // (column + 1) * ((1f / spanCount) * spacing)

            if (position < spanCount) { // top edge
                outRect.top = spacing;
            }
            outRect.bottom = spacing; // item bottom
        } else {
            outRect.left = column * spacing / spanCount; // column * ((1f / spanCount) * spacing)
            outRect.right = spacing - (column + 1) * spacing / spanCount; // spacing - (column + 1) * ((1f /    spanCount) * spacing)
            if (position >= spanCount) {
                outRect.top = spacing; // item top
            }
        }
    }
}

我为我的回收站视图添加项目装饰的实现:

My implementation for adding item decoration to my Recycler View:

mBuddiesGrid = (RecyclerView) findViewById(R.id.buddies_grid);
        mLayoutManager = new GridLayoutManager(getApplicationContext(), 3);
        mBuddiesGrid.addItemDecoration(new GridSpacingItemDecoration(3, (int) dpToPx(10) , true));
        mBuddiesAdapter = new BuddiesGridAdapter(getApplicationContext(), new Buddies());
        mBuddiesGrid.setLayoutManager(mLayoutManager);

我的网格项目 xml 布局:

My grid item xml layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:layout_weight="1"
        android:cropToPadding="false"
        android:id="@+id/profile_picture"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:text="Theodore"
        android:includeFontPadding="false"
        android:textColor="@android:color/black"
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

通过在网格项之间添加空格将调整网格项的宽度，这可能会导致无法获得我的项目视图的比例大小.我想要获得的是动态调整我的网格项高度等于它的宽度.我该怎么做?

By adding spaces between grid item will adjust the grid item's width which can possibly cause of not getting the proportion size of my item view. What I want to obtain is to resize my grid item height equal to its width dynamically. How can I do it?

推荐答案

我已经使用 ConstraintLayout 完成了这个:

I've done this using ConstraintLayout:

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        tools:src="@drawable/ic_chat_bubble_black_24dp"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

这篇关于如何使 RecyclerView 的网格项具有相等的高度和宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！