运行 在真实设备上显示与在布局编辑器中不同的 UI
Running on real device shows different UI then in layout editor
我构建了一个弹出的警告卡片视图以提示用户响应。我正在使用约束布局，视图在布局编辑器中看起来是正确的。我什至在编辑器中测试了多种屏幕尺寸，并且约束正常工作。但是当我在真实设备上 运行 时，视图不遵循约束。
这是它在布局编辑器中的样子：
这是它在真实设备上的显示方式：
这是卡片视图的 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'
您的两个问题（底部的按钮未被卡剪裁以及按钮之间的分隔线显得太大）都是由 CardView 中内置的特定于平台版本的行为引起的。来自 the documentation:
Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners. Instead, it adds padding to avoid such intersection
我在 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"/>
我构建了一个弹出的警告卡片视图以提示用户响应。我正在使用约束布局，视图在布局编辑器中看起来是正确的。我什至在编辑器中测试了多种屏幕尺寸，并且约束正常工作。但是当我在真实设备上 运行 时，视图不遵循约束。
这是它在布局编辑器中的样子：
这是它在真实设备上的显示方式：
这是卡片视图的 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'
您的两个问题（底部的按钮未被卡剪裁以及按钮之间的分隔线显得太大）都是由 CardView 中内置的特定于平台版本的行为引起的。来自 the documentation:
Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners. Instead, it adds padding to avoid such intersection
我在 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"/>