我們都知道android平臺(tái)有多種不同的分辨率，很多控件的切圖文件在被放大拉伸后，邊角會(huì)模糊失真。

而且在整個(gè)android開發(fā)的過程中，經(jīng)常會(huì)因?yàn)闆]有處理好切圖文件，使整個(gè)APPUI界面看起來很變扭，因?yàn)楹芏鄨D片都被拉伸和壓縮，比例極不協(xié)調(diào)！

一般負(fù)責(zé)的安卓程序員會(huì)想在drawable-hdpi,ldpi,mdpi下放不同分辨率的圖片，這樣雖然可以有效避免圖片失真，但是這樣一是麻煩而是圖片資源似的整個(gè)項(xiàng)目太大。所以有時(shí)候我們想要是有些圖片可以拉伸而不失真多好啊，這時(shí)候我們就要想起android安卓為我們提供的9.png格式的圖片。

9.png格式的圖片是安卓平臺(tái)上新創(chuàng)的一種被拉伸卻不失真的好辦法。也是解決Android平臺(tái)多種分辨率適配的最佳方案。

我們通俗點(diǎn)來解讀下 什么是“.9png” 中文名字“點(diǎn)九” 哈哈 之前25學(xué)堂也有介紹《APP設(shè)計(jì)和切圖基本知識(shí)點(diǎn)》

.9PNG，其實(shí)相當(dāng)于把一張png圖分成了9個(gè)部分(九宮格)，分別為4個(gè)角，4條邊，以及一個(gè)中間區(qū)域，4個(gè)角是不做拉升的，所以還能一直保持圓角的清晰狀態(tài)，而2條水 平邊和垂直邊分別只做水平和垂直拉伸，所以不會(huì)出現(xiàn)邊會(huì)被拉粗的情況，只有中間用黑線指定的區(qū)域做拉伸。這樣的處理的界面顯示結(jié)果才是最完美的。使用9.png圖片的時(shí)候，你還會(huì)驚奇的發(fā)現(xiàn)一個(gè)幾KB或者幾十KB的圖片，變得非常的小，一般只有幾百個(gè)字節(jié)那么大，?讓安卓系統(tǒng)加載起來當(dāng)然會(huì)更加的流暢。

總的來說：.9png它可以將圖片橫向和縱向隨意進(jìn)行拉伸，而保留像素精細(xì)度、漸變質(zhì)感和圓角的原大小，實(shí)現(xiàn)多分辨率下的完美顯示效果，同時(shí)減少不必要的圖片資源，可謂切圖利器。

第一部分：下面我們來看看安卓切圖前輩的心得：

1、考慮適配Android 各種復(fù)雜的分辨率，如主流的1280X720, 800X480, 640X480,480X320,以及各種非主流分辨率。

2、.9神器

3、PNG24+jpg

4、可交互控件盡量不小于最小可操作尺寸：android規(guī)范是48dp

5、圖片中的可視元素盡量在文件中居中，便于對(duì)齊和標(biāo)注

6、能用代碼實(shí)現(xiàn)盡量避免用圖，如單色色值、漸變、文字、分割線等

7、考慮控件的通用性。

第二部分：站在開發(fā)者的角度去進(jìn)行安卓切圖

在進(jìn)行安卓切圖之前，APPUI設(shè)計(jì)師一定要與安卓程序員進(jìn)行必要的溝通。尋找一種方便的安卓切圖規(guī)則。當(dāng)我們能夠不用.9png的工具切圖的時(shí)候，盡量不用。因?yàn)椤包c(diǎn)九”的制作工具為“draw9patch”用起來比較繁瑣。新手也未必會(huì)切好。

所以，我們盡量在理解了.9png的原理之后，在ps里面直接切就行。然后切好一個(gè)頁(yè)面直接給到程序員實(shí)現(xiàn)。如果程序員套切圖的時(shí)候，發(fā)現(xiàn)不對(duì)的地方也有及時(shí)反饋給你，或者app設(shè)計(jì)師及時(shí)去咨詢。

APP設(shè)計(jì)元素切圖示例圖：

在切圖的過程中，還會(huì)發(fā)現(xiàn)不同的情景，要時(shí)刻想著你要的結(jié)果，通過對(duì)此區(qū)域的仔細(xì)處理，可以更好的為圖片上所承載的內(nèi)容做排版。這樣開發(fā)同學(xué)只要通過一些簡(jiǎn)單的屬性設(shè)定，就可以實(shí)現(xiàn)效果圖上精確的布局。同時(shí)減少不必要的開發(fā)，精簡(jiǎn)代碼，提高產(chǎn)品的性能，積少成多，帶給用戶更好的體驗(yàn)感受。

第三部分：APP設(shè)計(jì)師要學(xué)會(huì)思考，選擇更優(yōu)的安卓切圖方式

這個(gè)只能具體案例具體分析啦。多動(dòng)手吧！

下面是3點(diǎn)算是關(guān)于安卓android APP切圖規(guī)范吧。

盡可能的減小資源的大小，切圖的時(shí)候盡可能減小資源的大小，為產(chǎn)品安裝包瘦身。

1.“點(diǎn)九”圖片拉伸1個(gè)像素與拉伸10個(gè)像素效果上是沒有區(qū)別的，所以盡量縮小圖片的尺寸。

2.當(dāng)我們遇到有紋理的背景或有紋理的按鈕時(shí)，切圖原則為：找到紋理的規(guī)律，用最小的切圖去平鋪，可以想象中圖案疊加的原理。

3、適當(dāng)壓縮圖片質(zhì)量，在單色或沒有過多效果時(shí)可存儲(chǔ)為png8位或索引模式。

第四部分：安卓切圖進(jìn)階部分(.9png制作教程)

1、下載安裝工具：? draw9patch.zip 該工具SDK中自帶。

首先你需要給自己的電腦安裝上java于系統(tǒng)的默認(rèn)目錄下。沒有安裝java的同學(xué)可以在百度搜索：jdk-6u20-windows-i586，安裝包大小80M左右。draw9patch下載地址

然后使用andriod模擬器—android-sdk-windows，打開SDK/tools目錄下的“draw9patch.bat”文件，出現(xiàn)載入窗口：

2.導(dǎo)入并編輯

將png圖片拖拽到該窗口中. ?如下圖，自動(dòng)進(jìn)入編輯界面。圖中介紹了每個(gè)區(qū)域的內(nèi)容及功能注釋。

預(yù)覽右側(cè)的視圖發(fā)現(xiàn)，圖片的邊緣處于普通拉伸狀態(tài)。

3、現(xiàn)在我們?cè)趫D片邊緣點(diǎn)擊左鍵，繪制出黑線，即圖片需要被拉伸的部分。如下圖，對(duì)4條黑線做了注釋。

如果失誤多繪的部分，可按住shift鍵的同時(shí)點(diǎn)擊鼠標(biāo)左鍵擦除)。

4、如圖所見，三種拉伸結(jié)果均已完美顯示，已實(shí)現(xiàn)我們想要的拉伸效果，假設(shè)這是一個(gè)有顯示文字的窗體，那么文字顯示的區(qū)域，程序也會(huì)控制在黑線對(duì)應(yīng)范圍。

解釋： ? ? ? ? ? 1號(hào)黑色條位置向下覆蓋的區(qū)域表示圖片橫向拉伸時(shí)，只拉伸該區(qū)域

2號(hào)黑色條位置向右覆蓋的區(qū)域表示圖片縱向拉伸時(shí)，只拉伸該區(qū)域

3號(hào)黑色條位置向左覆蓋的區(qū)域表示圖片縱向顯示內(nèi)容的區(qū)域

4號(hào)黑色條位置向上覆蓋的區(qū)域表示圖片橫向顯示內(nèi)容的區(qū)域

沒有黑色條的位置覆蓋的區(qū)域是圖片拉伸時(shí)保持不變（比如，如果圖片的四角為弧形的時(shí)候，當(dāng)圖片被任意拉伸時(shí)，四角的弧形都不會(huì)發(fā)生改變）

5、如果失誤多選了部分，可按住shift鍵，點(diǎn)擊鼠標(biāo)左鍵去掉黑色條

6、右邊3個(gè)黑色圖形區(qū)域?yàn)轱@示當(dāng)前拉伸效果

7、選擇好區(qū)域后，點(diǎn)擊左上file-》save 9-path，保存圖片，后綴名為xxx.9.png。

8、解釋：我們可以看見圖片的周圍多了4個(gè)黑色條，不要急這個(gè)圖片還不能用，這就是原始的9.png圖片，當(dāng)我們進(jìn)行下一步操作后，這個(gè)圖片就變得正常了。

更多詳細(xì)的方法點(diǎn)擊：http://blog.csdn.net/pugongying1988/article/details/6938972