RecyclerView 的 ItemDecoration 破坏了使用 ConstraintLayout 构建的项目布局 [英] RecyclerView’s ItemDecoration breaks items layout built with ConstraintLayout

问题描述

我正在尝试构建这种布局 - 只有两列网格，图像下方有图像和文本.

I’m trying to build this layout - just two columns grid with images and text below images.

我想使用 RecyclerView、GridLayoutManager 和 ItemDecoration 来构建项目之间的间距.这就是我得到的结果，你可以看到右图下方的文字被移到了底部.

I want to build this using RecyclerView, GridLayoutManager and ItemDecoration for spacing between items. 

Here’s what I get as a result, as you can see text below right images is shifted to the bottom.

主活动

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);

        GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
        recyclerView.setLayoutManager(layoutManager);

        recyclerView.addItemDecoration(new SpacesItemDecoration());

        Adapter adapter = new Adapter();
        recyclerView.setAdapter(adapter);
    }
}

SpacesItemDecoration

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

    @Override
    public void getItemOffsets(Rect outRect, View view,
                               RecyclerView parent, RecyclerView.State state) {
        outRect.bottom = 20;

        if (parent.getChildLayoutPosition(view) % 2 == 0) {
            outRect.right = 20;
        } else {
            outRect.right = 0;
        }
    }
}

item.xml

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#DDDDDD"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="h,4:5"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/text_view"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:textStyle="bold"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@+id/image_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

您还可以从 GitHub

推荐答案

从您发布的屏幕截图来看，右侧的图像似乎比左侧的图像大，这就是将文本向下推的原因对.这可能是由 SpacesItemDecoration 定义插图的方式引起的.尝试更改左/右插图以平衡视图.

From the screen shot you posted, it looks like the images on the right are larger than the images on the left and that is what pushes the text down on the right. This may be caused by how SpacesItemDecoration defines the insets. Try changing the left/right insets to balance the views out.

SpacesItemDecoration

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

    @Override
    public void getItemOffsets(Rect outRect, View view,
                               RecyclerView parent, RecyclerView.State state) {
        outRect.bottom = 20;

        if (parent.getChildLayoutPosition(view) % 2 == 0) {
            outRect.right = 10; // Pad on the right for left-hand side
        } else {
            outRect.left = 10; // Pad on the left for right-hand side
        }
    }
}

这篇关于RecyclerView 的 ItemDecoration 破坏了使用 ConstraintLayout 构建的项目布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！