????UI在APP設(shè)計(jì)切圖的時(shí)候，總是會(huì)遇到開發(fā)要求切.9圖，可是什么是.9圖，.0圖用來干什么，什么時(shí)候該切.9圖以及.9圖該怎么切呢？讓我們一起來看看吧。
· 什么是.9圖？
????.9.PNG是.9圖的全稱，通常我們親切的稱它為.9圖。來看看官方是怎么解釋的：
????.9.PNG是安卓開發(fā)里面的一種特殊的圖片，這種格式的圖片通過ADT自帶的編輯工具生成，使用九宮格切分的方法，使圖片支持在android 環(huán)境下的自適應(yīng)展示。
????這么說大家可能不是很明白，我們來舉一些例子了解一下吧。
????在日常看到.9圖最頻繁使用的應(yīng)該要算是像這樣的聊天氣泡了，聊天氣泡里可能包含一個(gè)字符，或是一句話，一段話，而且根據(jù)聊天內(nèi)容長短寬高不一，像這樣的聊天氣泡應(yīng)該怎么切圖呢？
????如果我們只是正常的切圖，那么來看看會(huì)發(fā)生什么吧。
????可以看到，如果我們切一張圖，圖片拉伸以后圓角和小三角都已經(jīng)變形，這是UI設(shè)計(jì)師萬萬不能接受的效果。
????如果可以只拉伸圖上橙色區(qū)域的話是不是就達(dá)到了我們想要的效果呢，所以，就輪到.9圖登場(chǎng)了。
· 如何制作.9圖？
????之前說到，.9.PNG是使圖片支持在android 環(huán)境下的自適應(yīng)展示。既然是在andriod下專屬的圖片格式，我們的android工程師們當(dāng)然是有辦法制作.9.PNG的了。而UI的萌妹子們要做的，就是輸出一張最小邊界情況的圖給到工程師就好了。
????依然拿剛才的聊天氣泡舉例。 我們只需要輸出一張單字符的聊天氣泡給工程師并命名為.9.png就好了，因?yàn)榱奶熳钚∵吔绲那闆r就是發(fā)一個(gè)字符，比如說單獨(dú)發(fā)出一個(gè)：！。
切片：
命名： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?chart_bg.9.png
劃重點(diǎn)：
1.一張最小邊界情況的切片；
2.命名時(shí)后綴名改為.9.png。
????雖然andriod開發(fā)工程師可以自己制作.9.PNG，但是始終堅(jiān)持讓UI出.9.png作為UI設(shè)計(jì)師該怎么辦呢？別慌，依然有辦法的。
????打開剛才的切片，用1px的純黑色線條在邊緣標(biāo)記出可拉伸區(qū)域，并命名為XXX_XXX.9.png,就完成拉。
劃重點(diǎn)：
1.線條為1px；
2.手繪的黑線拉伸區(qū)必須是#000000，透明度100%，并且圖像四邊不能出現(xiàn)半透明像素；
3. 存儲(chǔ)為web所用格式，選擇png-24，儲(chǔ)存時(shí)手動(dòng)將后綴名改為.9.png
· 什么情況下使用.9圖？
????除了聊天氣泡，還有很多情況下都可以使用.9圖，大家不要只局限于氣泡制作哦，下面給大家一些參考吧。
????類似于上面的這些統(tǒng)一樣式，不同大小的圖，我們都可以用.9圖進(jìn)行處理。使用了*.9.png圖片技術(shù)后，我們就不需要每一個(gè)尺寸都出一個(gè)切片了，只需要采用一套界面切圖去適配不同的分辨率，而且大幅減少安裝包的大小。而且這樣程序不需要專門做處理的就可以實(shí)現(xiàn)其拉伸，也減少了代碼量和開發(fā)工作量。
· 番外篇
Android工程師如何利用png切片制作.9圖？
1.將png文件拖入項(xiàng)目的drawable中；
2.在圖片上點(diǎn)擊右鍵點(diǎn)擊Create 9-patch file…,然后直接點(diǎn)保存，你會(huì)看到drwable中多出一個(gè)后綴名名為.9.png的圖片（當(dāng)然你可以直接手動(dòng)修改后綴名再放入drwable中，達(dá)到的效果是一樣的）。
3.點(diǎn)開創(chuàng)建好的點(diǎn)9圖片。然后左鍵點(diǎn)擊，繪制你需要改變的地方，也就是可以拉伸的部分。這時(shí)你就會(huì)看到黑線和右邊拉伸后的效果了。
????由于android工程師在制作.9圖的時(shí)候可以實(shí)時(shí)查看圖片拉伸后的效果，這樣可以達(dá)到最佳效果，所以建議UI設(shè)計(jì)師們直接給切片到工程師，工程師自己動(dòng)手做一下.9圖哦，但是要記得切拉伸前最小尺寸的圖。
·?不使用.9圖的IOS開發(fā)工程師們又是怎么實(shí)現(xiàn)適配的呢？
????之前說到.9圖是使圖片支持在android 環(huán)境下的自適應(yīng)展示，那么IOS怎么辦呢？像這樣類型的圖片我們又該怎么給IOS切片呢？
????其實(shí)依然和.9圖的原理相似，都是選取某一塊區(qū)域拉伸。將圖片拖入，點(diǎn)擊圖片，然后點(diǎn)擊Start Slicing或者是在右邊Slices選取模式，就可以開始調(diào)整可拉伸區(qū)域了。
????所以IOS的切圖也切拉伸前最小尺寸的圖就可以了，不需要改后綴名。
