1. 程式人生 > >Android設計中的.9.png圖片

Android設計中的.9.png圖片

文字 圖. out 好的 .bat trac 左右 number lock

.9.png是一種能夠自己定義拉伸特定區域的圖片格式。

簡書:Android設計中的.9.png圖片

在Android的UI設計開發中,非常多控件須要適配不同的手機分辨率進行拉伸或者壓縮,這樣就出現了能夠隨意調整大小的一種圖片格式“.9.png”。這樣的圖片是用於Android開發的一種特殊的圖片格式,它能夠指定特定的區域進行拉伸而不失真。同一時候能夠指定前景內容的顯示區域。即.9.png圖片的用處能夠概括為以下兩點:
- .9.png圖片在圖片拉伸的時候特定的區域不會發生圖片失真。
- .9.png圖片作為背景圖的時候能夠指定內容顯示區域;

一、.9.png圖片與普通圖片的對照

技術分享

通過上面的對照,我們能夠發現,.9.png圖片周圍會有一條黑色的線條,這些黑色線條有什麽作用呢?就是用於指定我們背景的拉伸區域或者前景內容的顯示區域。

技術分享
- 左邊黑線:縱向拉伸區域,必須要畫的,控制縱向拉伸,如上圖右側第一個小圖。


- 上邊黑線:橫向拉伸區域,必須要畫的。控制橫向拉伸,如上圖右側第二個小圖。
- 右邊黑線:可選,縱向內容顯示區域
- 下邊黑線:可選。橫向內容顯示區域

通過上面的的介紹。我們知道.9.png的四條邊上的黑線有哪些用途。那麽我們將介紹下關於拉伸區域的界定。

拉伸區域

技術分享

  • 紅色框區域: 表示縱向拉伸區域,當控件背景圖片須要進行縱向拉伸時,它僅僅會拉伸紅色區域,其他區域不會拉伸。
  • 綠色框區域:表示橫向拉伸區域。當控件背景圖片須要進行橫向拉伸時。它僅僅會拉伸綠色區域,其他區域不會拉伸。

  • 紅綠相交區域:該段區域橫向和縱向都會拉伸。
前景內容顯示區域

技術分享

  • 紅色框區域:指定橫向文本顯示的區域。限定文本左右能顯示到的邊界。
  • 藍色框區域:指定縱向文本顯示的取。限定文本上下能顯示到的邊界。

二、.9.png圖片的制作

這麽強大的一種圖片,在我們android開發中的適配環節。起了非常大的作用。那麽怎麽制作這樣的.9.png圖片呢?在Android的工具中給我們提供了draw9patch.bat工具來制作.9文件。該工具文件夾在\android-sdk-windows\tools\draw9patch.bat
我們直接打開draw9path.bat二進制程序,將我們須要制作的圖片導入進去。然後按住鼠標左鍵進行劃黑邊。假設畫錯了。通過Shift+鼠標左鍵進行拖動取消。

三、簡單體驗

首先,我們通過簡單的布局文件看看普通圖片的展示效果。

<?

xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="dsw.iflytek.com.pngdemo.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@mipmap/back" android:layout_centerInParent="true" android:text="Hello World!" /> </RelativeLayout>

技術分享

在上面的效果圖沒有進行自適應。兩邊的邊框已經被文字嵌入進去。所以我們要對圖片作例如以下改動:

技術分享

在我們的處理中。通過對圖片加入縱橫向的拉伸,來保持背景的自適應。

這裏須要我們註意指定的拉伸區域。須要我們細致體會。
技術分享

技術分享

在上面我們對橫向拉伸區域有了一定認識。

以下看看內容拉伸區域:
技術分享

在上面的.9圖中。我們將整個右邊線作為內容縱向顯示的區域,看看效果圖:
技術分享

我們能夠看到,內容的顯示是緊緊填滿上下之間。

沒有間隙。

技術分享

在來看看效果圖:

技術分享

通過上面對照。我們能夠發現右側變現控制著內容視圖的顯示區域的規律。

相同底部也是一樣。在開發的過程中。合理的使用.9.png文件能夠非常好的優化我們的資源文件,減小apk的包大小。

也能進行非常好的適配效果。

Android設計中的.9.png圖片