文档章节

android自定义button样式

sumpower
 sumpower
发布于 2014/02/25 19:56
字数 1458
阅读 5031
收藏 1

在Android开发应用中,默认的Button是由系统渲染和管理大小的。而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的。因此,我们在开发产品的时候,需要对默认按钮进行美化。在本篇里,笔者结合在应用开发中的经验,探讨一下自定义背景的按钮、自定义形状按钮的实现方法。

首先看实现效果截图:

自定义背景的按钮目前有2种方式实现,矢量和位图。

1. 矢量图形绘制的方式

矢量图形绘制的方式实现简单,适合对于按钮形状和图案要求不高的场合。步骤如下:

(a) 使用xml定义一个圆角矩形,外围轮廓线实线、内填充渐变色,xml代码如下。

view plain

  1. //bg_alibuybutton_default.xml  

  2. <?xml version="1.0" encoding="utf-8"?>  

  3. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  

  4.    <item>  

  5.       <shape android:shape="rectangle">   

  6.          <solid android:color="#FFEC7600" />  

  7.          <corners  

  8.             android:topLeftRadius="5dip"  

  9.             android:topRightRadius="5dip"  

  10.             android:bottomLeftRadius="5dip"  

  11.             android:bottomRightRadius="5dip" />  

  12.       </shape>  

  13.    </item>  

  14.    <item android:top="1px" android:bottom="1px" android:left="1px" android:right="1px">  

  15.      <shape>  

  16.         <gradient   

  17.             android:startColor="#FFEC7600" android:endColor="#FFFED69E"   

  18.             android:type="linear" android:angle="90"  

  19.             android:centerX="0.5" android:centerY="0.5" />  

  20.         <corners  

  21.             android:topLeftRadius="5dip"  

  22.             android:topRightRadius="5dip"  

  23.             android:bottomLeftRadius="5dip"  

  24.             android:bottomRightRadius="5dip" />  

  25.       </shape>  

  26.    </item>    

  27. </layer-list>  

同样定义bg_alibuybutton_pressed.xml和bg_alibuybutton_selected.xml,内容相同,就是渐变颜色不同,用于按钮按下后的背景变化效果。

(b) 定义按钮按下后的效果变化描述文件drawable/bg_alibuybutton.xml,代码如下。

view plain

  1. <?xml version="1.0" encoding="UTF-8"?>  

  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  

  3.     <item android:state_pressed="true"  

  4.         android:drawable="@drawable/bg_alibuybutton_pressed" />  

  5.     <item android:state_focused="true"  

  6.         android:drawable="@drawable/bg_alibuybutton_selected" />  

  7.     <item android:drawable="@drawable/bg_alibuybutton_default" />  

  8. </selector>  

(c) 在你需要的界面定义文件中,如layout/main.xml中定义一个Button控件。

view plain

  1. <Button  

  2.     android:layout_width="120dip"  

  3.     android:layout_height="40dip"  

  4.     android:text="矢量背景按钮"       android:background="@drawable/bg_alibuybutton" />  

这样,自定义背景的按钮就可以使用了,在实现onClick方法后就可以响应操作。

 

2. 9-patch图片背景方式

此种方法相对复杂繁琐,但可以制作出更多、更复杂样式的按钮图样。

什么是9-patch格式呢?

9-patch格式,是在Android中特有的一种PNG图片格式,以"***.9.png"结尾。此种格式的图片定义了可以伸缩拉伸的区域和文字显示区域,这样,就可以在Android开发中对非矢量图进行拉伸而仍然保持美观。如果使用位图而没有经过9-patch处理的话,效果就会想第一张截图中的“普通图片背景按钮”那样被无情的拉伸,影响效果。Android中大量用了这种技术,默认的按钮的背景就是用了类似的方法实现的。我们看一下google官方的描述:

 

该格式相对于一般PNG图片来说,多了上下左右各一条1px的黑线。左、上黑线隔开了9个格子,当中一个格子(见上图Strechable Area区域)声明为可以进行拉伸。右、下两条黑线所定义的Paddingbox区域是在该图片当做背景时,能够在图片上填写文字的区域。每条黑线都是可以不连续的,这样就可以定义出很多自动拉伸的规格。Android sdk中提供了设置的工具,启动命令位于:$ANDROID_SDK/tools/draw9patch.bat,使用它对于原始PNG进行设置9-patch格式,非常方便,如下图。

        

draw9patch工具的右侧是能够看到各方向拉伸后的效果图,你所要做的就是在图上最外侧一圈1px宽的像素上涂黑线。

注意,在draw9patch.bat第一次运行时,sdk2.2版本上会报错:java.lang.NoClassDefFoundError:org/jdesktop/swingworker/SwingWorker。需要下载swing-worker-1.1.jar,放入$android_sdk/tools/lib路径下,成功运行。

此种方法实现的步骤如下。

(a) 使用draw9patch.bat作完图片后,得到两张按钮背景,分别是正常和按下状态下的,命名为bg_btn.9.png和bg_btn_2.9.png。

(b) 编写图片使用描述文件bg_9patchbutton.xml。

view plain

  1. // in bg_9patchbutton.xml  

  2. <?xml version="1.0" encoding="UTF-8"?>  

  3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  

  4.     <item android:state_pressed="true"  

  5.         android:drawable="@drawable/bg_btn_2" />  

  6.     <item android:state_focused="true"  

  7.         android:drawable="@drawable/bg_btn_2" />  

  8.     <item android:drawable="@drawable/bg_btn" />  

  9. </selector>  

(c) 在界面定义文件 layout/main.xml中添加Button、ImageButton按钮控件的定义。Button、ImageButton都是可以使用背景属性的。

view plain

  1. <Button  

  2.     android:layout_width="120dip"  

  3.     android:layout_height="40dip"  

  4.     android:text="9-patch图片背景按钮"  

  5.     android:background="@drawable/bg_9patchbutton" />  

  6. <Button  

  7.     android:layout_width="200dip"  

  8.     android:layout_height="40dip"  

  9.     android:text="9-patch图片背景按钮"  

  10.     android:background="@drawable/bg_9patchbutton" />  

  11. <Button  

  12.     android:layout_width="120dip"  

  13.     android:layout_height="80dip"  

  14.     android:text="9-patch图片背景按钮"  

  15.     android:background="@drawable/bg_9patchbutton" />  

  16. <ImageButton  

  17.     android:layout_width="120dip"  

  18.     android:layout_height="40dip"  

  19.     android:src="@drawable/bg_9patchbutton"  

  20.     android:scaleType="fitXY"  

  21.     android:background="@android :color/transparent" />  

以上2种实现按钮的美化,都是标准的矩形按钮为基础。在一些应用中我们可以看到漂亮的自定义形状的异形按钮,这是怎么实现的呢?经过一番研究和实践,找出了一种方便的方法,就是使用ImageButton加上9-patch就可以实现漂亮的自动延伸效果。

 

3. 自定义形状、颜色、图样的按钮的实现

步骤如下。

(a) 设计一张自定义形状风格背景的图片,如下图。

(b) 未点击和按下后的状态各做一张,形成一套图片,如下图。

 forward.png    forward2.png

(c) 创建和编写按钮不同状态的图片使用描述文件drawable/ib_forward.xml

view plain

  1. // ib_forward.xml  

  2. <?xml version="1.0" encoding="UTF-8"?>  

  3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  

  4.     <item android:state_pressed="true"  

  5.         android:drawable="@drawable/forward2" />  

  6.     <item android:state_focused="true"  

  7.         android:drawable="@drawable/forward2" />  

  8.     <item android:drawable="@drawable/forward" />  

  9. </selector>  

(d) 在界面定义文件 layout/main.xml中添加ImageButton按钮控件的定义。

view plain

  1. // in layout/main.xml  

  2.     <ImageButton  

  3.         android:layout_width="80dip"  

  4.         android:layout_height="40dip"  

  5.         android:src="@drawable/ib_forword"  

  6.         android:scaleType="fitXY"  

  7.         android:background="@android :color/transparent" />  

本文转载自:http://blog.csdn.net/lucherr/article/details/7476941

共有 人打赏支持
sumpower
粉丝 0
博文 10
码字总数 6273
作品 0
长沙
私信 提问
Android中Toast的用法简介

Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失。下面用一个实例来看看如何使用Toast。 1.默认效...

Reya滴水心
2014/03/10
0
0
android Toast大全(五种情形)建立属于你自己的Toast

Toast用于向用户显示一些帮助/提示。下面我做了5中效果,来说明Toast的强大,定义一个属于你自己的Toast。 1.默认效果 代码 Toast.makeText(getApplicationContext(), "默认Toast样式", Toas...

迷途d书童
2012/08/30
0
6
android Toast大全(五种情形)建立属于你自己的Toast

Toast用于向用户显示一些帮助/提示。下面我做了5中效果,来说明Toast的强大,定义一个属于你自己的Toast。 1.默认效果 代码 Toast.makeText(getApplicationContext(), "默认Toast样式", Toas...

xiahuawuyu
2012/10/08
0
1
apkplug主题皮肤切换之通用主题-04

该文章基于V1.6.9版本 apkplug主题切换有两个层次的切换,这篇文章只讲解通用主题切换层次 一 何为通用主题切换 apkplug通用主题切换可以简单的理解为一套可动态替换的系统主题(由主题包提供...

梁大帅
2014/05/26
0
0
support.v4.app.DialogFragment使用问题总结

因app需求问题,需要实现如图这种dialog 看到这里,你可能会说如此easy的事情,还说什么! 那么继续往下看! 场景1: import android.app.Dialog;import android.content.DialogInterface;i...

artshell
2015/06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据解析之XPath & lxml库

XPath 定义 即XML路径语言(XML Path Language),是一种用来确定XML文档中某部分位置的语言,它基于XML的树状结构,提供在数据结构树中寻找节点的能力,也适用于HTML文档中; 开发工具 Chrome...

村雨1943
31分钟前
2
0
day148-2018-11-15-英语流利阅读-待学习

赴美生子恐结束?特朗普中期选举憋大招 毛西 2018-11-15 1.今日导读 在 2013 年,一部《北京遇上西雅图》让赴美生子这个曾经神秘的话题吸引了很多关注。每年,数以万计的父母远赴美国,并在那...

飞鱼说编程
今天
34
0
OSChina 周四乱弹 —— 每次我穿短裙的时候

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @瘟神灬念 :分享DM DOKURO的单曲《Reality Check Through The Skull》: 差点以为手机卡了 《Reality Check Through The Skull》- DM DOKURO...

小小编辑
今天
537
14
Windows 10 设置 Java 环境变量

首先你需要在我的电脑中打开,找到环境变量属性。 找到环境变量属性 找到环境变量属性后单击将会看到下面的设置界面。 在这个界面中设置高级系统设置。 环境变量 在弹出的界面中选择设置环境...

honeymose
今天
4
0
用any-loader封装jQuery的XHR —— 随便写着玩系列

哎,都说没人用JQuery啦,叫你别写这个。 其实我也是好高骛远使用过npm上某个和某个很出名的XHR库,嗯,认识我的人都知道我喜欢喷JQ,以前天天喷,见面第一句,你还用JQ,赶紧丢了吧。但我也...

曾建凯
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部