點(diǎn)九圖簡(jiǎn)單介紹及制作教程

最近遇到一個(gè)尺寸上的問(wèn)題，但我發(fā)現(xiàn)我根本無(wú)法一次性把這么復(fù)雜的一件事講清楚......(。??)ノ 那就先來(lái)講講點(diǎn)九圖吧~~~~O(∩_∩)O哈哈~

為什么要講點(diǎn)九圖？當(dāng)然是應(yīng)為跟我之后要講的事有關(guān)系啦~~~現(xiàn)在不都流行這種伏筆嗎？......(*￣rǒ￣)

不過(guò)我也真是為自己的文筆而感到拙計(jì)......

=================================華麗的分割線==================================

點(diǎn)九圖，是Android開發(fā)中用到的一種特殊格式的圖片，文件名以”.9.png“結(jié)尾。這種圖片能告訴程序，圖像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。運(yùn)用點(diǎn)九圖可以保證圖片在不模糊變形的前提下做到自適應(yīng)。點(diǎn)九圖常用于對(duì)話框背景圖片中。

這是我截屏自手機(jī)QQ一組聊天對(duì)話框，可以看出，不同兩條消息字?jǐn)?shù)不同，長(zhǎng)度也不同，但它們采用了相同的背景樣式，這個(gè)背景樣式其實(shí)是同一張圖片，用到的就是點(diǎn)九圖的方式。

相較于普通截圖方式，點(diǎn)九圖最為明顯的區(qū)別就是圖片不保留內(nèi)容顯示區(qū)域且自帶一圈不成規(guī)律的黑邊。正是這圈黑邊提供了點(diǎn)九圖的各個(gè)屬性以適應(yīng)各種情況。

簡(jiǎn)單點(diǎn)來(lái)說(shuō)，1、2部分規(guī)定了圖像的可拉伸部分，而3、4部分規(guī)定了圖像的內(nèi)容區(qū)域。當(dāng)實(shí)際程序中設(shè)定了對(duì)話框的寬高時(shí)，1、2部分就會(huì)被拉伸成所需要的高和寬，呈現(xiàn)出于設(shè)計(jì)稿一樣的視覺(jué)效果。

那么內(nèi)容區(qū)域是干嘛的呢？

內(nèi)容區(qū)域規(guī)定了可編輯區(qū)域。例如，對(duì)話框是圓角，文字需要被包裹在其內(nèi)，如果4像3一樣頂?shù)絻杀?，顯示的效果會(huì)是如下圖。

這里文字是垂直居中顯示，水平靠左顯示。為了讓文字被輸入框完整包裹，縮短4的黑線到圓角以內(nèi)，以達(dá)到顯示效果的正常。

那么，點(diǎn)九圖如何制作呢？

首先用PS打開一張切好的普通截圖。用選區(qū)工具選取盡可能多的拉升部分加以刪除（但要注意必須要留出至少1PX拉伸區(qū)域，以便能加以拉伸。）

然后將這些內(nèi)容拼接成一個(gè)完整的整體。

打開 圖像>畫布大小，寬度和高度分別添加2px,定位選定中心定位。

用鉛筆（黑色，1px），在圖像最外邊框描點(diǎn)。

最后保存時(shí)注意”.9.png“

講的有點(diǎn)亂，總結(jié)下：

點(diǎn)九圖就是Android上的一種可被拉升的圖片。（IOS不需要）格式以.9.png結(jié)尾。

圖像用邊上純黑色1PX像素（透明底上的純黑，其他都不行。）的邊來(lái)規(guī)定拉伸區(qū)域和內(nèi)容區(qū)域。上邊和左邊為拉升區(qū)域，右邊和下邊為內(nèi)容區(qū)域。(這1PX像素在程序最終輸出的效果中不會(huì)被顯示。)

你也可以用其他一些插件來(lái)實(shí)現(xiàn)點(diǎn)九圖的做法，但原理同我上面的PS做法是一樣的。