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

问题描述

我将 RecyclerView 定义为网格，方法是使用 GridLayoutManger 设置它的布局，其跨度数为3已经正常工作。我还将一个项目装饰器添加到我的回收器视图中，该视图将管理网格物品之间的间距，这也可以正常工作。

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?

推荐答案

确保等宽/高的一种方法是使用自定义视图来计算高度根据它的宽度调用 onMeasure（）。这样做的好处是，除了创建自定义视图之外，不需要编码。

One way you can ensure equal width/height is to use a custom view which calculates the height based on its width when onMeasure() is called. The neat thing with this is that other than creating the custom view, there's no coding involved.

这是一个自定义视图，它扩展了 LinearLayout $ b

Here's a custom view extending 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);
    }

}

这是网格的改变版本item layout，使用上面的自定义 LinearLayout ：

Here's an altered version of your grid item layout, using the above custom 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>

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