Android Nine-patch


做了好多客戶端軟件了,突然發現裏面有好多圖片都是重複的,個別只是大小不一樣,每次都使用大量圖片,導致軟件過大,項目總結的時候才發現Android已經提供了一種解決方案了,這就是NinePatchDrawable下面部分主要是翻譯的官網api,後邊有我總結的適用地方

NinePatchDrawable

NinePatchDrawable是一種可以調整大小的圖片,用戶自定義的拉伸區域,這種類型的圖片被定義成一種特殊格式化的png文件

Nine-patch

        NinePatchDrawable是一種可以拉伸的圖片,Android可以自動調整大小去適應視圖的內容區域,你已經把它作爲背景。一個運用Nine-patch圖片作爲背景用在標準的android按鈕上,按鈕必須拉伸去適應各種字符的長度。一個Nine-patch是一種標準的png圖片,它包含額外的一個像素的寬度。它必須保存爲已.9.png爲擴展名,並且放在項目的/res/drawable文件夾下。如果你是從APK解壓後得到的*.9.png文件,注意它是已將周圍的空白像素去掉了的,在使用時必須再加上。


邊界是用來定義圖片的可拉伸和靜態區域。你指定一個(或多個)一像素寬度的黑線在左邊或上邊的邊界(其他的邊界像素應該完全透明或白色)指出一個可拉伸的區域。你可以有多個可以拉伸的區域:他們相對大小保持不變,所以最大的部分總是最大的。


你也可以在圖片的左邊和上部定義一個可選的drawable區域(實際上,內邊距線)。如果一個視圖對象設置NinePatch作爲它的背景,然後指定視圖的文本,它會伸展自己讓所有的文本符合規定區域內,指定在右邊和底部的線(如果包含)。當然內邊距線不包括其中,Android使用左邊和頂部的線去定義這個繪圖區。


清楚的闡明不同線路之間的差別,左側和頂部定義的那些像素的圖像可以被複制以拉伸圖像。底部和右線定義一個相對位置的圖像,視圖內容的放入其中。

下面是一個定義buttonNinePatch文件:

NinePatch定義了一個可伸縮的面積與左側和頂部的線和底部和右側線的繪製區域。在上面的圖像中,虛線灰色線識別區域的圖像將被複制以拉伸。粉紅色的矩形區域在下面的底部圖像識別的地區爲視圖的內容是允許的。如果內容不適應這個區域,圖像將被拉伸。

        Draw-9-patch工具提供了一中非常便利的方法去創建你自己的Nine-Patch圖像,用一個WYSIWYG圖片編輯器。它甚至提出警告,如果該地區已經定義爲可伸縮的地區都處於危險的生產圖紙工件由於像素複製。

XML例子

這兒有意向佈局xml的例子示範怎麼添加一個Nine-Patch圖像在兩個按鈕上(NinePatch圖像被保存爲res/drawable/my_button_background.9.png)


Draw 9-patch工具:

下面是快速指導創建一個Nine-patch圖片用Draw9-patch工具,你需要準備你想創建NinePatch的圖片。

1.從終端上啓動draw9patch程序從你的SDK /tools目錄下

2.拖拽你的圖片到draw9patch窗口(或者 File> Open 9-patch… 選擇圖片)你的工作空間會自動打開。

左邊是你的繪畫區域,也就是你可以編輯線爲了拉伸區域和內容區域。右邊是預覽區域,你可以預覽你被拉伸(上邊是垂直拉伸,中間是水平拉伸,下面是同時拉伸)的圖片。

3.點擊1像素的周長來畫線定義可拉伸區域和內容區域(可選)。右鍵點擊(或者摁住shift鍵點擊)去擦除已經畫好的線。

4.完成後,選擇File > Save 9-patch,你的圖片會被保存爲.9.png

注意:一個正常的png文件(*.png)會被加載一個空的1像素邊界在圖片的周圍,以便於你可以畫可拉伸區域和內容區域。一個已經被保存成9-patch的文件(*.g.png)加載時沒有繪畫的區域添加,因爲它已經存在。


lZoom: 用來縮放左邊編輯區域的大小

lPatch scale: 用來縮放右邊預覽區域的大小

lShow lock: 當鼠標在圖片區域的時候顯示不可編輯區域

lShow patches: 在編輯區域顯示圖片拉伸的區域(使用粉紅色來標示)

lShow content: 在預覽區域顯示圖片的內容區域(使用淺紫色來標示)

lShow bad patches: 在拉伸區域周圍用紅色邊框顯示可能會對拉伸後的圖片產生變形的區域,如果完全消除該內容則圖片拉伸後是沒有變形的,也就是說,不管如何縮放圖片顯示都是良好的。(實際試發現NinePatch編輯器是根據圖片的顏色值來區分是否爲bad patch的,一邊來說只要色差不是太大不用考慮這個設置。)

使用&範圍
1、例子

原圖:

畫線之後的圖片:


說明:勾選上Show patchs之後可以看到左邊有一個粉紅色的區域這個區域就是可以自動拉伸的區域,主要取決於左邊(縱向拉伸)和上面(橫向拉伸)黑線。

勾選上Show Content之後可以再右邊的預覽視圖中看到三種方式的可拉伸內容填充區域。


   

2、其它使用

官網主要介紹了button按鈕的使用,實際上項目中有很多地方都可以使用如下:


    主要是拉伸左邊區域,右邊不需要拉伸


   


   下圖上邊有一部分顏色值相同,可以適當拉伸

   


   v這個左邊的小箭頭是不能拉伸的


   下圖主要是鋸齒部分不能拉伸

   


   


   下圖主要是左上邊小箭頭部分不能拉伸

   


附錄:

參考:

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

http://developer.android.com/reference/android/graphics/drawable/NinePatchDrawable.html

http://developer.android.com/tools/help/draw9patch.html

http://www.cnblogs.com/feisky/archive/2010/01/16/1649502.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章