Recyclerview Grid 布局项目剪切问题

Posted 2023-04-19

【中文标题】Recyclerview Grid 布局项目剪切问题

【英文标题】：Recyclerview Grid layout item cut issue

【发布时间】：2020-11-11 14:36:48

【问题描述】：

我想在 recyclerView 中显示具有 2 列网格布局的列表。但是当我应用项目装饰类时，项目会从右侧切割。请检查下面的屏幕截图和相同的代码。如果有人对此有任何想法，请告诉我。

行文件 xml：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="viewModel"
            type="com.sg.gbb.ui.tourplantcollection.viewmodel.PlantCollectionAdapterViewModel" />
    </data>

    <LinearLayout
        android:layout_
        android:layout_>

        <androidx.cardview.widget.CardView
            android:layout_
            android:layout_
            app:cardCornerRadius="8dp"
            app:cardElevation="0dp">

            <LinearLayout
                android:layout_
                android:layout_
                android:background="@color/screen_bg"
                android:orientation="vertical">

                <ImageView
                    android:layout_
                    android:layout_
                    android:contentDescription="@string/gbb_app_name"
                    android:scaleType="fitXY"
                    android:src="@color/flower_bg" />

                <com.sg.gbb.ui.custom.GBBTextView
                    android:id="@+id/tvOrderOn"
                    android:layout_
                    android:layout_
                    android:layout_gravity="center_vertical"
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="11dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginBottom="16dp"
                    android:gravity="center"
                    android:text="@viewModel.code"
                    android:textColor="@color/greyishBrown"
                    android:textSize="15sp"
                    app:customFont="@string/gardens_light" />

            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </LinearLayout>

</layout>

我的 recyclerView 文件：

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

        <variable
            name="viewModel"
            type="com.sg.gbb.ui.tourplantcollection.viewmodel.PlantCollectionViewModel" />
    </data>

    <RelativeLayout
        android:layout_
        android:layout_
        android:background="@color/white"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:layout_
            android:layout_
            android:background="@color/black_80_opacity"
            android:contentDescription="@string/gbb_app_name" />

        <LinearLayout
            android:layout_
            android:layout_
            android:layout_marginTop="100dp"
            android:background="@drawable/bg_edit_profile"
            android:orientation="vertical">

            <LinearLayout
                android:layout_
                android:layout_
                android:layout_weight="1"
                android:orientation="vertical">

                <com.sg.gbb.ui.custom.GBBTextView
                    android:id="@+id/titleTextview"
                    android:layout_
                    android:layout_
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="20dp"
                    android:layout_marginBottom="20dp"
                    android:text="@string/plant_collection_text"
                    android:textColor="@color/greyishBrown"
                    android:textSize="15sp"
                    app:customFont="@string/gardens_bold" />

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/plantCollectionRV"
                    android:layout_
                    android:layout_
                    android:overScrollMode="never"
                    android:gravity="center"
                    android:scrollbars="none"
                    app:adapter="@viewModel.plantList"
                    app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
                    app:spanCount="2"
                    tools:listitem="@layout/item_plant_collection" />

            </LinearLayout>

            <View
                android:layout_
                android:layout_
                android:background="@color/divider" />

            <com.sg.gbb.ui.custom.GBBButton
                android:id="@+id/cancelButton"
                style="?android:attr/borderlessButtonStyle"
                android:layout_
                android:layout_
                android:layout_marginStart="16dp"
                android:layout_marginTop="26dp"
                android:layout_marginEnd="16dp"
                android:layout_marginBottom="16dp"
                android:background="@drawable/bg_dismiss_button"
                android:onClick="@() -> viewModel.onBackClicked()"
                android:paddingStart="16dp"
                android:paddingTop="12dp"
                android:paddingEnd="16dp"
                android:paddingBottom="12dp"
                android:text="@string/back"
                android:textAllCaps="true"
                android:textColor="@color/done_text"
                android:textSize="@dimen/_12ssp"
                app:buttonFont="@string/gardens_bold" />

        </LinearLayout>

    </RelativeLayout>

</layout>

物品装饰文件：

import android.graphics.Rect;
import android.view.View;

import androidx.recyclerview.widget.RecyclerView;

/**
 * Created by Android Studio
 * User: Ailurus([e-mail])
 * Date: 2015-10-28
 * Time: 15:20
 */
public class EqualSpacingItemDecoration extends RecyclerView.ItemDecoration 

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

    public EqualSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge, int headerNum) 
        this.spanCount = spanCount;
        this.spacing = spacing;
        this.includeEdge = includeEdge;
        this.headerNum = headerNum;
    

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

        if (position >= 0) 
            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
                
            
         else 
            outRect.left = 0;
            outRect.right = 0;
            outRect.top = 0;
            outRect.bottom = 0;
        
    

【问题讨论】：

尝试从CardView 中删除修复layout_width 并使其成为match_parent。

@ADM 非常感谢！有效。您可以发布作为答案，我可以为未来的访问者接受它

【参考方案1】：

您修复了Card View 的layout_width

作为android:layout_width="164dp"

这就是问题，

您应该将其设置为match_parent 以获得灵活且未切割的布局，而不管显示器的大小。

【参考方案2】：

问题在于您的row.xml

尽量不要固定cardView的宽度

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="viewModel"
            type="com.sg.gbb.ui.tourplantcollection.viewmodel.PlantCollectionAdapterViewModel" />
    </data>

    <LinearLayout
        android:layout_
        android:layout_>

        <androidx.cardview.widget.CardView
            android:layout_
            android:layout_
            app:cardCornerRadius="8dp"
            app:cardElevation="0dp">

            <LinearLayout
                android:layout_
                android:layout_
                android:background="@color/screen_bg"
                android:orientation="vertical">

                <ImageView
                    android:layout_
                    android:layout_
                    android:contentDescription="@string/gbb_app_name"
                    android:scaleType="fitXY"
                    android:src="@color/flower_bg" />

                <com.sg.gbb.ui.custom.GBBTextView
                    android:id="@+id/tvOrderOn"
                    android:layout_
                    android:layout_
                    android:layout_gravity="center_vertical"
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="11dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginBottom="16dp"
                    android:gravity="center"
                    android:text="@viewModel.code"
                    android:textColor="@color/greyishBrown"
                    android:textSize="15sp"
                    app:customFont="@string/gardens_light" />

            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </LinearLayout>

</layout>