<p>在Android开发应用中,默认的Button是由系统渲染和管理大小的。而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的。因此,我们在开发产品的时候,需要对默认按钮进行美化。在本篇里,笔者结合在应用开发中的经验,探讨一下自定义背景的按钮、自定义形状按钮的实现方法。</p><p>首先看实现效果截图:</p><p><img src="/up_pic/201805/290933419576.gif" title="290933419576.gif" alt="1.gif"/></p><p>自定义背景的按钮目前有2种方式实现,矢量和位图。</p><p>1. 矢量图形绘制的方式</p><p>矢量图形绘制的方式实现简单,适合对于按钮形状和图案要求不高的场合。步骤如下:</p><p>(a) 使用xml定义一个圆角矩形,外围轮廓线实线、内填充渐变色,xml代码如下。</p><pre class="brush:as3;toolbar:false">//bg_alibuybutton_default.xml &lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;layer-listxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &lt;item&gt; &lt;shapeandroid:shape=&quot;rectangle&quot;&gt; &lt;solidandroid:color=&quot;#FFEC7600&quot;/&gt; &lt;corners android:topLeftRadius=&quot;5dip&quot; android:topRightRadius=&quot;5dip&quot; android:bottomLeftRadius=&quot;5dip&quot; android:bottomRightRadius=&quot;5dip&quot;/&gt; &lt;/shape&gt; &lt;/item&gt; &lt;itemandroid:top=&quot;1px&quot;android:bottom=&quot;1px&quot;android:left=&quot;1px&quot;android:right=&quot;1px&quot;&gt; &lt;shape&gt; &lt;gradient android:startColor=&quot;#FFEC7600&quot;android:endColor=&quot;#FFFED69E&quot; android:type=&quot;linear&quot;android:angle=&quot;90&quot; android:centerX=&quot;0.5&quot;android:centerY=&quot;0.5&quot;/&gt; &lt;corners android:topLeftRadius=&quot;5dip&quot; android:topRightRadius=&quot;5dip&quot; android:bottomLeftRadius=&quot;5dip&quot; android:bottomRightRadius=&quot;5dip&quot;/&gt; &lt;/shape&gt; &lt;/item&gt; &lt;/layer-list&gt;</pre><p><br/></p><p>同样定义bg_alibuybutton_pressed.xml和bg_alibuybutton_selected.xml,内容相同,就是渐变颜色不同,用于按钮按下后的背景变化效果。</p><p>(b) 定义按钮按下后的效果变化描述文件drawable/bg_alibuybutton.xml,代码如下。</p><pre class="brush:as3;toolbar:false">&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;UTF-8&quot;?&gt; &lt;selectorxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &lt;itemandroid:state_pressed=&quot;true&quot; android:drawable=&quot;@drawable/bg_alibuybutton_pressed&quot;/&gt; &lt;itemandroid:state_focused=&quot;true&quot; android:drawable=&quot;@drawable/bg_alibuybutton_selected&quot;/&gt; &lt;itemandroid:drawable=&quot;@drawable/bg_alibuybutton_default&quot;/&gt; &lt;/selector&gt;</pre><p>(c) 在你需要的界面定义文件中,如layout/main.xml中定义一个Button控件。</p><pre class="brush:as3;toolbar:false">&lt;Button android:layout_width=&quot;120dip&quot; android:layout_height=&quot;40dip&quot; android:text=&quot;矢量背景按钮&quot;android:background=&quot;@drawable/bg_alibuybutton&quot;/&gt;</pre><p>这样,自定义背景的按钮就可以使用了,在实现onClick方法后就可以响应操作。</p><p></p><p>2. 9-patch图片背景方式</p><p>此种方法相对复杂繁琐,但可以制作出更多、更复杂样式的按钮图样。</p><p>什么是9-patch格式呢?</p><p>9-patch格式,是在Android中特有的一种PNG图片格式,以&quot;***.9.png&quot;结尾。此种格式的图片定义了可以伸缩拉伸的区域和文字显示区域,这样,就可以在Android开发中对非矢量图进行拉伸而仍然保持美观。如果使用位图而没有经过9-patch处理的话,效果就会想第一张截图中的&quot;普通图片背景按钮&quot;那样被无情的拉伸,影响效果。Android中大量用了这种技术,默认的按钮的背景就是用了类似的方法实现的。我们看一下google官方的描述:</p><p><img src="/up_pic/201805/290933595038.gif" title="290933595038.gif" alt="2.gif"/></p><p></p><p>该格式相对于一般PNG图片来说,多了上下左右各一条1px的黑线。左、上黑线隔开了9个格子,当中一个格子(见上图Strechable Area区域)声明为可以进行拉伸。右、下两条黑线所定义的Paddingbox区域是在该图片当做背景时,能够在图片上填写文字的区域。每条黑线都是可以不连续的,这样就可以定义出很多自动拉伸的规格。Android sdk中提供了设置的工具,启动命令位于:$ANDROID_SDK/tools/draw9patch.bat,使用它对于原始PNG进行设置9-patch格式,非常方便,如下图。</p><p> <img src="/up_pic/201805/290934106028.gif" title="290934106028.gif" alt="3.gif"/> <img src="/up_pic/201805/290934375897.gif" title="290934375897.gif" alt="31.gif"/></p><p>draw9patch工具的右侧是能够看到各方向拉伸后的效果图,你所要做的就是在图上最外侧一圈1px宽的像素上涂黑线。</p><p>注意,在draw9patch.bat第一次运行时,sdk2.2版本上会报错:java.lang.NoClassDefFoundError:org/jdesktop/swingworker/SwingWorker。需要下载swing-worker-1.1.jar,放入$android_sdk/tools/lib路径下,成功运行。</p><p>此种方法实现的步骤如下。</p><p>(a) 使用draw9patch.bat作完图片后,得到两张按钮背景,分别是正常和按下状态下的,命名为bg_btn.9.png和bg_btn_2.9.png。</p><p>(b) 编写图片使用描述文件bg_9patchbutton.xml。</p><pre class="brush:as3;toolbar:false">//inbg_9patchbutton.xml &lt;?xmlversion=&quot;1.0&quot;encoding=&quot;UTF-8&quot;?&gt; &lt;selectorxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &lt;itemandroid:state_pressed=&quot;true&quot; android:drawable=&quot;@drawable/bg_btn_2&quot;/&gt; &lt;itemandroid:state_focused=&quot;true&quot; android:drawable=&quot;@drawable/bg_btn_2&quot;/&gt; &lt;itemandroid:drawable=&quot;@drawable/bg_btn&quot;/&gt; &lt;/selector&gt;</pre><p><br/></p><p>(c) 在界面定义文件 layout/main.xml中添加Button、ImageButton按钮控件的定义。Button、ImageButton都是可以使用背景属性的。</p><pre class="brush:as3;toolbar:false">&lt;Button android:layout_width=&quot;120dip&quot; android:layout_height=&quot;40dip&quot; android:text=&quot;9-patch图片背景按钮&quot; android:background=&quot;@drawable/bg_9patchbutton&quot;/&gt; &lt;Button android:layout_width=&quot;200dip&quot; android:layout_height=&quot;40dip&quot; android:text=&quot;9-patch图片背景按钮&quot; android:background=&quot;@drawable/bg_9patchbutton&quot;/&gt; &lt;Button android:layout_width=&quot;120dip&quot; android:layout_height=&quot;80dip&quot; android:text=&quot;9-patch图片背景按钮&quot; android:background=&quot;@drawable/bg_9patchbutton&quot;/&gt; &lt;ImageButton android:layout_width=&quot;120dip&quot; android:layout_height=&quot;40dip&quot; android:src=&quot;@drawable/bg_9patchbutton&quot; android:scaleType=&quot;fitXY&quot; android:background=&quot;@android:color/transparent&quot;/&gt;</pre><p><br/></p><p>以上2种实现按钮的美化,都是标准的矩形按钮为基础。在一些应用中我们可以看到漂亮的自定义形状的异形按钮,这是怎么实现的呢?经过一番研究和实践,找出了一种方便的方法,就是使用ImageButton加上9-patch就可以实现漂亮的自动延伸效果。</p><p></p><p>3. 自定义形状、颜色、图样的按钮的实现</p><p>步骤如下。</p><p>(a) 设计一张自定义形状风格背景的图片,如下图。</p><p><img src="/up_pic/201805/290935097184.gif" title="290935097184.gif" alt="4.gif"/></p><p>(b) 未点击和按下后的状态各做一张,形成一套图片,如下图。</p><p><img src="/up_pic/201805/290935161656.gif" title="290935161656.gif" alt="5.gif"/></p><p>(c) 创建和编写按钮不同状态的图片使用描述文件drawable/ib_forward.xml</p><pre class="brush:as3;toolbar:false">//ib_forward.xml &lt;?xmlversion=&quot;1.0&quot;encoding=&quot;UTF-8&quot;?&gt; &lt;selectorxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &lt;itemandroid:state_pressed=&quot;true&quot; android:drawable=&quot;@drawable/forward2&quot;/&gt; &lt;itemandroid:state_focused=&quot;true&quot; android:drawable=&quot;@drawable/forward2&quot;/&gt; &lt;itemandroid:drawable=&quot;@drawable/forward&quot;/&gt; &lt;/selector&gt;</pre><p><br/></p><p>(d) 在界面定义文件 layout/main.xml中添加ImageButton按钮控件的定义。</p><pre class="brush:as3;toolbar:false">//inlayout/main.xml &lt;ImageButton android:layout_width=&quot;80dip&quot; android:layout_height=&quot;40dip&quot; android:src=&quot;@drawable/ib_forword&quot; android:scaleType=&quot;fitXY&quot; android:background=&quot;@android:color/transparent&quot;/&gt;</pre>
返回顶部 留言