将两张相同的卡片与约束布局对齐

Question

我试图让两张卡片成为相同的正方形，水平对齐，每边留出 8dp 边距。

像这样：

我试过使用约束布局并将卡片的比例设置为 1:1，卡片对齐并且是正方形，但它们小得离谱，与整个布局不匹配。

这是我的布局：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background"
    android:orientation="vertical">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="@color/background">

        <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/card1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            card_view:cardBackgroundColor="@color/cards"
            card_view:cardCornerRadius="2dp"
            card_view:cardElevation="2dp"
            card_view:layout_constraintDimensionRatio="1:1"
            card_view:layout_constraintHorizontal_chainStyle="spread_inside"
            card_view:layout_constraintHorizontal_weight="2"
            card_view:layout_constraintLeft_toLeftOf="parent"
            card_view:layout_constraintRight_toLeftOf="@id/card2"
            card_view:layout_constraintTop_toTopOf="parent">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Hey"
                android:textColor="#FFFFFF" />

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

        <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/card2"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp"
            card_view:cardBackgroundColor="@color/cards"
            card_view:cardCornerRadius="2dp"
            card_view:cardElevation="2dp"
            card_view:layout_constraintDimensionRatio="1:1"
            card_view:layout_constraintHorizontal_chainStyle="spread_inside"
            card_view:layout_constraintHorizontal_weight="2"
            card_view:layout_constraintLeft_toRightOf="@+id/card1"
            card_view:layout_constraintRight_toRightOf="parent"
            card_view:layout_constraintTop_toTopOf="parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Hey"
                android:textColor="#FFFFFF" />

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

    </android.support.constraint.ConstraintLayout>

</LinearLayout>

这是我得到的：

我现在对约束布局很迷茫，所以我该怎么办，我做错了什么？

谢谢。

Answer 1

当您希望约束定义视图的维度时，您必须将该维度设置为 0dp。因此，您应该将两个 CardView 上的两个 android:layout_width="wrap_content" 属性替换为 android:layout_width="0dp"。

接下来，您要确保卡片展开以填满所有可用的 space。所以你应该从两张卡中删除这两个属性：

card_view:layout_constraintHorizontal_chainStyle="spread_inside"
card_view:layout_constraintHorizontal_weight="2"

从那里开始，只需调整边距，直到卡片看起来像您想要的那样。请注意，边距对链的应用有点奇怪（视图可以将边距沿链传递），因此您可能只想在第一张卡片上放置 left/right 边距，而您应该在两张卡片上放置 top/bottom 边距（由于它是水平链，因此水平边距为 "shared").

Answer 2

你好@Mpk605 尝试将两个卡片视图的宽度设置为 0dp.Now 因为它们是 wrap_content 卡片视图环绕文本所以它看起来很小。它会随着文本变大而放大（你可以试试）。将宽度设置为 0dp 等于将其设置为 match_parent。因此它将填充所有匹配指定约束后可用的space。

将两张相同的卡片与约束布局对齐

Align two identical cards with constraint layout

xml

android

android-constraintlayout