自定义控件三部曲之绘图篇（十六）——给控件添加阴影效果与发光效果

前言：要么出击，要么出局，命运女神总会眷顾拼劲全力的一方

 

相关文章：

《Android自定义控件三部曲文章索引》：http://blog.csdn.net/harvic880925/article/details/50995268

 

这节我们将学到如下内容：

• 传统地给按钮添加阴影的方法
• 如何给已有控件添加阴影
• 如何给图片添加阴影

一、layerlist给按钮添加阴影效果

 

给控件添加阴影有很多方法，但平常我们给按钮添加阴影最常用的就是使用layerlist多层绘图来添加阴影效果，我们先来看一下给按钮添加的阴影效果图：

 

 

从效果图中可以明显看出，按钮的外围多了一圈灰色的阴影效果。
在开始做阴影效果之前，我们先讲解一下有关layerlist的知识。
在xml中，我们有常用的几个标签：shape、selector、layerlist;

• shape标签：以前我们讲过,就是利用代码绘制出背景效果，可以定义填充色、描边、圆角、渐变等。不了解的同学可以参考下：《详解shape标签》 
• selector标签：用于定义在用户不同的动作状态下，使用不同的背景值。有关selector的知识，博主没有讲过，也不打算再讲了，难度不大，自己搜几个帖子就能学会了。
• layerlist标签：这个标签的主要作用就是将多个图层按照顺序叠起来，做为一个背景图来显示。

1、layerlist示例：

 

layerlist标签就是模拟Photoshop中图层的概念，把每一张图层按照顺序叠加起来，做为背景图来显示；
我们先来看一下简单的例子，我们要显示一下两只蜗牛的图片：

 

 

它由三张图片组成：
一张纯蓝色的背景：(blog1_1.png)

一只黄蜗牛：(blog1_2.png)

一只土色蜗牛：(blog1_3.png)

我们先定义一个layerlist的文件（shade.xml）

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/blog1_1"/>
    <item android:drawable="@drawable/blog1_2"/>
    <item android:drawable="@drawable/blog1_3"/>
</layer-list>

 

这里分别将上面的三张图片做为item添加给layer-list；效果图就是一开始演示的那样。layer-list使用起来很简单，只需要把每一层设置为其中的item即可。
有一点需要注意，layer-list标签的Item中不仅可以设置drawable，也可以设置shape、selector，我们下面一一做下尝试：

 

2、layer-list与shape标签

 

编写控件阴影drawable代码
上面我们使用使用的是layer-list中item的drawable属性来直接引入图片，其实除了drawable属性，item还有另外几个属性：

 

• android:top 顶部的偏移量
• android:bottom 底部的偏移量
• android:left 左边的偏移量
• android:right 右边的偏移量

这四个偏移量和控件的margin设置差不多，都是外间距的效果。如果不设置偏移量，前面的图层就完全挡住了后面的图层，从而也看不到后面的图层效果了。
言归正转，先来看看如何在layer-list中使用shape标签：

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="#E4E4E4"/>
        </shape>
    </item>
    <item android:left="2dp" android:top="2dp"
          android:bottom="2dp" android:right="2dp">
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>
</layer-list>

上面的代码实现的效果是这样的：

 

 

 

大家看到类似阴影的效果了吧，不错，这段代码就是实现按钮阴影的代码，我们来仔细看一下
首先，它使用layer-list将两层shape叠加在一起，底部的shape代码为：

 

<item>
    <shape>
        <corners android:radius="25dp"/>
        <solid android:color="#E4E4E4"/>
    </shape>
</item>

底部是一个灰色的矩形，它的四个角被圆角化，并且填充为灰色。
上层绘制的shape对应的代码为：

 

<item android:left="2dp" android:top="2dp"
      android:bottom="2dp" android:right="2dp">
    <shape>
        <corners android:radius="25dp"/>
        <solid android:color="#FFFFFF"/>
    </shape>
</item>

它同样绘制的是一个四个角都被圆角化的矩形，但填充颜色是纯白色。为了露出底层的灰色阴影，我们需要给上层的shape加上边距，这也就是item的 android:left=”2dp” android:top=”2dp” android:bottom=”2dp” android:right=”2dp”这四个属性的作用，相当于margin的作用。
使用阴影drawable
在写好layer-list以后，我们需要在按钮控件中使用它：

 

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_margin="10dp"
        android:background="@drawable/layer_shape_list"
        android:text="带阴影的按钮"
        android:textColor="#ff0000"/>

我们来看下效果：

 

 

 

从效果图中可以看到，我们虽然实现了带阴影的按钮效果，但是在点击时却没有任何状态变化，这对于按钮是完全不能接受的，所以我们需要给按钮添加上状态变化，这就需要用到selector标签了

3、layer-list与selector标签