點(diǎn)九圖咬像，是 Android 開發(fā)中用到的一種特殊格式的圖片吮旅，文件名以”.9.png“命名。這種圖片能告訴開發(fā)萍鲸，圖像哪一部分可以被拉伸闷叉，哪一部分不能被拉伸需要保持原有比列。運(yùn)用點(diǎn)九圖可以保證圖片在不模糊變形的前提下做到自適應(yīng)脊阴。點(diǎn)九圖常用于對(duì)話框和聊天氣泡背景圖片中握侧。

制作點(diǎn)九圖有四個(gè)硬性要求，只要滿足這四點(diǎn)嘿期，點(diǎn)九圖就可以被正確識(shí)別品擎。

要求一:
名稱格式必須為：文件名稱 .9.png。

要求二:
上下左右各留有 1px 的標(biāo)識(shí)線區(qū)备徐，此區(qū)內(nèi)不能有半透明像素（特別注意：切圖若有投影萄传，不要泄漏到標(biāo)識(shí)線區(qū)）。

要求三:
伸縮標(biāo)識(shí)線與內(nèi)間距標(biāo)識(shí)線為不透明的純黑色(#000000)蜜猾，光學(xué)標(biāo)識(shí)線為不透明的純紅色(#ff0000)秀菱。

要求四:
點(diǎn)九圖的特殊結(jié)構(gòu)會(huì)導(dǎo)致其4個(gè)頂角處成為“絕對(duì)禁區(qū)”，這4個(gè)1像素×1像素的區(qū)域內(nèi)不能有任何內(nèi)容蹭睡。

伸縮線詳解

伸縮線標(biāo)注了切圖內(nèi)的拉伸區(qū)域/收縮區(qū)域衍菱。一般來(lái)說(shuō)點(diǎn)九圖越小越好，因此通常切圖尺寸都要小于控件尺寸棠笑，但這并不意味著不會(huì)出現(xiàn)切圖尺寸大于控件尺寸的情況梦碗，在這種情況下，切圖會(huì)根據(jù)伸縮線來(lái)進(jìn)行縮小蓖救。

從實(shí)驗(yàn)的結(jié)果得到三個(gè)結(jié)論：
1.切圖拉伸時(shí)洪规，僅伸縮區(qū)會(huì)被拉伸。
2.切圖收縮時(shí)循捺，首先伸縮區(qū)會(huì)被收縮斩例。
3.當(dāng)伸縮區(qū)縮小到0之后，切圖整體繼續(xù)收縮（Android 4.3之前表現(xiàn)不同从橘，谷歌公布的Android系統(tǒng)9月份的月度版本分布圖數(shù)據(jù)顯示4.3之前的機(jī)型占比不足7%念赶，所以可忽略此情況）础钠。

每個(gè)區(qū)域的拉伸/放縮長(zhǎng)度與本區(qū)的伸縮標(biāo)識(shí)線長(zhǎng)度成正比。

內(nèi)間距線詳解

內(nèi)間距線所標(biāo)注的是控件的內(nèi)間距叉谜，而不是點(diǎn)九圖的內(nèi)間距旗吁，所以，內(nèi)間距線跟點(diǎn)九圖本身并沒有直接的聯(lián)系停局。

1.橫向內(nèi)間距線的左端到切圖左端的距離為控件的左側(cè)內(nèi)間距值很钓；
2.橫向內(nèi)間距線的右端到切圖右端的距離為控件的右側(cè)內(nèi)間距值。

例如董栽，對(duì)話框是圓角码倦，文字需要被包裹在其內(nèi)，如果縱向顯示內(nèi)容區(qū)域頂?shù)絻杀槎迹@示的效果會(huì)是如下圖袁稽。

雖然內(nèi)間距線也可以畫為多段，但是系統(tǒng)只關(guān)心最左端和最右端的位置擒抛，所以多段內(nèi)間距線是沒有任何意義的推汽。

點(diǎn)九圖中的內(nèi)間距線，僅在代碼中沒有指定Padding屬性的時(shí)候才會(huì)生效闻葵，但這不代表可以忽略點(diǎn)九圖中的內(nèi)間距線民泵。我建議沒有特殊要求, 點(diǎn)9圖都帶上內(nèi)邊距線, 避免寫padding具體的數(shù)值.

視覺邊界布局(Optical bounds layout)

是在Android 4.3（Api level 18）中引入的一種新的布局對(duì)齊方式。

光學(xué)邊界也叫做視覺邊界槽畔，下圖是一個(gè)帶有投影的藍(lán)色按鈕切圖栈妆。在視覺上，此圖形的外輪廓是藍(lán)色按鈕所占區(qū)域厢钧，而不是切圖實(shí)際所占區(qū)域鳞尔。光學(xué)邊界線標(biāo)注的位置為投影的位置，表示此區(qū)域在視覺上不可察覺早直。

對(duì)于那些有透明空白邊的控件來(lái)說(shuō)寥假，使用視覺邊界布局在顯示效果上更加整齊。 不然的話霞扬，要保證每個(gè)控件的空白透明邊都是一樣的才能保證內(nèi)容對(duì)齊糕韧。

邊界對(duì)齊了

注意:

1. 最外邊的 1px 線段必須是純黑色(#000000)，一點(diǎn)點(diǎn)的半透明的像素都不可以有喻圃，比如說(shuō)99%的黑色或者是1%的投影都不可以有萤彩。(這1PX 像素在程序最終輸出的效果中不會(huì)被顯示)，光學(xué)標(biāo)識(shí)線為不透明的純紅色(#ff0000)斧拍。
2. 文件的后綴名必須是 .9.png雀扶，不能是 .png 或者是 .9.png.png，這樣的命名都會(huì)導(dǎo)致編譯失敗肆汹。

3. 點(diǎn)九圖的特殊結(jié)構(gòu)會(huì)導(dǎo)致其4個(gè)頂角處成為“絕對(duì)禁區(qū)”愚墓，這 4個(gè) 1像素×1 像素的區(qū)域內(nèi)不能有任何內(nèi)容予权。

   
   
4. 站在安卓開發(fā)的角度, 如果是純色背景建議放在 drawable-nodpi 下, 如果是非純色, 例如有邊框, 按照行業(yè)標(biāo)準(zhǔn)一套圖, 圖簡(jiǎn)便放在 drawable-xxhdpi 下, 在加載背景的時(shí)候系統(tǒng)會(huì)進(jìn)行縮放, 如果有條件多套圖就多套圖。

.9圖其他說(shuō)明

.9圖放置在不同 dpi 文件夾下的效果

注: 若.9圖可以設(shè)置為本身不透明浪册，看實(shí)際需要了扫腺。例如以下就沒有設(shè)置為透明。

.9圖放到 ldpi 的效果

和 xxdpi 的效果

參考

點(diǎn)九切圖你知道怎么切嗎议经？-UI 中國(guó)-專業(yè)用戶體驗(yàn)設(shè)計(jì)平臺(tái)
https://www.ui.cn/detail/285877.html

點(diǎn)九圖完全解析<附官方工具>-UI 中國(guó)-專業(yè)用戶體驗(yàn)設(shè)計(jì)平臺(tái)
https://www.ui.cn/detail/290941.html