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

本文介绍如何通过selector和layer-list在Android中制作带有圆形阴影点击效果的按钮。利用selector控制不同状态的背景,layer-list实现图形叠加,结合两个shape文件制作出立体阴影,最终实现具有视觉吸引力的按钮效果。

之前反编译了百度阅读的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 这里面详细介绍了各个子节

点的使用方法。

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


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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值