在 ConstraintLayout 中居中 RecyclerView 项

Question

我的 RecyclerView 中显示了许多图像，但我不知道如何使它们居中。视图本身居中，但里面的图像不是。我将约束布局与许多其他小部件以及 RecyclerView 一起使用。这是我的代码：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="blah">

    <ImageView
        android:id="@+id/mainBackground"
        android:src="@color/accent_dark_red"
        android:layout_width="0dp"
        android:layout_height="300dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="contentDescription" />

    <ImageView
        android:id="@+id/mainBackgroundImage"
        android:background="@drawable/theatre"
        android:alpha="0.5"
        android:layout_width="0dp"
        android:layout_height="300dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/mainBackground"
        app:layout_constraintBottom_toBottomOf="@id/mainBackground"
        tools:ignore="contentDescription" />

    <ImageView
        android:id="@+id/divider"
        android:src="@color/accent_dark_red"
        android:layout_width="0dp"
        android:layout_height="3dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintTop_toBottomOf="@+id/mainBackground"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        tools:ignore = "ContentDescription"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp" />

    <ImageView
        android:id="@+id/moviesLabel"
        android:src="@drawable/rectangle"
        android:layout_width="200dp"
        android:layout_height="60dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="16dp"
        app:layout_constraintTop_toBottomOf="@+id/divider"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/movieTextInLabel"
        android:text="@string/movie_text_in_label"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        style="@style/wrap_content"
        app:layout_constraintLeft_toLeftOf="@+id/moviesLabel"
        app:layout_constraintRight_toRightOf="@id/moviesLabel"
        app:layout_constraintTop_toTopOf="@id/moviesLabel"
        app:layout_constraintBottom_toBottomOf="@id/moviesLabel" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:background="@color/accent_dark_red"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toBottomOf="@id/moviesLabel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/divider"
        app:layout_constraintRight_toRightOf="@id/divider">

    </android.support.v7.widget.RecyclerView>

    <TextView
        android:id="@+id/tv_error_message_display"
        android:padding="16dp"
        android:text="@string/error_message"
        android:textSize="20sp"
        android:layout_gravity="center_horizontal"
        android:visibility="invisible"
        style="@style/wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <ProgressBar
        android:id="@+id/pb_loading_indicator"
        android:layout_height="48dp"
        android:layout_width="48dp"
        android:layout_gravity="center"
        android:visibility="invisible"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

下面是图片的样子：

Answer 1

RecyclerView 使用的列表项的布局是什么？ 要将图像居中（每行一个），列表项布局必须是 ConstraintLayout，并且其中的 ImageView 将左右约束设置为父级。

Answer 2

RecyclerView 放置在什么布局上并不重要，但重要的是 RecyclerView 中的项目使用什么布局。很明显，您应该为 RecyclerView 使用 GridLayoutManager，并且您应该使用自定义 ItemDecoration 来设置项目之间的间距。

项目布局

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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:textStyle="bold"
        android:gravity="center"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        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>

回收站视图初始化

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

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

recyclerView.addItemDecoration(new SpacesItemDecoration());

物品装饰

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

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

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

因此所有项目都在 RecyclerView 中居中：

编辑 2017 年 10 月 16 日下午 4:32

在 SpacesItemDecoration 中使用 context.getResources().getDimensionPixelSize(spacingDimen) 代替硬编码的像素值，您可以找到更多详细信息 Android Recyclerview GridLayoutManager column spacing