你真的了解android的點九圖嗎？讀完這一篇，再來回答這個問題，廢話少說，先看看本文要講的主要内容：
點九圖簡介
下圖是一張android系統中的典型點九切圖，先來了解下點九圖的結構，文章接下來
還會對每個結構做詳細的介紹。
制作點九圖有四個硬性要求，隻要滿足這四點，點九圖就可以被正确識别。
要求一:
名稱格式必須為：檔案名稱.9.png。
要求二:
上下左右各留有1px的辨別線區，此區内不能有半透明像素（特别注意：切圖若有投影，不要洩漏到辨別線區）。
要求三:
伸縮辨別線與内間距辨別線為不透明的純黑色(#000000)，光學辨別線為不透明的純紅色(#ff0000)。
要求四:
點九圖的特殊結構會導緻其4個頂角處成為“絕對禁區”，這4個1像素×1像素的區域内不能有任何内容。
伸縮線詳解
伸縮線标注了切圖内的拉伸區域/收縮區域。一般來說點九圖越小越好，是以通常切圖尺寸都要小于控件尺寸，但這并不意味着不會出現切圖尺寸大于控件尺寸的情況，在這種情況下，切圖會根據伸縮線來進行縮小。
下圖中，左側為測試所用的三色點九圖，右側為測試程式的展示效果，從實驗的結果得到三個結論：
1.切圖拉伸時，僅伸縮區會被拉伸。
2.切圖收縮時，首先伸縮區會被收縮。
3.當伸縮區縮小到0之後，切圖整體繼續收縮（Android 4.3之前表現不同，谷歌公布的Android系統9月份的月度版本分布圖資料顯示4.3之前的機型占比不足7%，是以可忽略此情況）。
伸縮線支援多段标注，可以同時拉伸/縮放切圖中的多個不相鄰區域。從下圖的實驗結果可以得出一個結論：
每個區域的拉伸/放縮長度與本區的伸縮辨別線長度成正比。
縱向的伸縮辨別線原理和橫向伸縮辨別線的原理一緻，就不再贅述。
内間距線詳解
關于内間距線，很多人有所誤解。因為内間距線所标注的是控件的内間距，而不是點九圖的内間距，是以，内間距線跟點九圖本身并沒有直接的聯系。
觀察下面的點九圖，這個點九圖的橫向伸縮線與橫向内間距線沒有重疊。那麼，這張圖可以正常顯示嗎？
如下圖所示，将點九圖設定為TextView的背景，首先，切圖的拉伸區是正确的，再觀察右側的标注圖，可以得出如下結論：
1.橫向内間距線的左端到切圖左端的距離為控件的左側内間距值；
2.橫向内間距線的右端到切圖右端的距離為控件的右側内間距值。
（縱向内間距線原理同上）
雖然内間距線也可以畫為多段，但是系統隻關心最左端和最右端的位置，是以多段内間距線是沒有任何意義的。
點九圖中的内間距線，僅在代碼中沒有指定Padding屬性的時候才會生效，但這不代表可以忽略點九圖中的内間距線。切圖都會被多次複用，很可能因為開發的疏忽在某些布局中忘記指定Padding屬性，點九圖中的内間距線是切圖被正确顯示的最後一道保障。
光學邊界線詳解
Optical bounds layout(光學邊界布局)是在Android 4.3（Api level 18）中引入的一種新的布局對齊方式。
光學邊界也叫做視覺邊界，下圖是一個帶有投影的藍色按鈕切圖。在視覺上，此圖形的外輪廓是藍色按鈕所占區域，而不是切圖實際所占區域。光學邊界線标注的位置為投影的位置，表示此區域在視覺上不可察覺。
光學邊界會導緻布局結構複雜化，而且可以實作的視覺效果也有限，大家稍作了解就好，技術成熟的時候再深究不遲。
下圖中，左側是開啟光學邊界的效果，右側是未開啟光學邊界的效果。
官方工具：draw9patch
為了友善大家檢測點九圖是否正确，我将谷歌在開發平台中提供的draw9patch工具進行了打包：
1.包括Mac和Win兩個版本。
2.綠色軟體，無需安裝。
3.自帶Java環境，輕按兩下直接運作。
4.無廣告、無病毒、永久免費。
draw9patch工具使用很簡單，就不多做講解了。
在photoshop中做9PNG圖
安卓app啟動圖打包變形問題處理;
.9.png
相信很多UI設計師應該和我一樣遇到過這種APP打包啟動圖變形的問題，很多人都是交給前端工程師調控，但是并不是所有的人都會處理這種情況。
啟動圖變形，使用者和老闆看到的第一眼是什麼感覺，這設計的什麼玩意，還能變形感覺設計師很不專業，這種東西怎麼講，你沒辦法，隻可以自己默默承受；
但是
如果作為UI設計師的我們可以直接給前端.9.png圖檔，就可以解決了這個啟動圖變形的問題，我也是探索了好久，每次懷着激動的心情做好3張自己以為做好的.9.png圖檔給前端時，一啟動，就會給我重重的一下，還是變形，但是我一直都在尋找方法，直到這兩天，我終于研究出來這個邏輯和規範，廢話不多說了，直接和大家分享一下我自己的想法：
就拿我最近做的一款APP—崇禮啟動圖來舉例
1.需要先準備好需要打包的3張啟動圖尺寸，分别是：
480*762px；
720*1242px；
1080*1882px
先拿480*762這個尺寸進行.9.png圖檔制作方法講解
2.将480*762啟動圖拖入PS中
3.讓目前圖層上下左右各留1透明像素，可以說一下我自己的做法：
3.1ctrl+a全選：作用是選中目前圖層選區
3.2執行菜單欄—選擇—修改—收縮—1px—勾選應用畫布邊緣效果—點選确定：作用是上下左右各收縮了1像素
3.3shift+i反向：作用是選中外面一圈寬度為1px的範圍
3.4.直接delete，就做好了目前圖層邊緣自帶1px的透明像素
目前圖層大小就可以了解為478*760px，上下左右各存在1px的透明像素
4.開始要在透明像素上做文章了，看好我的表演
首先要了解一下這個透明像素是幹嘛用的？
主要是來繪制黑線；
這個黑線是幹嘛用的？
具體我也不知道，但是想做.9.png就得繪制黑線；
左邊黑線繪制範圍：可以橫向拉伸畫布的區域（簡單了解就是空白的區域，你怎麼拉伸都不會變形的區域）進行繪制寬度為1px，高度為npx的黑線；
上邊黑線繪制範圍：可以縱向拉伸畫布的區域 （）進行繪制高度為1px，寬度為npx的黑線；
右邊黑線繪制範圍：除了最上1px透明像素和最下1px透明像素，剩下全部進行繪制寬度為1px，高度為762-1-1=760px的黑線
下邊黑線繪制範圍：除了最左1px透明像素和最右1px透明像素，剩下全部進行繪制高度為1px，寬度為480-1-1=478px的黑線
四個方向繪制的黑線位置怎麼确定？
左側：從上往下:11px是透明像素+1（啟動圖示的底部位置-》目前圖層的頂部位置）是透明像素+1（智語/廣告語的頂部位置-》啟動圖示的底部位置）是黑線+1（智語/廣告語的頂部位置-》智語/廣告語的底部位置）是透明像素+1（智語/廣告語的底部位置-》目前圖層的底部位置 ）是透明像素+11px是透明像素
直接上圖，直覺明了
整體左側效果：
上面：從左到右：11px是透明像素+（廣告語左側或者啟動圖示左側（誰靠左邊近就以誰為标準）-》目前圖層左側位置）1px是黑線+剩餘長度*1px是透明像素
直接上圖，直覺明了
右側：從上到下：11px是透明像素+1（目前圖層頂部-》目前圖層底部）1px是黑線+11px是透明像素
直接上圖，直覺明了：
下面：從左到右：11px是透明像素+（目前圖層左側-》目前圖層右側）1px是黑線+1*1px是透明像素
上圖
黑線怎麼繪制呢？
PS英文輸入法按一下鍵盤上的D，恢複預設的前後背景色，前景色為黑色就ok了；
選框框選透明像素，alt+delete填充前景色就填充上黑色了；
4.1繪制參考線，這是必須的，可以嚴格的劃分出來準備繪制黑線和透明像素的區域範圍
需要在哪裡進行繪制呢？
先上圖讓大家看一下這種樣闆
左上角，左下角，右上角，右下角需要各留1px透明像素不可以動，這個非常關鍵
繪制完成上下左右的黑線後，将該圖層三大鍵+s導出為（xxx.9.png），要注意前面的xxx.9是目前圖檔的名字（是圖檔的名稱），後面的png是目前圖檔的字尾名（是圖檔的屬性），圖檔屬性還是正常的png圖檔，但是名字是xxx.9
最後總結一下重點：
1.目前圖層左上角，左下角，右上角，右下角一直都會有1*1px的透明像素
2.黑線繪制最好就用選區繪制，alt+delete填充前景色黑色，黑色一定是純黑色：#000
3.上黑線隻存在左側部分，左側開始位置為目前圖層最左側，左側結束位置為廣告語或者是啟動圖示最左側（具體看誰距離左側圖層更近）
4.左黑線存在啟動圖示以下位置到廣告語以上位置
5.下黑線和右黑線隻有兩頭是1*1px的透明像素，剩下的都是黑線
6.導出圖檔一定是xxx.9.png
同樣的道理做好7201242px和10801882px就好了；
把三張圖檔（480.9.png/720.9.png/1080.9.png）傳遞給前端就OK了!