解密！點九切圖(.9.png, 9-patch)

2017-10-15

前陣子剛好在進行一款 Android App 的專案設計，客戶指定要提供 .9.png
其實這也是我第一次製作 Android App，所以 .9.png 對我來說也是蠻陌生的（冏）
只有很粗略的概念，但還不曾在專案實作過，趁著這次機會，做了一些功課，分享給大家囉！

大部分在製作網頁或 App 時，常用的圖片格式為 jpg, png, gif, svg
而 .9.png 是給 Android 開發專用的一種特殊檔案格式。
.9.png 是一種可延展的 png 圖檔，「可隨文字大小縮放」的圖片。

笨點分享：
其實我原本以為 .9.png 跟 png 是不一樣的東西，只能用專用的開發工具才能製作或開啟，
後來發現 ps, sketch 也打得開，才知道前面的 .9 只是一個標注啊（恍然大悟）

因為 Android 有太多尺寸了，有些圖（例如：按鈕）就需要根據每個裝置去重出尺寸
這樣不僅費時又麻煩，所以能任意調整尺寸的 .9.png 一舉解決了這個問題。

首先來看一下 .9.png 的真相
例圖：上排為使用前，下排為使用後

在製作時把原本的物件在外圍各加 1px
例如圖片原本是 120x20px ，.9.png 就會是122x22px
用 1px 黑色線段標注可延伸的區域，這邊要注意的是黑色一定要用純黑（#000000）

主要規範：

延伸區域：

左邊及上面是物件延伸區域。

固定區域：

右邊跟下面為內容放置位置。
以例圖來說固定區域的內容就是文字。

應用範例：

接下來就是最重要的輸出了，這次的專案我試了三種方法。

優點：內建檢查模式，可以立即知道自己有無畫錯。
缺點：電腦需安裝 java 的環境。不易操作，畫錯要修改的話，還要用右鍵慢慢點…

最後這東西只被我拿來當作檢查用的工具。

優點：身為設計師，用自己最熟悉的工具繪製就是快啊。
缺點：不知道自己有沒有畫對，要再另外檢查。

優點：全自動就是棒！
缺點：目前好像沒有。

是的！這就是我最終的選擇了 XD
因為在試第一二種方法時，我一直進入鬼打牆的循環，不論怎麼畫，進到檢查工具中都不是我要的樣子…
崩潰之餘心想，網路一定有更聰明的方法吧（心存僥倖）
但還真的被我找到一個可以全自動產生的網站（萬歲！）

要注意的是，如果要輸出 Android 尺寸，在置入 Source graphic 時，
請先準備好最大的尺寸（XXXHDPI）讓它去跑，不然用比較小的尺寸轉出時，圖片會糊糊的。
（沒錯，這是本人踩到的笨坑）

以上，希望對想了解 .9.png 的人有幫助。

1 Comment 1 Like

One comment