为控件添加阴影效果-最简单的实现方法_cskin 控件添加阴影

为控件添加阴影效果-最简单的实现方法

• 我们知道Android5.0 引入了Z轴的概念，于是就有着这种风格，也就是目前比较火的Material Design。
• 我们可以直接为控件设置android:elevation这个属性，来让他实现“漂浮”效果
• 可是，我们日常常用的一些最基本的Button这些东西却是不支持这个属性
• 那么，我们如果想让我们的控件浮起来，该怎么办呢？

实现

• 效果
  
• 这里的东西其实只是一个Button而已，可是通过我们的设置之后就变成了一个拥有阴影的控件，是不是很高大上呢？
• 其实这里面的东西并不复杂
• 我们都知道，通过drawable的shape结点，可以设置图形的圆角什么的属性，关于介绍shape请移驾这里
• 不过shape这么用，好像没有设置阴影啥的东西啊
• 这里，Android还为我们提供了一个layer-list结点，然后在它的内部可以这样用

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

    </item>
    <item
        android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="5dp">

    </item>
</layer-list>
1
2
3
4
5
6
7
8
9
10
11
12

• 大家先不管别的，就是在layer-list节点下有一个Item属性，这个属性表示层，下面的Item会将上面的Item覆盖
• 这里先来个例子简单的说明这个Item的效果
• xml代码如下

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:left="1dip"
        android:right="1dip"
        android:top="1dip"
        android:bottom="1dip">
        <shape>
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>

    <item android:left="5dip"
        android:right="5dip"
        android:top="5dip"
        android:bottom="5dip">
        <shape>
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>

    <item android:left="10dip"
        android:right="10dip"
        android:top="10dip"
        android:bottom="10dip">
        <shape>
            <solid android:color="#FF0"/>
        </shape>
    </item>

</layer-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 这里我们在Item里面定义了三个Item，然后Item的左上右下的值分别递增，然后在Item的内部我们给每一个Item都设置不同的颜色
• 接下来，就是见证奇迹的时刻了
• 我给Button设置background属性为这个xml文件，然后，效果看图
  
• 有没有和你想象的一样呢？
• 我们刚才说的Item的意思是层吧？这里明显是分成了三层，那么为什么每一层的大小不一样呢？
• 这里就要归功于我们给Item设置的那四个参数了，那四个参数分别表示在每个方向往内的偏移量，所以我们给最后一个Item的四个偏移量设置到最大，不然，如果最上层的偏移量不够的话，他会将下面的层（或者说写在上面的item）给覆盖掉
• 这就是简单用法了，我们可以在Item里面是用shape属性将这个控件设置的奇形怪状（额，这里找不出什么词修饰了，你们懂得）
• 那么接下来看看阴影效果怎么实现吧

---

• 先简单分析一下，我们最上面的效果图，我们其实可以这么理解，他也是分两层，下层是阴影，上层是颜色，只不过相对下层来说，我们需要让他的上层往内偏移一定量
• 感觉就没啥难理解的了吧，直接上代码

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--阴影层-->
    <item>
        <!--shape为阴影层的样式-->
        <shape>

            <gradient
                android:angle="270"
                android:endColor="#0F000000"
                android:startColor="#0F000000" />
            <!--这里主要是四个角弧度-->
            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>


    <!--上层-->
    <!--上层要向内偏移一定的距离，才能有阴影的效果-->
    <item
        android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="5dp">

        <!--shape为上层的样式-->
        <shape>
            <!--这里虽然都写的是渐变色，但是并没有写出色差，所以这里并没有效果-->
            <gradient
                android:angle="270"
                android:endColor="#FFFFFF"
                android:startColor="#FFFFFF" />

            <!--这里主要是四个角弧度，要注意的是必须与
            阴影层的弧度相同，不然可就不符合大自然规律了-->
            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>

</layer-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

• 这里再也没啥说的，要注意的是阴影层和上层的shape样式要一样，符合阴影的规律
• 当然这里也可以是别的样式，只要你做出来感觉好看，咋样都成，重点是这里的layer-list的item分层思想