问题描述
使用卡片视图后,我意识到盒子阴影没有圆滑并且在电话屏幕上看起来很糟糕,下面是使用的示例代码以及阴影的屏幕截图,我添加了更多阴影来强调,因此您可以清楚地看到看到当盒子变圆时,阴影的边缘是矩形的。
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="@drawable/card"
android:elevation="5dp"
app:cardCornerRadius="5dp"
app:contentPaddingTop="8dp"
app:contentPaddingBottom="8dp"
app:contentPaddingLeft="@dimen/sideSpace"
app:contentPaddingRight="@dimen/sideSpace"
app:cardElevation="12dp">...
如何解决?
解决方法
You can use this drawable as a background of any view for shadow
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="0.5dp" android:right="0.5dp" android:bottom="1dp" android:left="0.5dp" />
<solid android:color="#10CCCCCC" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0.5dp" android:right="0dp" android:bottom="1dp" android:left="0.5dp" />
<solid android:color="#10CCCCCC" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<solid android:color="#30CCCCCC" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<solid android:color="#40CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<solid android:color="#50CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0.1dp" android:bottom="0.5dp" android:left="0.1dp" />
<solid android:color="#60CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#ffffff" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
,
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/dimen_10dp"
android:divider="@android:color/transparent"
android:dividerHeight="0.0px"
android:clipToPadding="false"
android:clipChildren="false"
app:cardElevation="10dp"
app:cardPreventCornerOverlap="false"
android:elevation="@dimen/dimen_20dp"
app:cardCornerRadius="@dimen/dimen_15dp"
>
应该有一个孩子也要有拐角半径。
,这是你想要的吗?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_centerInParent="true"
android:layout_marginTop="100dp"
xmlns:tools="http://schemas.android.com/tools"
>
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:elevation="0dp"
android:background="@drawable/round"
app:cardCornerRadius="100dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:contentPaddingTop="8dp"
app:contentPaddingBottom="8dp"
app:cardElevation="12dp">
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginBottom="8dp"
android:elevation="5dp"
app:cardCornerRadius="5dp"
app:contentPaddingTop="8dp"
app:contentPaddingBottom="8dp"
app:cardElevation="12dp"
android:background="@drawable/round2">
</com.google.android.material.card.MaterialCardView>
</RelativeLayout>
round.xml:-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<solid android:color="#80000000"/>
<corners android:radius="30dp"/>
</shape>
round2.xml:-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<solid android:color="@color/colorAccent"/>
<corners android:radius="20dp"/>
</shape>
输出:-