用一张图片实现按钮按下和普通效果的样式
2015-05-15 10:01
295 查看
第一种方法(强烈推荐)
方法:selector做遮罩,原图做background。
我们做按钮的时候经常需要用两个图片来实现按钮点击和普通状态的样式,这就需要提供两种图片,而且每个分辨率下还有多套图片,大大增加了apk的大小。
我们希望让这两张图片合二为一,而且还能实现两种或者多种状态,怎么做呢?我们首先建立一个圆形的selector,正常情况下是完全透明的,按下后透明度变小。
normal_bg_selector.xml
然后只需要问美工拿一张图片就好了,比如这张:
关键的一步来了,现在我们需要把selector文件当作遮罩,然后用上面的蓝色icon作为bg,放到一个ImageButton中:
最后只需要调整下padding就好了,如果你需要矩形的图片,就按照上面的方法建立一个矩形的遮罩即可。如果你们公司用的圆角矩形,直接问设计师要个圆角的标准就行,再建立一个selector文件吧。下面是最简单的原型和矩形的遮罩文件:
normal_oval_mask_selector.xml
normal_rectangle_mask_selector.xml
[b]第二种方法(不推荐)[/b]
当然我们还有另一种方法来实现这个效果,用的是layer-list。先放一个selector做的遮罩,然后在遮罩下面叠加一个button的icon。这样就做好button按下后的样式。
blue_btn_selector_layerlist.xml
现在我们有了按钮普通的样式和按钮按下的样式,之后就可以建立一个selector:
blue_button_bg_selector.xml
最后就只需要在button的background设置这个blue_button_bg_selector.xml就行了。第二种方法明显就比较繁琐,需要多建立一个文件,没有模块化。
参考自:
http://blog.sina.com.cn/s/blog_783ede030101ixr9.html
方法:selector做遮罩,原图做background。
我们做按钮的时候经常需要用两个图片来实现按钮点击和普通状态的样式,这就需要提供两种图片,而且每个分辨率下还有多套图片,大大增加了apk的大小。
我们希望让这两张图片合二为一,而且还能实现两种或者多种状态,怎么做呢?我们首先建立一个圆形的selector,正常情况下是完全透明的,按下后透明度变小。
normal_bg_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="oval"> <solid android:color="#21000000" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#00000000" /> </shape> </item> </selector>
然后只需要问美工拿一张图片就好了,比如这张:
关键的一步来了,现在我们需要把selector文件当作遮罩,然后用上面的蓝色icon作为bg,放到一个ImageButton中:
<ImageButton android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/normal_bg_selector" android:background="@drawable/blue_btn_icon" />
最后只需要调整下padding就好了,如果你需要矩形的图片,就按照上面的方法建立一个矩形的遮罩即可。如果你们公司用的圆角矩形,直接问设计师要个圆角的标准就行,再建立一个selector文件吧。下面是最简单的原型和矩形的遮罩文件:
normal_oval_mask_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="oval"> <solid android:color="#21000000" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#00000000" /> </shape> </item> </selector>
normal_rectangle_mask_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="rectangle"> <solid android:color="#21000000" /> </shape> </item> <item> <shape android:shape="rectangle"> <solid android:color="#00000000" /> </shape> </item> </selector>
[b]第二种方法(不推荐)[/b]
当然我们还有另一种方法来实现这个效果,用的是layer-list。先放一个selector做的遮罩,然后在遮罩下面叠加一个button的icon。这样就做好button按下后的样式。
blue_btn_selector_layerlist.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/blue_btn_icon" /> <item android:drawable="@drawable/blue_btn_mask_shape" /> </layer-list>
现在我们有了按钮普通的样式和按钮按下的样式,之后就可以建立一个selector:
blue_button_bg_selector.xml
<?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/blue_btn_selector_layerlist" /> <item android:drawable="@drawable/blue_btn_icon" /> </selector>
最后就只需要在button的background设置这个blue_button_bg_selector.xml就行了。第二种方法明显就比较繁琐,需要多建立一个文件,没有模块化。
参考自:
http://blog.sina.com.cn/s/blog_783ede030101ixr9.html
相关文章推荐
- Android selector 最佳写法 用一张图片实现按钮按下和普通效果的样式
- android仿IOS按钮点击效果,一张图片实现
- android图片按钮点击变灰变量效果实现(一张背景图实现效果)
- android仿IOS按钮点击效果,一张图片实现
- 基于jquery实现左右按钮点击的图片切换效果
- android checkBox背景样式及用颜色值实现按钮点击效果
- 用CSS实现的一张图完成的按钮效果
- 使用js实现带有停顿效果的图片滚动(按钮控制)
- js通过更改按钮的显示样式实现按钮的滑动效果
- 用CSS实现的一张图完成的按钮效果
- 用CSS实现的一张图完成的按钮效果
- jquery 实现滚动向上滚动图片上一张停顿一下在上一张效果
- Android中图片实现按钮点击效果
- js实现点击左右按钮轮播图片效果实例
- Android 笔记:ImageButton单击切换按钮图片效果的实现(转)
- 多图片实现上一张,下一张按钮功能DEMO
- Android - ImageButton单击切换按钮图片效果的实现 .
- 用CSS实现的一张图完成的按钮效果
- 关于实现页面以一张图片为背景,且背景不变形的效果
- Android - ImageButton单击切换按钮图片效果的实现