zoukankan      html  css  js  c++  java
  • 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



  • 相关阅读:
    mac上python3安装HTMLTestRunner
    双目深度估计传统算法流程及OpenCV的编译注意事项
    深度学习梯度反向传播出现Nan值的原因归类
    1394. Find Lucky Integer in an Array
    1399. Count Largest Group
    1200. Minimum Absolute Difference
    999. Available Captures for Rook
    509. Fibonacci Number
    1160. Find Words That Can Be Formed by Characters
    1122. Relative Sort Array
  • 原文地址:https://www.cnblogs.com/widgetbox/p/9366223.html
Copyright © 2011-2022 走看看