一、點(diǎn)九圖的介紹

PNG，是一種非失真性壓縮位圖圖形文件格式。PNG格式是非失真性壓縮的，允許使用類似于GIF格式的調(diào)色板技術(shù)，支持真彩色圖像，并具備阿爾法通道（半透明）等特性。PNG的的英文名稱為Portable?Network?Graphics，即便攜式網(wǎng)絡(luò)圖片。另有說法是名稱來源于非官方的“PNG?is?Not?GIF”。

在這里不過多的討論P(yáng)NG格式的定義問題，但是.9.png確實(shí)是標(biāo)準(zhǔn)的PNG格式，只是在最外面一圈額外增加1px的邊框，這個(gè)1px的邊框就是用來定義圖片中可擴(kuò)展的和靜態(tài)不變的區(qū)域。特別說明，left和top邊框中交叉部分是可拉伸部分，未選中部分是靜態(tài)區(qū)域部分，right和bottom邊框中交叉部分則是內(nèi)容部分（變相的相當(dāng)于定義看一個(gè)內(nèi)邊距，神似padding功能，后面我會(huì)單獨(dú)介紹一下），這個(gè)參數(shù)是可選的,如下圖，左圖是顯示top和left拉伸區(qū)域，右圖是顯示right和bottom的內(nèi)容區(qū)域：

在Android中以9.png格式的圖片為背景，則能夠自定義拉伸而不失真，比如系統(tǒng)的Button就是一個(gè)典型的例子，不過最常見的我也最喜歡還是微信的對話框，我們拿它來舉例看看效果：

從上圖可以看出，使用點(diǎn)九圖的話，其細(xì)節(jié)可以盡量保留，怎么拉伸都不會(huì)變形失真，怎么樣？看到這里各位看官明白了嗎？

其實(shí)呢，無論是left和top，還是right和bottom都是把圖片分成9塊(邊角四塊是不能縮放的，其他的四塊則是允許縮放的)，看下圖數(shù)一數(shù)，123456789，正好九塊，所以叫做9.png。

二、如何使用NinePng九圖神器（一款安卓App）制作9.png圖片？

前面已經(jīng)了解到9.png格式的工作方式，下面我們使用這款專門處理點(diǎn)九圖的App（不了解的讀者可以到www.ninepng.cn網(wǎng)站去了解一下）來制作.9.png圖片。

第一步：準(zhǔn)備要拉伸的圖片,并傳輸圖片到此App上。

非常小的一張圖片，這張圖片有可能是在PC電腦上，剛用Photoshop創(chuàng)作完成，那么我就以此圖片為例來講解。

接下來我們需要把這張圖片導(dǎo)入到手機(jī)上。

首先，在App中的設(shè)置界面打開【W(wǎng)ifi共享】，會(huì)得到一個(gè)IP地址

然后，在電腦上使用瀏覽器（推薦使用Chrome瀏覽器）訪問這個(gè)IP地址（注意：必須是連接同一個(gè)路由器的電腦，可以是有線的連接，也可以是無線的連接）

這時(shí)，你就可以在電腦端直接上傳圖片了。點(diǎn)擊【上傳】按鈕，然后上傳你想要上傳的圖片即可。

App中會(huì)同步接收并顯示所上傳的圖片

第二步：制作.9.png圖片。

在App中點(diǎn)擊chat_bg這張圖，這時(shí)底部會(huì)出現(xiàn)一個(gè)菜單，如下左圖，然后選擇第一項(xiàng)——編輯，會(huì)進(jìn)入到一個(gè)編輯點(diǎn)九圖的界面，如下右圖所示：

看到界面的上下左右各有一個(gè)耳朵形狀的按鈕了沒有？點(diǎn)開它，然后開始拖動(dòng)到合適的位置，上邊和下邊的按鈕可以同時(shí)操作，同樣左右也是。

這樣，我們的left和top的拉伸區(qū)域就定義好了，right和bottom的內(nèi)容區(qū)域也定義好了

然后，我們還需要把制作好的點(diǎn)九圖保存下來。點(diǎn)擊右上角的按鈕，彈出一個(gè)菜單界面，點(diǎn)擊保存按鈕，保存為chang_bg.9.png。

如果你想看看你制作的點(diǎn)九圖是什么效果，那么就點(diǎn)擊右上角的三角形預(yù)覽按鈕，將會(huì)進(jìn)入預(yù)覽界面，并可以點(diǎn)擊分別設(shè)置不同的內(nèi)容和效果，比如我們一開始的效果。如果想增加一種分辨率的模擬器，可以點(diǎn)擊右上角的“+”按鈕。

如果還需要調(diào)整界面，那么就回到上一個(gè)界面繼續(xù)重新拖動(dòng)修改即可。

第三步，傳給開發(fā)人員

剛才已經(jīng)打開了【wifi共享】，會(huì)得到一個(gè)IP地址，如果還沒打開，可以在【設(shè)置】界面點(diǎn)擊打開上部的【W(wǎng)ifi共享】。如果要傳給開發(fā)人員的話，請讓開發(fā)人員在電腦上用瀏覽器（推薦用Chrome瀏覽器）訪問這個(gè)IP地址（注意：必須是同一個(gè)局域網(wǎng)下，連接相同的路由器才行哦~），然后找到該圖片，并下載保存在其電腦上。

這樣開發(fā)人員就可以立即使用“剛出爐”的“熱騰騰”的點(diǎn)九圖了。

三、制作.9.png的高級技巧

對于點(diǎn)九圖了解不深的人來說，這可以算是高級技巧，那就是：拉伸區(qū)域，可以不是連續(xù)的，可以不止一塊，而且是和自定義的邊框線的長度成正比。

點(diǎn)擊耳朵按鈕彈出的頁面上邊緣有個(gè)“+”號按鈕，點(diǎn)擊即增加一個(gè)，最多可以增加三個(gè)，直接上圖說明：

其實(shí)，增加黑線僅僅是為了讓我們觀看更容易，在程序編譯的時(shí)候，會(huì)自動(dòng)把這些黑線代表的信息整合進(jìn)png圖片中。如果不信，你可以隨便找一個(gè)APK文件，把.apk改成.zip，然后解壓縮，在查看res/drawable相關(guān)目錄下的圖片文件。不過也有的仍然保留了四周的黑線。