卡片视图在 5.1.1 平板电脑和 5.0.2 移动设备中不正确
Card View not proper in 5.1.1 Tablet and 5.0.2 Mobile Device
我正在使用 CardView
创建以下视图。
在 gradle 依赖项
[= 中添加依赖项 compile 'com.android.support:cardview-v7:23.0.+'
26=]
下面是相同的 xml 文件。
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardViewEmp"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="0.50"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
android:padding="@dimen/margin_10"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/employeeIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_5"
android:src="@drawable/employeeicon"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Employee"
android:layout_centerHorizontal="true"
android:layout_below="@+id/employeeIcon"
android:textSize="@dimen/textSizeNormal"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardViewVehicle"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="0.50"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
android:padding="@dimen/margin_10"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/vehicleIconLive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_5"
android:src="@drawable/vehicleicon"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vehicle"
android:layout_centerHorizontal="true"
android:layout_below="@+id/vehicleIconLive"
android:textSize="@dimen/textSizeNormal"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
现在 4.4.4 移动版中视图的高度和外观如下所示,看起来不错!
但是在 5.1.1 Nexus Tablet 和 5.0.2 Mobile 中看起来很奇怪,如下所示。
我通过这个添加了高程和角半径
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
- 任何人都可以清楚地看到拐角半径在没有适当仰角的情况下看起来很奇怪。
- 可能是什么问题。
- 如何使 CardView 具有正确的外观和感觉
编辑 1:
尝试使用 com.android.support:cardview-v7:23.1.1
,但输出再次相同。
尝试从卡片视图中删除:android:padding 属性。
来自文档:
Since padding is used to offset content for shadows, you cannot set
padding on CardView. Instead, you can use content padding attributes
in XML or setContentPadding(int, int, int, int) in code to set the
padding between the edges of the Card and children of CardView.
还有这个:
Note that, if you specify exact dimensions for the CardView, because
of the shadows, its content area will be different between platforms
before L and after L. By using api version specific resource values,
you can avoid these changes. Alternatively, If you want CardView to
add inner padding on platforms L and after as well, you can set
setUseCompatPadding(boolean) to true.
终于找到问题了。这是由于我写的外部 LinearLayout
使图标位于屏幕中央,其高度为 wrap_content
。我避免了 LinearLayout
并通过以下代码,使卡片视图具有适当的高程曲线并位于中间 .
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mainRL"
>
<android.support.v4.widget.Space
android:layout_width="@dimen/margin_10"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:id="@+id/spaceCenter"
/>
<!-- Employee icon -->
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardViewEmp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
android:layout_toLeftOf="@+id/spaceCenter"
android:layout_centerInParent="true"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/employeeIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_5"
android:src="@drawable/employeeicon"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Employee "
android:layout_centerHorizontal="true"
android:layout_below="@+id/employeeIcon"
android:textSize="@dimen/textSizeNormal"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<!-- Vehicle icon -->
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardViewVehicle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
android:layout_toRightOf="@+id/spaceCenter"
android:layout_centerInParent="true"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/vehicleIconLive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_5"
android:src="@drawable/vehicleicon"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Vehicle "
android:layout_centerHorizontal="true"
android:layout_below="@+id/vehicleIconLive"
android:textSize="@dimen/textSizeNormal"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
要使其兼容高于或低于 api 21,您需要在支持 CardView 中指定 app:cardUseCompatPadding="true"。
归功于 ShinCven
CardView elevation not working on Android 5.1.1
我正在使用 CardView
创建以下视图。
在 gradle 依赖项
[= 中添加依赖项 compile 'com.android.support:cardview-v7:23.0.+'
26=]
下面是相同的 xml 文件。
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardViewEmp"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="0.50"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
android:padding="@dimen/margin_10"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/employeeIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_5"
android:src="@drawable/employeeicon"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Employee"
android:layout_centerHorizontal="true"
android:layout_below="@+id/employeeIcon"
android:textSize="@dimen/textSizeNormal"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardViewVehicle"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="0.50"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
android:padding="@dimen/margin_10"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/vehicleIconLive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_5"
android:src="@drawable/vehicleicon"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vehicle"
android:layout_centerHorizontal="true"
android:layout_below="@+id/vehicleIconLive"
android:textSize="@dimen/textSizeNormal"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
现在 4.4.4 移动版中视图的高度和外观如下所示,看起来不错!
但是在 5.1.1 Nexus Tablet 和 5.0.2 Mobile 中看起来很奇怪,如下所示。
我通过这个添加了高程和角半径
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
- 任何人都可以清楚地看到拐角半径在没有适当仰角的情况下看起来很奇怪。
- 可能是什么问题。
- 如何使 CardView 具有正确的外观和感觉
编辑 1:
尝试使用 com.android.support:cardview-v7:23.1.1
,但输出再次相同。
尝试从卡片视图中删除:android:padding 属性。
来自文档:
Since padding is used to offset content for shadows, you cannot set padding on CardView. Instead, you can use content padding attributes in XML or setContentPadding(int, int, int, int) in code to set the padding between the edges of the Card and children of CardView.
还有这个:
Note that, if you specify exact dimensions for the CardView, because of the shadows, its content area will be different between platforms before L and after L. By using api version specific resource values, you can avoid these changes. Alternatively, If you want CardView to add inner padding on platforms L and after as well, you can set setUseCompatPadding(boolean) to true.
终于找到问题了。这是由于我写的外部 LinearLayout
使图标位于屏幕中央,其高度为 wrap_content
。我避免了 LinearLayout
并通过以下代码,使卡片视图具有适当的高程曲线并位于中间 .
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mainRL"
>
<android.support.v4.widget.Space
android:layout_width="@dimen/margin_10"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:id="@+id/spaceCenter"
/>
<!-- Employee icon -->
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardViewEmp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
android:layout_toLeftOf="@+id/spaceCenter"
android:layout_centerInParent="true"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/employeeIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_5"
android:src="@drawable/employeeicon"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Employee "
android:layout_centerHorizontal="true"
android:layout_below="@+id/employeeIcon"
android:textSize="@dimen/textSizeNormal"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<!-- Vehicle icon -->
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardViewVehicle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"
android:layout_toRightOf="@+id/spaceCenter"
android:layout_centerInParent="true"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/vehicleIconLive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_5"
android:src="@drawable/vehicleicon"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Vehicle "
android:layout_centerHorizontal="true"
android:layout_below="@+id/vehicleIconLive"
android:textSize="@dimen/textSizeNormal"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
要使其兼容高于或低于 api 21,您需要在支持 CardView 中指定 app:cardUseCompatPadding="true"。
归功于 ShinCven CardView elevation not working on Android 5.1.1