在Android开发应用中,默认的Button是由系统渲染和管理大小的。而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的。因此,我们在开发产品的时候,需要对默认按钮进行美化。在本篇里,笔者结合在应用开发中的经验,探讨一下自定义背景的按钮、自定义形状按钮的实现方法。
首先看实现效果截图:
自定义背景的按钮目前有2种方式实现,矢量和位图。
1. 矢量图形绘制的方式
矢量图形绘制的方式实现简单,适合对于按钮形状和图案要求不高的场合。步骤如下:
(a) 使用xml定义一个圆角矩形,外围轮廓线实线、内填充渐变色,xml代码如下。
-
//bg_alibuybutton_default.xml
-
<?xmlversion="1.0"encoding="utf-8"?>
-
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
-
<item>
-
<shapeandroid:shape="rectangle">
-
<solidandroid:color="#FFEC7600"/>
-
<corners
-
android:topLeftRadius="5dip"
-
android:topRightRadius="5dip"
-
android:bottomLeftRadius="5dip"
-
android:bottomRightRadius="5dip"/>
-
</shape>
-
</item>
-
<itemandroid:top="1px"android:bottom="1px"android:left="1px"android:right="1px">
-
<shape>
-
<gradient
-
android:startColor="#FFEC7600"android:endColor="#FFFED69E"
-
android:type="linear"android:angle="90"
-
android:centerX="0.5"android:centerY="0.5"/>
-
<corners
-
android:topLeftRadius="5dip"
-
android:topRightRadius="5dip"
-
android:bottomLeftRadius="5dip"
-
android:bottomRightRadius="5dip"/>
-
</shape>
-
</item>
-
</layer-list>
同样定义bg_alibuybutton_pressed.xml和bg_alibuybutton_selected.xml,内容相同,就是渐变颜色不同,用于按钮按下后的背景变化效果。
(b) 定义按钮按下后的效果变化描述文件drawable/bg_alibuybutton.xml,代码如下。
-
<?xmlversion="1.0"encoding="UTF-8"?>
-
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
-
<itemandroid:state_pressed="true"
-
android:drawable="@drawable/bg_alibuybutton_pressed"/>
-
<itemandroid:state_focused="true"
-
android:drawable="@drawable/bg_alibuybutton_selected"/>
-
<itemandroid:drawable="@drawable/bg_alibuybutton_default"/>
-
</selector>
(c) 在你需要的界面定义文件中,如layout/main.xml中定义一个Button控件。
-
<Button
-
android:layout_width="120dip"
-
android:layout_height="40dip"
-
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。
-
//inbg_9patchbutton.xml
-
<?xmlversion="1.0"encoding="UTF-8"?>
-
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
-
<itemandroid:state_pressed="true"
-
android:drawable="@drawable/bg_btn_2"/>
-
<itemandroid:state_focused="true"
-
android:drawable="@drawable/bg_btn_2"/>
-
<itemandroid:drawable="@drawable/bg_btn"/>
-
</selector>
(c) 在界面定义文件 layout/main.xml中添加Button、ImageButton按钮控件的定义。Button、ImageButton都是可以使用背景属性的。
-
<Button
-
android:layout_width="120dip"
-
android:layout_height="40dip"
-
android:text="9-patch图片背景按钮"
-
android:background="@drawable/bg_9patchbutton"/>
-
<Button
-
android:layout_width="200dip"
-
android:layout_height="40dip"
-
android:text="9-patch图片背景按钮"
-
android:background="@drawable/bg_9patchbutton"/>
-
<Button
-
android:layout_width="120dip"
-
android:layout_height="80dip"
-
android:text="9-patch图片背景按钮"
-
android:background="@drawable/bg_9patchbutton"/>
-
<ImageButton
-
android:layout_width="120dip"
-
android:layout_height="40dip"
-
android:src="@drawable/bg_9patchbutton"
-
android:scaleType="fitXY"
-
android:background="@android:color/transparent"/>
以上2种实现按钮的美化,都是标准的矩形按钮为基础。在一些应用中我们可以看到漂亮的自定义形状的异形按钮,这是怎么实现的呢?经过一番研究和实践,找出了一种方便的方法,就是使用ImageButton加上9-patch就可以实现漂亮的自动延伸效果。
3. 自定义形状、颜色、图样的按钮的实现
步骤如下。
(a) 设计一张自定义形状风格背景的图片,如下图。
(b) 未点击和按下后的状态各做一张,形成一套图片,如下图。
forward.pngforward2.png
(c) 创建和编写按钮不同状态的图片使用描述文件drawable/ib_forward.xml
-
//ib_forward.xml
-
<?xmlversion="1.0"encoding="UTF-8"?>
-
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
-
<itemandroid:state_pressed="true"
-
android:drawable="@drawable/forward2"/>
-
<itemandroid:state_focused="true"
-
android:drawable="@drawable/forward2"/>
-
<itemandroid:drawable="@drawable/forward"/>
-
</selector>
(d) 在界面定义文件 layout/main.xml中添加ImageButton按钮控件的定义。
-
//inlayout/main.xml
-
<ImageButton
-
android:layout_width="80dip"
-
android:layout_height="40dip"
-
android:src="@drawable/ib_forword"
-
android:scaleType="fitXY"
-
android:background="@android:color/transparent"/>
分享到:
相关推荐
Android自定义Button的通用方法
android studio 自定义button边框,角度,渐变颜色按下时改变样式, 以及基础动画,为image view添加旋转,下移,渐变等样式,使用timer handler button进行控制。
android 自定义各种风格button
安卓 android 自定义 switch button,滑动开关,绝对漂亮美观
NULL 博文链接:https://2528.iteye.com/blog/1164340
如何自定义CheckBox的样式 1:首先在布局文件中添加CheckBox的控件配置,如: android:id="@+id/button1" style="@style/CheckBoxStyles"//这里就是用户可以自定CheckBox的样式 android:layout_width="match_...
* ,通常我们需要自定义Button样式,自定义Button样式有三种: * 1、使用.9格式图片作为Button背景,或者作为ImageView、 * TextView、RadioButton等控件背景,效果都不错,能够自适应 * 2、使用自定义矢量图的...
NULL 博文链接:https://chennaigong.iteye.com/blog/1143049
使用新的方法实现Button效果,如上图一样,有时候我们需要一个Button,前面有一个小型的图标,有两种办法,可以自定义一个Button,其实,我们不必纠结于Button这个词,只要能获得点击事件,做出Button一样的效果就可以
Button 自定义点击样式,添加音效 http://blog.csdn.net/shark0017
一、shape 样式:(在drawable新建–》new–》Drawable resource file 在父级标签selector添加Item ) <?xml version=1.0 encoding=utf-8?> <selector xmlns:android=...
自定义了一下Button的样式 需要的朋友可以拿去看一下效果
最近在开发一个WIFI连接的功能,点击WIFI需要弹出自定义密码输入框。在此权当记录 效果图 点击首页的Button即跳出对话框,显示WIFI信息(TextView),密码输入框(EditText),取消和连接按钮(Button) 实现 根据自己实际的...
Android Studio 在xml文件中设置界面布局1、xml文件中给输入框editText修改下划线颜色2、设置button按钮为圆角及修改按钮颜色3、运用约束布局时预览效果和运行效果不一致 写一写今天困扰我很久的问题:如何给...
先上图,看看接下来我要向大家介绍的是个什么东西,如下图: ...首先button自己有background和src,如果把半透明的水波纹当作background或者src绘制到button上面,肯定是会损失button原有的样式的。可能有朋友猜想那就
在高德地图中点击弹出自定义弹框(气泡)。(结合上一个上传的文件,也可用于标记点的点击弹出的弹框气泡)
Android自定义View研究-- 一个小Demo Android调用相册拍照实现系统控件缩放切割图片 Android SQLite的实例汇总大全 两分钟彻底让你明白Android Activity生命周期(图文)! Android 图形系统剖析 Android 立体效果图片...
CheckBox是Android中用的比较多的一个控件,不过它自带的button样式比较丑,通常都会替换成本地的资源图片。使用本地资源图片很简单,设置android:button属性为一个自定义的包含selector的drawable文件即可。 例如...
Button是Android中一个非常简单的控件,在我们平时的项目中,可以说是非常的常见,使用率也是相当高。下面通过实例代码给大家介绍Android studio button 按钮 四种绑定事件的方法,具体代码如下所示: package ...
5.2.5 使用按钮——Button 5.2.6实例——计算器 5.2.7 使用图片按钮——ImageButton 5.2.8 使用复选框——CheckBox 5.2.9实例——请同意本协议 5.2.10 使用单选框——RadioGroup 5.2.11 实例——请选择性别 5.2.12...