Button多样化与自定义点击效果

时间：2015-05-12 13:40:23 阅读：199 评论：0 收藏：0 [点我收藏+]

标签：android 界面 ui

在Android开发应用中，默认的Button是由系统渲染和管理大小的。然后，我们在产品的实际开发中，需要对默认Button进行美化，比如自定义背景的按钮、自定义图片按钮等，以此来改善UI的美观并且提高用户的体验度。

Button控件常用属性如下：

一、自定义按钮背景

1.修改系统默认Button的背景颜色

(1)在drawable资源目录下按钮下后的效果变化描述文件drawable/sectorBtn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" >
<color android:color="#FF8C00"/>
</item>
<item android:state_focused="true" >
<color android:color="#B22222"/>
</item>
<item android:state_pressed="true" >
<color android:color="#B22222"/>
</item>
</selector>

(2)设置布局文件中Button的android:background属性

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="默认Button"
android:background="@drawable/sectorBtn" />

效果如下：

2.绘制矢量图形作为Button按钮背景

绘制矢量图的方式实现比较简单，适合于对于按钮形状和图案要求不高的场合。

步骤如下：

(1) 在/drawable/btn_shape_default.xml、/drawable/btn_shape_pressing.xml定义一个圆角矩形，外围轮廓线实线、内填充渐变色

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<solid android:color="#FFEC7600"/>
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip"/>
</shape>
</item>
<item >
<shape >
<gradient
android:startColor="#CD3700"
android:endColor="#CD6600"
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>

注意：/drawable/btn_shape_pressing.xml与/drawable/btn_shape_default.xml 内容相同，就是渐变颜色不同，用于按钮按下后的背景变化效果。

<gradient
android:startColor="#FFEC7600"
android:endColor="#FFFED69E"
android:type="linear"
android:angle="90"
android:centerX="0.5"
android:centerY="0.5"/>

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

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

(3)在界面文件(如layout/main.xml)中定义一个Button控件

<Button
android:layout_width="120dip"
android:layout_height="40dip"
android:text="登录"
android:background="@drawable/selector_btn_background.xml" />

效果如下：

3.使用9patch图片(位图)作为Button按钮背景

当按钮的内容太多是，Android会自动缩放整张图片，以保证背景图片能覆盖整个按钮，但这种缩放整张图片的效果可能并不好。为了实现只缩放图片中的某个部分，我们可以借助9Patch图片来实现。9-patch格式，是在Android中特有的一种PNG图片格式，以"***.9.png"结尾。此种格式的图片定义了可以伸缩拉伸的区域和文字显示区域，这样，就可以在Android开发中对非矢量图进行拉伸而仍然保持美观。如果使用位图而没有经过9-patch处理的话，背景图片的效果就会被无情的拉伸，影响效果。9patch图片原理是：它在原始图片的四周各添加一个宽度为1像素的线条，这4条线决定了该图片的缩放规则、内容显示规则，即左侧和上侧直线共同决定图片的缩放区域(纵向缩放、水平缩放)；右侧和下侧的直线共同决定图片内容的显示区域。

(1) 使用draw9patch.bat制作图片：运行SDK目录/tools/draw9patch.bat，双击运行，得到两张按钮背景，分别是正常和按下状态下的，命名为bg_btn.9.png和bg_btn_2.9.png。

技术分享