天天看點

Android-NinePatch PNG檔案(點九圖)的使用

ImageView中XML屬性src和background的差別:

background會根據ImageView元件給定的長寬進行拉伸,而src就存放的是原圖的大小,不會進行拉伸。src是圖檔内容(前景),bg是背景,可以同時使用。

此外:scaleType隻對src起作用;bg可設定透明度,比如在ImageButton中就可以用android:scaleType控制圖檔的縮放方式

NinePatch PNG

簡介:

“*.9.png”檔案一般被用來作為背景檔案,它具有實作部分拉伸的功能。其實從名字一看很明了,這種PNG檔案是分為9個區域,即九宮格的形式,其中隻有中間交叉的區域會産生作用,而邊角上的4解則是固定不變的。

實戰解析:

原圖:

Android-NinePatch PNG檔案(點九圖)的使用
Android-NinePatch PNG檔案(點九圖)的使用

布局及效果:

Android-NinePatch PNG檔案(點九圖)的使用

發現圖檔被拉伸。

1、我們可以在sdk/tools找到draw9patch.bat輕按兩下打開我們的制作工具。

Android-NinePatch PNG檔案(點九圖)的使用

打開後如圖:

Android-NinePatch PNG檔案(點九圖)的使用

2、點選 file —> open 9-patch 打開要制作的PNG圖檔

Android-NinePatch PNG檔案(點九圖)的使用

3、拖動邊界上的線控制區域:

圖檔的四個邊框繪制一個個小黑點,上邊框和左邊框的部分表示當圖檔需要拉伸時就拉伸黑點标記的區域,下邊框和右邊框繪制的部分則表示内容會被放置的區域。

Android-NinePatch PNG檔案(點九圖)的使用

注意:

上下左右各1像素的邊界辨別,其中上和左是必須的,用于指定交叉區域為重複拉伸時用到的填充色,而下和右則是可選的,當存在時,則會在其交叉位置填充前景内容,其他區域作為padding區域,即内邊距。

看右邊的預覽圖:

Android-NinePatch PNG檔案(點九圖)的使用

第一張為:縱向拉伸

第二張為:橫向拉伸

第三張為:橫縱向同時拉伸

4、修改完成編輯後儲存即可,儲存後的格式為*.9.png。(必須把PNG改為.9.PNG才有效)

再次導入項目中,看效果:适配了各種機型。

Android-NinePatch PNG檔案(點九圖)的使用

總結:

制作點九圖需要:

1、原圖為:四條邊都有一個像素的PNG圖檔(點九圖依然可重新設定區域)

2、修改名稱”.PNG”為”.9.PNG”

3、拖動四條邊的線控制區域:設定可拉伸和可放置内容的區域(在Android studio中也可做修改)

Android-NinePatch PNG檔案(點九圖)的使用