如何使RecyclerView的网格项具有相等的高度和宽度？

Question

如何使RecyclerView的网格项具有相等的高度和宽度？

22

我使用GridLayoutManger将我的RecyclerView定义为一个网格，它的span count为3，已经正常工作。我还添加了一个项装饰器到我的recycler view中，这将管理网格项之间的间距，这也运行良好。

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

我对我的RecyclerView添加item decoration的实现方式：

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布局：

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

通过在网格项之间添加空格将调整网格项的宽度，这可能会导致我的项目视图未能获得比例大小。我想要实现的是动态将网格项高度调整为其宽度相等。我该怎么做？

- Earwin delos Santos

我已经复制了你的 GridSpacingItemDecoration，它运行得非常好！ - Albert Vila Calvo

3个回答

16

你可以通过使用自定义视图来确保宽度/高度相等，该视图在调用onMeasure()时基于其宽度计算高度。这样做的好处是除了创建自定义视图外，不需要编写其他代码。

下面是一个扩展了LinearLayout的自定义视图的示例：

public class SquareLayout extends LinearLayout {

    public SquareLayout(Context context) {
        super(context);
    }

    public SquareLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int width, int height) {
        // note we are applying the width value as the height
        super.onMeasure(width, width);
    }

}

这是使用上述自定义 LinearLayout 改变了您的网格项布局的版本:

<com.yourpackage.name.views.SquareLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

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

</com.yourpackage.name.views.SquareLayout>

- mjp66

-1

您可以在Recycler View Holder的"onBindViewHolder"函数中编写代码。在此函数中，您可以获取Recycler View的视图树观察器，并更改Recycler项视图的宽度或（和）高度。

- Sahil Gupta

使用TreeObserver是最后的手段和非常hackish的解决方案，使用修改后的自定义布局更加清晰。此外，基于监听布局树来修改布局可能会导致多次布局传递。 - Christoph Henkelmann

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Albert Vila Calvo · Accepted Answer

我使用了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>