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

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>

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))