最近在項目開發過程中,因為界面布局美化的需要開始接觸到.9.png,無論是Goolge官方文檔還是網上其他資料,
都給出了很多關於.9.png的基本介紹,.9.png基礎文章推薦以下幾篇:
Google官方:
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
http://developer.android.com/tools/help/draw9patch.html
ISUX:
http://isux.tencent.com/android-ui-9-png.html
radley:
http://radleymarx.com/blog/simple-guide-to-9-patch/
本文針對實際項目中遇到的問題,以此進行總結:
1..9.png如何理解?
.9.png仍然是一個png格式的圖片,只不過是針對Android平台的可以指定圖片特定位置拉伸和填充內容的一種特殊的png圖片格式。
這里需要注意幾個問題:
a..9.png只是針對Android平台而言的,在其他平台上沒有效果;
b..9.png只是針對圖片拉伸而言的,當然包括單獨的橫線拉伸,單獨的縱向拉伸和同時橫向和縱向拉伸,對於圖片壓縮沒有效果;
c..9.png可以同時指定圖片的橫向和縱向拉伸的區域(相應的可以理解成可以指定圖片不進行拉升的區域),由此可以在圖片拉伸時達到自己想要的效果;
d..9.png可以指定圖片上填充內容(包括文字和非文字的布局等)的區域,非填充區域即可理解成div中的padding留白。
2..9.png拉伸和填充區域如何指定?
這方面網上資料太多,主要都談到在.png圖片四周增加左、上、右、下四條帶有一個像素的黑實線,分別表示含義如下:
左邊線條:當圖片進行縱向拉伸時,由此線條從圖片左邊下邊垂直位移到圖片左邊上邊所形成的區域都是可以進行縱向拉伸的,此區域外則不進行拉伸,保留原來效果;
上邊線條:當圖片進行水平拉伸時,由此線條從圖片上邊左邊水平位移到圖片上邊右邊所形成的區域都是可以進行橫向拉伸的,此區域外則不進行拉伸,保留原來效果;
右邊線條:控制圖片填充內容的垂直padding留白;
下邊線條:控制圖片填充內容的水平padding留白。
3..9.png如何制作?
網上也介紹了不少關於.9.png的圖片制作工具,本人還是比較推薦Google官方推薦的工具draw9patch。
位於目錄\adt-bundle\sdk\tools\下。雙擊即可打開,既可以通過.png圖片制作成.9.png,也可直接對現有.9.png圖片進行修改,使用非常方便。
4..9.png制作時需要注意什么問題?
網上不少資料中有說道,在制作.9.png圖片時,左邊和上邊黑實線是必須的,右邊和下邊的黑實線可以省略。
在實際項目開發過程中,本人就因為此點被坑了不少時間。誤以為右下線條和左上線條之間沒有牽制關系。
以TextView為例,在項目中經常需要將.9.png為背景,上面寫上文字為內容,如果希望文字能夠填充整個背景圖片,
設置同樣高度的兩個.9.png,然后其中一張不標識右下線,另一張標識完整的的右下線,很顯然實際運行出的效果是不同的。
A. 不標識右下線的.9.png圖片默認是存在padding留白的!!並且具體留白與左上線的位置有關!!
因此,一般情況下,建議右下兩線也都標識上。
B. 網上經常提到,左上右下四條線將圖片形成九宮格形式,是沒錯的。但是,對於較為復雜的實際需求而言,圖片每條邊都可以不止一條線,
但無論幾條,規則依然如上,靈活運用圖片每條邊的線條設置,可以將圖片拉伸和填充區域細化到滿足目標需求。