0

我已经构建了一个警报卡片视图，它会弹出以提示用户做出响应。我正在使用约束布局，并且视图在布局编辑器中看起来正确。我什至在编辑器中测试了多种屏幕尺寸，并且约束正常工作。但是当我在真实设备上运行它时，视图不遵循约束。

这是它在布局编辑器中的外观：

布局编辑器图像

这是它在真实设备上的显示方式：

真实设备图像

这是卡片视图的 XML 脚本：

<android.support.v7.widget.CardView
    android:id="@+id/phoneCardView"
    android:layout_width="wrap_content"
    android:layout_height="300dp"
    android:layout_marginBottom="27dp"
    android:layout_marginEnd="32dp"
    android:layout_marginStart="32dp"
    android:layout_marginTop="24dp"
    android:alpha="1"
    android:clipChildren="true"
    android:visibility="visible"
    app:cardBackgroundColor="#333333"
    app:cardCornerRadius="15dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clipChildren="true">

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="24dp"
            android:layout_marginStart="24dp"
            android:layout_marginTop="16dp"
            android:text="Your charger is just 3 clicks away!"
            android:textAlignment="center"
            android:textColor="#67bca2"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/errorMessage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:textColor="@android:color/holo_red_dark"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView5" />

        <EditText
            android:id="@+id/phoneNumber"
            android:layout_width="wrap_content"
            android:layout_height="44dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:background="@drawable/textfieldbackground"
            android:ems="10"
            android:hint="PHONE NUMBER"
            android:inputType="phone"
            android:textAlignment="center"
            android:textColorHint="#4d000000"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/errorMessage" />

        <EditText
            android:id="@+id/promoCode"
            android:layout_width="wrap_content"
            android:layout_height="44dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:background="@drawable/textfieldbackground"
            android:ems="10"
            android:hint="PROMO CODE"
            android:inputType="number"
            android:textAlignment="center"
            android:textColorHint="#4d000000"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/phoneNumber" />

        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="44dp"
            android:background="#4dffffff"
            android:onClick="registerClick"
            android:text="Register"
            android:textAlignment="center"
            android:textAllCaps="false"
            android:textColor="#67bca2"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/button3" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="44dp"
            android:background="#4dffffff"
            android:onClick="cancelClick"
            android:text="Cancel"
            android:textAlignment="center"
            android:textAllCaps="false"
            android:textColor="#67bca2"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/button4"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent" />

        <android.support.v7.widget.CardView
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:background="#333333"
            app:layout_constraintBottom_toBottomOf="@+id/button4"
            app:layout_constraintEnd_toStartOf="@+id/button4"
            app:layout_constraintTop_toTopOf="@+id/button4" />
    </android.support.constraint.ConstraintLayout>

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

我正在使用以下相关依赖项：

'com.android.support:cardview-v7:25.4.0'
'com.android.support.constraint:constraint-layout:1.0.2'
4

1 回答 1

2

您的两个问题（底部的按钮没有被卡夹住，按钮之间的分隔线看起来太大）都是由CardView. 从文档中：

由于圆角裁剪的昂贵性质，在 Lollipop 之前的平台上，CardView 不会裁剪与圆角相交的子项。相反，它添加了填充以避免这种交叉

我已经在 API 16 模拟器上运行了您的代码，并且发现您遇到了同样的问题。

您可以尝试将此属性添加到您的顶级<CardView>标签：

app:cardPreventCornerOverlap="false"

尽管这不一定是万能的。

至于固定按钮之间的分隔线，您使用<CardView>分隔线的标签是否有原因？我只是将其更改为<View>标签，它似乎运行良好：

<View
    android:layout_width="1dp"
    android:layout_height="0dp"
    android:background="#333333"
    app:layout_constraintBottom_toBottomOf="@+id/button4"
    app:layout_constraintEnd_toStartOf="@+id/button4"
    app:layout_constraintTop_toTopOf="@+id/button4"/>
于 2018-01-03T05:16:53.207 回答