如何使约束布局居中并添加填充

Question

我使用 Recyclerview ，您可以看到它的左对齐并且有 no margin before the first card ，并且在最后一张卡片（last card button not shown）之前没有底部边距，我该如何解决？我在卡上添加了填充，但它对我不起作用 我还在约束布局上添加了边距，但第一张卡片总是卡在顶部。

XML 代码

<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="wrap_content"
android:layout_height="wrap_content"
android:background="@color/design_default_color_surface"
app:layout_constraintHeight_max="wrap"
app:layout_constraintWidth_max="wrap">

<com.google.android.material.card.MaterialCardView
    android:id="@+id/card"
    android:layout_width="270dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- Media -->

        <ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/iconfinder_artboard_1_1790655" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="title"
            android:textAppearance="?attr/textAppearanceHeadline6" />

        <TextView
            android:id="@+id/desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="secondary_text"
            android:textAppearance="?attr/textAppearanceBody2"
            android:textColor="?android:attr/textColorSecondary" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/readMore"
            style="?attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"

            android:text="Read More" />


    </LinearLayout>

</com.google.android.material.card.MaterialCardView>


</androidx.constraintlayout.widget.ConstraintLayout>

Recyclerview XML

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
tools:context=".AllBooksRecycler">

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler"
    android:layout_width="393dp"
    android:layout_height="717dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
   </androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

您不应该修复容器的最大高度和宽度，删除 app:layout_constraintHeight_max="wrap" 和 app:layout_constraintWidth_max="wrap" 试试这个

<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"
android:background="@color/design_default_color_surface">

<com.google.android.material.card.MaterialCardView
    android:id="@+id/card"
    android:layout_width="270dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- Media -->

        <ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/iconfinder_artboard_1_1790655" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="title"
            android:textAppearance="?attr/textAppearanceHeadline6" />

        <TextView
            android:id="@+id/desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="secondary_text"
            android:textAppearance="?attr/textAppearanceBody2"
            android:textColor="?android:attr/textColorSecondary" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/readMore"
            style="?attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"

            android:text="Read More" />


    </LinearLayout>

</com.google.android.material.card.MaterialCardView>


</androidx.constraintlayout.widget.ConstraintLayout>

对于顶部和底部的第一个和最后一个项目，您应该使用 ItemDecoration（这是 kotlin 代码）

class SpacingItemDecoration(context: Context) : RecyclerView.ItemDecoration() {
    // define your dimens you want in dimes.xml
    private val spacing = context.resources.getDimensionPixelSize(R.dimen.your_dimen)

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        val position = parent.getChildAdapterPosition(view)
        outRect.top = spacing
        if (position.inc() == parent.adapter!!.itemCount) {
            outRect.bottom = spacing
        }
    }
}

初始化时添加RecyclerView

recycler_view.addItemDecoration(SpacingItemDecoration(context))

Answer 2

在 RecyclerView 标记中，将 layout_width 和 layout_height 都设置为 match_parent，而不是对其进行硬编码。

从项目布局中删除这两行：

app:layout_constraintHeight_max="wrap"
app:layout_constraintWidth_max="wrap"