Android應(yīng)用開發(fā)筆記(10)：制作自定義背景Button按鈕、自定義形狀Button的全攻略

software1 2011-03-15

展開全文

在Android開發(fā)應(yīng)用中，默認(rèn)的Button是由系統(tǒng)渲染和管理大小的。而我們看到的成功的移動(dòng)應(yīng)用，都是有著酷炫的外觀和使用體驗(yàn)的。因此，我們?cè)陂_發(fā)產(chǎn)品的時(shí)候，需要對(duì)默認(rèn)按鈕進(jìn)行美化。在本篇里，筆者結(jié)合在應(yīng)用開發(fā)中的經(jīng) 驗(yàn)，探討一下自定義背景的按鈕、自定義形狀按鈕的實(shí)現(xiàn)方法。

首先看實(shí)現(xiàn)效果截圖：

自定義背景的按鈕目前有2種方式實(shí)現(xiàn)，矢量和位圖。

1. 矢量圖形繪制的方式

矢量圖形繪制的方式實(shí)現(xiàn)簡(jiǎn)單，適合對(duì)于按鈕形狀和圖案要求不高的場(chǎng)合。步驟如下：

(a) 使用xml定義一個(gè)圓角矩形，外圍輪廓線實(shí)線、內(nèi)填充漸變色，xml代碼如下。

view plain copy to clipboard print ?

//bg_alibuybutton_default.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas./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 android: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，內(nèi)容相同，就是漸變顏色不同，用于按鈕按下后的背景變化效果。

(b) 定義按鈕按下后的效果變化描述文件drawable/bg_alibuybutton.xml，代碼如下。

view plain copy to clipboard print ?

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas./apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/bg_alibuybutton_pressed" />
<item android:state_focused="true"
android:drawable="@drawable/bg_alibuybutton_selected" />
<item android:drawable="@drawable/bg_alibuybutton_default" />
</selector>

view plain copy to clipboard print ?

<Button
android:layout_width="120dip"
android:layout_height="40dip"
android:text="矢量背景按鈕" android:background="@drawable/bg_alibuybutton" />

這樣，自定義背景的按鈕就可以使用了，在實(shí)現(xiàn)onClick方法后就可以響應(yīng)操作。

2. 9-patch圖片背景方式

此種方法相對(duì)復(fù)雜繁瑣，但可以制作出更多、更復(fù)雜樣式的按鈕圖樣。

什么是9-patch格式呢？

9-patch格式，是在Android中特有的一種PNG圖片格式，以"***.9.png"結(jié)尾。此種格式的圖片定義了可以伸縮拉伸的區(qū)域和文字顯示區(qū)域，這樣，就可以在Android開發(fā)中對(duì)非矢量圖進(jìn)行拉伸而仍然保持美觀。如果使用位圖而沒有經(jīng)過(guò)9-patch處理的話，效果就會(huì)想第一張截圖中的“普通圖片背景按鈕”那樣被無(wú)情的拉伸，影響效果。Android中大量用了這種技術(shù)，默認(rèn)的按鈕的背景就是用了類似的方法實(shí)現(xiàn)的。我們看一下 google官方的描述：

該格式相對(duì)于一般PNG圖片來(lái)說(shuō)，多了上下左右各一條1px的黑線。左、上黑線隔開了9個(gè)格子，當(dāng)中一個(gè)格子(見上圖Strechable Area區(qū)域)聲明為可以進(jìn)行拉伸。右、下兩條黑線所定義的Paddingbox區(qū)域是在該圖片當(dāng)做背景時(shí)，能夠在圖片上填寫文字的區(qū)域。每條黑線都是可以不連續(xù)的，這樣就可以定義出很多自動(dòng)拉伸的規(guī)格。Android sdk中提供了設(shè)置的工具，啟動(dòng)命令位于：$ANDROID_SDK/tools/draw9patch.bat，使用它對(duì)于原始PNG進(jìn)行設(shè)置9- patch格式，非常方便，如下圖。

draw9patch工具的右側(cè)是能夠看到各方向拉伸后的效果圖，你所要做的就是在圖上最外側(cè)一圈1px寬的像素上涂黑線。

注意，在draw9patch.bat第一次運(yùn)行時(shí)，sdk2.2版本上會(huì)報(bào)錯(cuò)：java.lang.NoClassDefFoundError:org/jdesktop/swingworker/SwingWorker。需要下載swing-worker-1.1.jar ，放入$android_sdk/tools/lib路徑下，成功運(yùn)行。

此種方法實(shí)現(xiàn)的步驟如下。

(a) 使用draw9patch.bat作完圖片后，得到兩張按鈕背景，分別是正常和按下狀態(tài)下的，命名為bg_btn.9.png和bg_btn_2.9.png。

(b) 編寫圖片使用描述文件bg_9patchbutton.xml。

view plain copy to clipboard print ?

// in bg_9patchbutton.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas./apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/bg_btn_2" />
<item android:state_focused="true"
android:drawable="@drawable/bg_btn_2" />
<item android:drawable="@drawable/bg_btn" />
</selector>

view plain copy to clipboard print ?

<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種實(shí)現(xiàn)按鈕的美化，都是標(biāo)準(zhǔn)的矩形按鈕為基礎(chǔ)。在一些應(yīng)用中我們可以看到漂亮的自定義形狀的異形按鈕，這是怎么實(shí)現(xiàn)的呢？經(jīng)過(guò)一番研究和實(shí)踐，找出了一種方便的方法，就是使用ImageButton加上9-patch就可以實(shí)現(xiàn)漂亮的自動(dòng)延伸效果。

3. 自定義形狀、顏色、圖樣的按鈕的實(shí)現(xiàn)

步驟如下。

(a) 設(shè)計(jì)一張自定義形狀風(fēng)格背景的圖片，如下圖。

(b) 未點(diǎn)擊和按下后的狀態(tài)各做一張，形成一套圖片，如下圖。

forward.png forward2.png

view plain copy to clipboard print ?

// ib_forward.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas./apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/forward2" />
<item android:state_focused="true"
android:drawable="@drawable/forward2" />
<item android:drawable="@drawable/forward" />
</selector>

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

view plain copy to clipboard print ?

// in layout/main.xml
<ImageButton
android:layout_width="80dip"
android:layout_height="40dip"
android:src="@drawable/ib_forword"
android:scaleType="fitXY"
android:background="@android:color/transparent" />

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： software1 > 《Button按鈕》

舉報(bào)/認(rèn)領(lǐng)