在真实设备上运行会在布局编辑器中显示不同的UI

Question

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

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

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

以下是卡片视图的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'

Answer 1

您的两个问题（底部的按钮未被卡片剪切，按钮之间的分隔符显得过大）是由CardView内置的特定于平台版本的行为引起的。来自the documentation：

由于圆角切割的昂贵性质，在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"/>