zoukankan      html  css  js  c++  java
  • android shape实现阴影或模糊边效果

    android实现阴影的方式有很多,

    1.   Android 在 API21(5.0)添加了 elevation,可以很方便的在 View 上实现阴影。但是这个只在 >= API21 的手机上可以看到阴影效果,低于这个版本的就没有阴影效果。

    2.  CardView 也可以实现阴影效果,项目中一般都是使用这种方式实现卡片式的效果并带有阴影。使用 CardView 确实很不错,但是它在使用的时候也是需要有注意的地方:

     (1) CardView 实现阴影效果的布局,在 >= API 21 的版本上和 < 21 的版本上,如果不在代码上做好控制,他们的显示差异还是很大的。(2) CardView 在 >= API21 的版本上实现阴影效果也是通过 elevation 来实现的,最终的渲染是调用 native 方法进行的。在使用过程中发现在不同位置的 View 阴影的方向是不一样的。不知道你们发现没,它模拟的场景就是 光源的位置在屏幕中心的正上方,然后 View 的位置由光源的位置决定。阴影方向不一致。

    3. 通过 .9 图来制作阴影,这里通过一个很好的工具来制作哈:http://inloop.github.io/shadow4android/,这种方式制作小的背景阴影很模糊,效果上比不过 shape。

    4. 用 SCardView 来实现阴影,使用方式和 CardView一样,但是它是使用一套代码,显示不会有差异,而且可以通过设置光源的位置来控制阴影的方向以及阴影的颜色。

    compile 'io.github.meetsl:SCardView:1.0'

    5. 通过shape来实现,具体是通过layer-list 多层叠放的方式实现的。

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     3     <!-- 边 -->
     4     <item>
     5         <shape android:shape="rectangle">
     6             <padding
     7                 android:bottom="2dp"
     8                 android:left="2dp"
     9                 android:right="2dp"
    10                 android:top="2dp" />
    11             <solid android:color="#00CCCCCC" />
    12             <corners android:radius="8dp" />
    13         </shape>
    14     </item>
    15     <item>
    16         <shape android:shape="rectangle">
    17             <padding
    18                 android:bottom="2dp"
    19                 android:left="2dp"
    20                 android:right="2dp"
    21                 android:top="2dp" />
    22             <solid android:color="#10CCCCCC" />
    23             <corners android:radius="8dp" />
    24         </shape>
    25     </item>
    26     <item>
    27         <shape android:shape="rectangle">
    28             <padding
    29                 android:bottom="2dp"
    30                 android:left="2dp"
    31                 android:right="2dp"
    32                 android:top="2dp" />
    33             <solid android:color="#20CCCCCC" />
    34             <corners android:radius="8dp" />
    35         </shape>
    36     </item>
    37     <item>
    38         <shape android:shape="rectangle">
    39             <padding
    40                 android:bottom="2dp"
    41                 android:left="2dp"
    42                 android:right="2dp"
    43                 android:top="2dp" />
    44             <solid android:color="#30CCCCCC" />
    45             <corners android:radius="8dp" />
    46         </shape>
    47     </item>
    48     <item>
    49         <shape android:shape="rectangle">
    50             <padding
    51                 android:bottom="2dp"
    52                 android:left="2dp"
    53                 android:right="2dp"
    54                 android:top="2dp" />
    55             <solid android:color="#50CCCCCC" />
    56             <corners android:radius="8dp" />
    57         </shape>
    58     </item>
    59 
    60     <!-- 中心背景 -->
    61     <item>
    62         <shape android:shape="rectangle"
    63             android:useLevel="false">
    64             <!-- 实心 -->
    65             <solid android:color="#ffffff" />
    66             <corners android:radius="10dp" />
    67             <padding android:left="10dp"
    68                 android:right="10dp"
    69                 android:top="10dp"
    70                 android:bottom="10dp"/>
    71         </shape>
    72     </item>
    73 </layer-list>

    使用

    1 android:background="@drawable/layer_white_bg"


    各种方式的差异
    方式 是否有显示差异 是否可以控制阴影方向 是否可以设置阴影颜色 阴影是否占位 是否模糊 绘制效率 其他
    elevation 不可控制 不可设置 不占位 高,通过 native 绘制 只在 API 21 生效
    CardView 不可控制 不可设置 不占位 Api 21 上效率高,通过native 绘制  
    shape 可控 可设置 占位 一般  
    .9 图 可控,生效一次,更改需重新生成  可设置,更改需重新生成 占位 模糊 慢(加载图片显示)  
    SCardView 可控 可设置 不占位 一般  
     
  • 相关阅读:
    Metronic最优秀的基于Bootstrap的响应式网站模版
    SMINT:单页网站的免費jQuery插件
    不做全栈开发工程师
    《劲道》课程笔记——教练对话
    windows 7环境下配置oracle 11g 客户端
    jsp+servlet+javabean (MVC)分页
    解析java中 hashcode()
    BeanUtils操作
    Dom4jApp.java 解析和创建XML
    dom4j
  • 原文地址:https://www.cnblogs.com/linghu-java/p/10837421.html
Copyright © 2011-2022 走看看