layer-list实现阴影效果

原创 2015年11月20日 16:21:50
  • 为控件实现阴影效果,可以有多种方式:

    • 多个drawable层叠在一起(不好的实现是多个View层叠达到多个drawable的层叠效果,相对好的实现是在同一个View钟实现多个drawable的层叠)
    • 自定义view
    • Material Design中设置Z轴的方式
  • 本文的思路是多个drawable叠在一起,但是不额外使用View,通过layer-list可以将多个item按照顺序层叠在一起显示。首先来看效果图:

LayerShadow

  • 第一个和第二个控件是用来展示layer-list实现阴影效果的基本款,而第三个控件是综合上述两个控件效果,再集合selector实现的。

  • 默认状态:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 阴影:左偏移2dp,上偏移4dp -->
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/holo_blue_dark" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- 前景::底偏移4dp,右偏移2dp -->
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <solid android:color="@android:color/holo_blue_bright" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>
  • 点击状态:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 为了达到点击的真实感,将原来默认状态的前景色设置为阴影,并将前景设为无透明-->
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/holo_blue_bright" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

layer-list的item可以通过以下属性设置偏移量:

  • android:top 顶部的偏移量
  • android:bottom 底部的偏移量
  • android:left 左边的偏移量
  • android:right 右边的偏移量
  • selector,使用上述layer-list:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/layer_list_btn_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/layer_list_btn_pressed" android:state_selected="true" />
    <item android:drawable="@drawable/layer_list_btn" />

</selector>
  • 最后再来看下,布局代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@drawable/layer_list_btn"
        android:clickable="true"
        android:gravity="center"
        android:text="默认状态" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:background="@drawable/layer_list_btn_pressed"
        android:clickable="true"
        android:gravity="center"
        android:text="点击状态" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:background="@drawable/selector_btn"
        android:clickable="true"
        android:gravity="center"
        android:text="点我" />
</LinearLayout>
  • 第一个和第二个TextView分别引用了对应的layer-list(默认和点击)作为背景,第三个引用了selector

  • 源码地址

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android中用layer-list编写阴影效果

要实现这种效果当然有多 种方式,比如背景图片直接加阴影效果,或者用代码画一个(onDraw())。这次我们直接用layer-list来实现。在项目 res->drawable中创建一个xml,如果列表...
  • a1031359915
  • a1031359915
  • 2014年11月12日 18:53
  • 22839

使用layer-list实现阴影效果

在drawable下新建background.xml,内容如下
  • a62321780
  • a62321780
  • 2016年05月27日 22:31
  • 1598

Android中用layer-list编写阴影效果

应项目需求,需要为ListView中的每个item设置一点阴影效果,参考官方API文档发现可以用layer-list这个东西实现图层覆盖,经试验发现可以实现阴影效果,特此记录下来,供以后再次学习。 ...
  • Iceshow0428
  • Iceshow0428
  • 2013年08月14日 14:19
  • 5120

添加阴影布局效果(使用layer-list)实现

要实现这种效果当然有多 种方式,比如背景图片直接加阴影效果,或者用代码画一个(onDraw())。这次我们直接用layer-list来实现。 在项目 res->drawable中创建一个xml,如果...
  • zhourui_1021
  • zhourui_1021
  • 2017年05月05日 14:24
  • 321

Android layer-list的属性和使用详解(阴影、边框效果)

layer-list用于多个图层堆叠,可以完成阴影效果
  • hello_1s
  • hello_1s
  • 2016年09月09日 10:23
  • 2896

如何使用layer-list做出阴影效果

在drawable下新建xml文件                                                                ...
  • woshimiaoxingren
  • woshimiaoxingren
  • 2016年06月06日 14:40
  • 244

iOS CoreAnimation (六) layer属性:阴影相关,边框、圆角,masksToBounds

嗯,圆和椭圆还不错,但如果是带圆角的矩形呢?我们现在能做到那样了么? -------Steve Jobs...
  • m0_38076563
  • m0_38076563
  • 2017年06月08日 11:33
  • 256

IOS Layer的使用(阴影)

CALayer(层)是屏幕上的一个矩形区域,在每一个UIView中都包含一个根CALayer,在UIView上的所有视觉效果都是在这个Layer上进行的。 CALayer外形特征主要包括...
  • liulushi_1988
  • liulushi_1988
  • 2013年06月05日 13:52
  • 15749

Android -- layer-list的基本使用介绍

1. layer-list 是啥?有啥作用? 点击查看 安卓官方开发指南中关于layerlsit的说明 (1). layer-list 是啥? 简单理解,layer 是层,list 是列表,那么 la...
  • weixin_40797204
  • weixin_40797204
  • 2017年12月18日 14:22
  • 38

Android中用layer-list编写阴影效果

应项目需求,需要为ListView中的每个item设置一点阴影效果,参考官方API文档发现可以用layer-list这个东西实现图层覆盖,经试验发现可以实现阴影效果,特此记录下来,供以后再次学习。 ...
  • Iceshow0428
  • Iceshow0428
  • 2013年08月14日 14:19
  • 5120
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:layer-list实现阴影效果
举报原因:
原因补充:

(最多只允许输入30个字)