Android設計中的.9.png與Android Studio中的設置


cover3

視覺設計

在Android的設計過程中,為了適配不同的手機分辨率,圖片大多需要拉伸或者壓縮,這樣就出現了可以任意調整大小的一種圖片格式“.9.png”。這種圖片是用於Android開發的一種特殊的圖片格式,它的好處在於可以用簡單的方式把一張圖片中哪些區域可以拉伸,哪些區域不可以拉伸設定好,同時可以把顯示內容區域的位置標示清楚。
本文結合一些具體的例子來看下.9.png的具體用法。

首先看下普通的.png資源與.9.png的資源區別:

Android設計中的.9.png

普通的png資源就不多介紹了,可以明顯看到.9.png的外圍是有一些黑色的線條的,那這些線條是用來做什么的呢?我們來看下放大的圖像:

Android設計中的.9.png

放大后可以比較明顯的看到上下左右分別有一個像素的黑色線段,這里分別標注了序號。簡單來說,序號1和2標識了可以拉伸的區域,序號3和4標識了內容區域。當設定了按鈕實際應用的寬和高之后,橫向會拉伸1區域的像素,縱向會拉伸2區域的像素。如下圖:

Android設計中的.9.png

拉伸的含義應該比較容易理解,但是內容區域的標注有什么意義呢?我們來看下圖:

Android設計中的.9.png

這里程序設置的文字垂直居中,水平居左的對齊方式。對齊方式是沒有問題的,但是對於這種大圓角同時又有些不規則邊框的的圖形來說,錯誤的標注方式會讓排版看起來很混亂。所以我們需要修正內容區域的線段位置和長度。

Android設計中的.9.png

把橫向的內容區域縮短到圓角以內,縱向的內容區域控制在輸入框的高度以內,這樣文字就可以正常顯示了。

這里還有一種特殊情況,就是本身是.9.png的資源,但是在修改過程中你希望這張.9.png不能被拉伸(在做皮膚的情況中有可能會遇到),那怎么辦呢?只要把拉伸區域的點點在透明像素的地方就可以了,這樣拉伸的時候會拉伸透明部分的像素,而不會拉伸圖像本身。如下圖:

Android設計中的.9.png

大家可以看到拉伸區域的黑點是可以不連續的。

說了半天.9.png的用法,那.9.png如何輸出呢?有三種方式可以輸出.9.png:

第一種就是使用PS,但是其缺點是手工增加四周各1個像素,然后其區域顏色值只能是透明色(#00000000)或黑色(#FF000000),混入其他顏色一律無法正常顯示,而且無法實時預覽,即使你經驗豐富,但也很難去考慮到目前Android市場這么多的機型適配;如果混入了其他顏色,而又未發覺,這樣再跟程序員來回折騰,時間上也夠喝一壺的了。

第二種,就是使用谷歌官方的draw9Patch.bat這個工具,這個也有劣勢,1.電腦要安裝Java環境,2.下載那個幾百M的文件,3.draw9Patch這個工具其實很難用,很粗糙,整個的體驗也很糟糕。特別是那一根像素,拖着鼠標仔細的描那根像素,哎呀,別提那個憋屈勁兒了。。。

第三種,NinePng九圖神器App(各大App市場都有的下載),這是一個專門處理點九圖的工具App,能夠非常簡單的用手指拖動就可以直接修改點九圖了,而且可以設置文字等信息實時預覽效果。

輸出的方式是先輸出普通的png資源,然后擴大畫布大小,上下左右各空出一個像素,再用一個像素的鉛筆工具(顏色選擇純黑色),上下左右分別畫點就可以了,保存的時候注意把后綴修改為.9.png。

有兩點需要特別注意下:
1.最外圍的一圈像素必須要么是純黑色,要么是透明,一點點的半透明的像素都不可以有,比如說99%的黑色或者是1%的投影都不可以有;
2.文件的后綴名必須是.9.png,不能是.png或者是.9.png.png,這樣的命名都會導致編譯失敗。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM