• 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">
    <---你的布局--->

    </android.support.v7.widget.CardView>

     以下是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和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠
     

      需要注意的是cardElevation设置好阴影后相当于为布局上下左右增加了margin,所以写一些列表式布局时要注意修改列表间距。

       By  LiYing



  • 相关阅读:
    python3安装 MAC
    MacOS三个比较接地气实用的终端命令
    maya界面字体怎么设置大小?
    Mac 下 Android Studio 连 夜神模拟器 调试以及真机调试方法
    [macOS] Mojave10.14 夜神安卓模拟器启动问题
    解决MAC电脑系统设置的安全性与隐私下通用没有任何来源选项
    一个分析“文件夹”选择框实现方法的过程
    windows下nginx+php简单配置
    使用windbg抓取崩溃文件和分析的过程
    解决工作中遇到的一个"打开,保存"文件框的bug的过程
  • 原文地址:https://www.cnblogs.com/widgetbox/p/9366223.html
Copyright © 2020-2023  润新知