使用selector,shape以及lay-list制作圆形阴影点击效果

来源:互联网 发布:simulink软件下载 编辑:程序博客网 时间:2024/06/11 08:08

之前反编译了百度阅读的xml文件,在res文件夹中找不到其中按钮的背景图片,后来发现他们的一些按钮背景是通过layer-list制作出来的

下面我们就来介绍一下这种制作方法

1、我们都知道要制作点击效果的按钮,那么就得使用selector,他能够在各种按钮状态下去定义背景图片。现在我们只需要点击效果,那么

就在state_pressed状态下设置背景就行了

<?xml version="1.0" encoding="utf-8"?><selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item         android:state_pressed="true"        android:drawable="@drawable/layer_grey_ball_pressed" />        <item android:drawable="@drawable/layer_grey_ball_normal" /></selector>

2、我们知道一般上面的drawabe我们放的都是图片,现在则是通过layer-list制作出来的,layer-list的作用是将多个图片或者控件进行叠加

上面的两个状态的背景图都是通过layer-list制作出来的

<?xml version="1.0" encoding="utf-8"?><layer-list  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/shape_grey_ball_shadow" />    <item android:drawable="@drawable/shape_grey_ball" android:bottom="2.0dip" /></layer-list>

<?xml version="1.0" encoding="utf-8"?><layer-list  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/shape_grey_ball_pressed_shadow" />    <item android:drawable="@drawable/shape_grey_ball_pressed" android:top="2.0dip" /></layer-list>

3、叠加那么是叠加什么东西呢?通过上面的xml文件我们可以看出,是叠加了两个shape文件,从而制作出了立体阴影的效果,他的处理很简单

就是通过使得张图不完全重叠从而制作出了阴影的效果。

<?xml version="1.0" encoding="utf-8"?><shape android:shape="oval"  xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#ff5f5a54" />    <size android:height="80.0dip" android:width="80.0dip" /></shape>

<?xml version="1.0" encoding="utf-8"?><shape android:shape="oval"  xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#ff706c63" />    <size android:height="80.0dip" android:width="80.0dip" /></shape>

上面的两个shape文件通过使用layer-list进行叠加就能够制作出一个阴影效果的背景,点击之后的背景再通过另外两个shape文件进行制作,那么shape

是什么呢?shape是android中用于制作UI的工具,能够制作方形,线,圆(包括椭圆),圆环这四种图形,并且能够定义比如:背景颜色,大小,渐变

等效果,具体可以参考android API :http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape 这里面详细介绍了各个子节

点的使用方法。

通过以上三个步骤,按钮的背景就制作好了。看下效果:


这样一个下边缘有阴影效果的按钮便制作好了。



0 0