自定义绘图实现阴影效果

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

一、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= "https://schemas.android.com/apk/res/android" >
     <item android:drawable= "@drawable/blog1_1" >
     <item android:drawable= "@drawable/blog1_2" >
     <item android:drawable= "@drawable/blog1_3" >
</item></item></item></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= "https://schemas.android.com/apk/res/android" >
     <item>
         <shape>
             <corners android:radius= "25dp" >
             <solid android:color= "#E4E4E4" >
         </solid></corners></shape>
     </item>
     <item android:bottom= "2dp" android:left= "2dp" android:right= "2dp" android:top= "2dp" >
         <shape>
             <corners android:radius= "25dp" >
             <solid android:color= "#FFFFFF" >
         </solid></corners></shape>
     </item>
</layer-list>
上面的代码实现的效果是这样的:
\

 

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

<item>
     <shape>
         <corners android:radius= "25dp" >
         <solid android:color= "#E4E4E4" >
     </solid></corners></shape>
</item>
底部是一个灰色的矩形,它的四个角被圆角化,并且填充为灰色。
上层绘制的shape对应的代码为:
<item android:bottom= "2dp" android:left= "2dp" android:right= "2dp" android:top= "2dp" >
     <shape>
         <corners android:radius= "25dp" >
         <solid android:color= "#FFFFFF" >
     </solid></corners></shape>
</item>
我们来看下效果:
\

 

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

3、layer-list与selector标签

改造方法一:使用layer-list做根结点 
下面我们对上面shape的代码进行改造,当用户手指按下的时候,将前景色改为黄色,代码为:
<!--?xml version= "1.0" encoding= "utf-8" ?-->
<layer-list xmlns:android= "https://schemas.android.com/apk/res/android" >
     <item>
         <shape>
             <corners android:radius= "25dp" >
             <solid android:color= "#E4E4E4" >
         </solid></corners></shape>
     </item>
     <item android:bottom= "2dp" android:left= "2dp" android:right= "2dp" android:top= "2dp" >
         <selector>
             <item android:state_pressed= "true" >
                 <shape>
                     <corners android:radius= "25dp" >
                     <solid android:color= "#FFFF00" >
                 </solid></corners></shape>
             </item>
             <item>
                 <shape>
                     <corners android:radius= "25dp" >
                     <solid android:color= "#FFFFFF" >
                 </solid></corners></shape>
             </item>
         </selector>
     </item>
</layer-list>
我们先来看一下效果,然后再来看代码
\

这里明显实现了当用户点击时前景变化的功能。下面我们再来讲解下代码 首先,这里同样是绘制两层layer,第一层,依然是阴影层,代码没动:

<item>
     <shape>
         <corners android:radius= "25dp" >
         <solid android:color= "#E4E4E4" >
     </solid></corners></shape>
</item>
在第一层绘制完成以后,当绘制第二层时就出现问题了:
<item android:bottom= "2dp" android:left= "2dp" android:right= "2dp" android:top= "2dp" >
     <selector>
         <item android:state_pressed= "true" >
             <shape>
                 <corners android:radius= "25dp" >
                 <solid android:color= "#FFFF00" >
             </solid></corners></shape>
         </item>
         <item>
             <shape>
                 <corners android:radius= "25dp" >
                 <solid android:color= "#FFFFFF" >
             </solid></corners></shape>
         </item>
     </selector>
</item>
第二层中,会对当前用户状态做判断,如果用户当前是按下状态,则绘制:

猜你喜欢

转载自blog.csdn.net/wqbs369/article/details/78049043