Blog updates

Latest news & updates
UI

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

2017-10-15

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

 

什麼是 .9.png 呢?

 

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

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

 

為什麼需要 .9.png?

 

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

 

如何製作 .9.png?

 

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

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

主要規範:

 

延伸區域:


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

 

固定區域:


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

 

應用範例:

 

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

第一種:至 Android 官網下載專用的工具 draw9Patch.bat

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

☞ 下載位置

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

 

第二種:用 PS 或 Sketch 繪製

 

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

 

第三種:全自動產生網站

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

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

☞ 救贖連結在此:全自動產生網站
進去後請選 Simple 9-patch generator

☞ 教學影片

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

 

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

 

參考及圖片來源:
[Android アプリの UI デザイン] 9-patch の作りかたのまとめと Tips
Android Studio Draw 9-patch
A simple guide to 9-patch for Android UI

One comment

  1. THANK YOU:)

    回覆

rayna 發表迴響 取消回覆