Android設(shè)計(jì)中的.9.png

2013-09-10 10:43:21來源:騰訊ISUX作者:

在Android的設(shè)計(jì)過程中,為了適配不同的手機(jī)分辨率,圖片大多需要拉伸或者壓縮,這樣就出現(xiàn)了可以任意調(diào)整大小的一種圖片格式“.9.png”。這種圖片是用于Android開發(fā)的一種特殊的圖片格式,它的好處在于可以用簡單的

在Android的設(shè)計(jì)過程中,為了適配不同的手機(jī)分辨率,圖片大多需要拉伸或者壓縮,這樣就出現(xiàn)了可以任意調(diào)整大小的一種圖片格式“.9.png”。這種圖片是用于Android開發(fā)的一種特殊的圖片格式,它的好處在于可以用簡單的方式把一張圖片中哪些區(qū)域可以拉伸,哪些區(qū)域不可以拉伸設(shè)定好,同時可以把顯示內(nèi)容區(qū)域的位置標(biāo)示清楚。
本文結(jié)合一些具體的例子來看下.9.png的具體用法。

首先看下普通的.png資源與.9.png的資源區(qū)別:
 

Android設(shè)計(jì)中的.9.png

普通的png資源就不多介紹了,可以明顯看到.9.png的外圍是有一些黑色的線條的,那這些線條是用來做什么的呢?我們來看下放大的圖像:

Android設(shè)計(jì)中的.9.png

放大后可以比較明顯的看到上下左右分別有一個像素的黑色線段,這里分別標(biāo)注了序號。簡單來說,序號1和2標(biāo)識了可以拉伸的區(qū)域,序號3和4標(biāo)識了內(nèi)容區(qū)域。當(dāng)設(shè)定了按鈕實(shí)際應(yīng)用的寬和高之后,橫向會拉伸1區(qū)域的像素,縱向會拉伸2區(qū)域的像素。如下圖:

Android設(shè)計(jì)中的.9.png

拉伸的含義應(yīng)該比較容易理解,但是內(nèi)容區(qū)域的標(biāo)注有什么意義呢?我們來看下圖:

Android設(shè)計(jì)中的.9.png

這里程序設(shè)置的文字垂直居中,水平居左的對齊方式。對齊方式是沒有問題的,但是對于這種大圓角同時又有些不規(guī)則邊框的的圖形來說,錯誤的標(biāo)注方式會讓排版看起來很混亂。所以我們需要修正內(nèi)容區(qū)域的線段位置和長度。

Android設(shè)計(jì)中的.9.png

把橫向的內(nèi)容區(qū)域縮短到圓角以內(nèi),縱向的內(nèi)容區(qū)域控制在輸入框的高度以內(nèi),這樣文字就可以正常顯示了。

這里還有一種特殊情況,就是本身是.9.png的資源,但是在修改過程中你希望這張.9.png不能被拉伸(在做皮膚的情況中有可能會遇到),那怎么辦呢?只要把拉伸區(qū)域的點(diǎn)點(diǎn)在透明像素的地方就可以了,這樣拉伸的時候會拉伸透明部分的像素,而不會拉伸圖像本身。如下圖:
Android設(shè)計(jì)中的.9.png
大家可以看到拉伸區(qū)域的黑點(diǎn)是可以不連續(xù)的。

說了半天.9.png的用法,那.9.png如何輸出呢?有很多種方式可以輸出.9.png,比如說用draw9patch.bat這個工具,或者簡單一點(diǎn),用photoshop直接輸出。輸出的方式是先輸出普通的png資源,然后擴(kuò)大畫布大小,上下左右各空出一個像素,再用一個像素的鉛筆工具(顏色選擇純黑色),上下左右分別畫點(diǎn)就可以了,保存的時候注意把后綴修改為.9.png。

有兩點(diǎn)需要特別注意下:

1.最外圍的一圈像素必須要么是純黑色,要么是透明,一點(diǎn)點(diǎn)的半透明的像素都不可以有,比如說99%的黑色或者是1%的投影都不可以有;

2.文件的后綴名必須是.9.png,不能是.png或者是.9.png.png,這樣的命名都會導(dǎo)致編譯失敗。

關(guān)鍵詞:Android

贊助商鏈接: