點九圖簡單介紹及制作教程

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

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

不過我也真是為自己的文筆而感到拙計......

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

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

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

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

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

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

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

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

那么，點九圖如何制作呢？

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

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

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

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

最后保存時注意”.9.png“

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

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

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

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