Android布局实现阴影效果

转载

程序_小时代 2022-02-23 15:20:50 博主文章分类：Android

最近某个模块的UI，设计想要卡片式阴影效果。之前查阅过资料，用传统的xml方式作为布局的background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 阴影图片，android:left表示阴影图片左边到背景图片左边的距离
    android:top表示阴影图片上边到背景图片上边的距离-->
    <item   android:left="5dp"
        android:top="5dp">
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="#60000000"/>
        </shape>
    </item>
    <!-- 背景图片，android:right表示阴影图片右边到背景图片右边的距离
    android:bottom表示阴影图片下边到背景图片下边的距离-->
    <item   android:bottom="5dp"
        android:right="5dp">
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="#000000"/>
        </shape>
    </item>
</layer-list>

　　但是这样有一个缺陷，细看就会发现这个阴影是实边的，没有虚化的效果，影响用户体验，非设计师想要的UI效果。

所以换第二种方法，改用MaterialDesign设计理念的CardView实现。CardView继承至FrameLayout类，是support-v7包下的一个类，使用时必须引入cardview依赖包。

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/v_margin_top"
app:cardCornerRadius="4dp"
app:cardElevation="3dp"
app:cardUseCompatPadding="true"><br>   <---你的布局---><br><br></android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_below="@+id/v_margin_top"
   app:cardCornerRadius="4dp"
   app:cardElevation="3dp"
   app:cardUseCompatPadding="true">

　以下是CardView的一些常用属性：

> 1、android:cardCornerRadius 在xml文件中设置card圆角的大小 

> 2、CardView.setRadius在代码中设置card圆角的大小 

> 3、android:cardBackgroundColor 在xml文件中设置card背景颜色

> 4、card_view:cardElevation在xml文件中设置阴影的大小 

> 5、card_view:cardMaxElevation 在xml文件中设置阴影最大高度

> 6、card_view:cardCornerRadius 在xml文件中设置卡片的圆角大小

> 7、card_view:contentPadding 在xml文件中设置卡片内容于边距的间隔

> 8、card_view:contentPaddingBottom 在xml文件中设置卡片内容于下边距的间隔

> 9、card_view:contentPaddingTop 在xml文件中设置卡片内容于上边距的间隔

> 10、card_view:contentPaddingLeft 在xml文件中设置卡片内容于左边距的间隔

> 11、card_view:contentPaddingRight 在xml文件中设置卡片内容于右边距的间隔

> 12、card_view:contentPaddingStart 在xml文件中设置卡片内容于边距的间隔起始

> 13、card_view:contentPaddingEnd 在xml文件中设置卡片内容于边距的间隔终止

> 14、card_view:cardUseCompatPadding 在xml文件中设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式

> 15、card_view:cardPreventCornerOverlap 在xml文件中设置内边距，在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠