为控件添加阴影效果-最简单的实现方法
- 我们知道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>
- 大家先不管别的,就是在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>
- 这里我们在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>
<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>
<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>
- 这里再也没啥说的,要注意的是阴影层和上层的shape样式要一样,符合阴影的规律
- 当然这里也可以是别的样式,只要你做出来感觉好看,咋样都成,重点是这里的layer-list的item分层思想