Nine-patch
阿新 • • 發佈:2019-02-17
一個 NinePatchDrawable圖片是一個可以拉伸的點陣圖。如果你把這個圖片作為一個View的背景,Android會自動根據內容調整這個圖片的大小。一個使用NinePatch的例項是Android標準按鈕的背景。按鈕必須根據安妮上字元的內容長度來調整。一個NinePath的資源是一個標準的Png圖片,他包含一個額外的畫素點邊界。他的字尾名必須是.9.png,並且必須儲存到你工程的 res/drawable目錄。
這個邊界用來定義圖片的拉伸和靜態區域,你可以通過在邊界的左邊和上面繪製一個(或多個)1畫素寬的線來標識一個拉伸區域(其他的邊界畫素必須是完全透明的或白色)。你想要多少個拉伸段,你就可以要多少個:他們相關的大小保持一樣。所以最大的段保持最大。
你也可以通過在右邊和底部繪製一條線來來定義一個可選擇drawable段(如對齊的線條)。如果一個檢視把一個NinePath設定為他的背景,然後為View設定了文字,NinePath將會自動拉伸自己,這樣的話裡面的文字只會填充有右邊和下邊線條標識的區域(如果包含的話)。如果沒有對齊線條,Android使用左邊和上邊的線條來定義這個繪製區域。
要弄清不同邊界線條的區別,左邊和上邊的線條定義了為了拉伸圖片可重複的區域(水平或垂直方向上的拉伸區域)。底部和右邊的邊界線條定義了圖片裡面的相關區域可以放置View裡面的內容的區域。
注意,把寬度和高度設定為wrap_content來使按鈕裡面的Text環繞整個按鈕
如下是上面XML檔案裡面NinePath圖片的兩個按鈕的渲染圖。注意寬度和高度是怎麼隨著Text改變的,已經背景圖片是怎麼拉伸
這個邊界用來定義圖片的拉伸和靜態區域,你可以通過在邊界的左邊和上面繪製一個(或多個)1畫素寬的線來標識一個拉伸區域(其他的邊界畫素必須是完全透明的或白色)。你想要多少個拉伸段,你就可以要多少個:他們相關的大小保持一樣。所以最大的段保持最大。
你也可以通過在右邊和底部繪製一條線來來定義一個可選擇drawable段(如對齊的線條)。如果一個檢視把一個NinePath設定為他的背景,然後為View設定了文字,NinePath將會自動拉伸自己,這樣的話裡面的文字只會填充有右邊和下邊線條標識的區域(如果包含的話)。如果沒有對齊線條,Android使用左邊和上邊的線條來定義這個繪製區域。
要弄清不同邊界線條的區別,左邊和上邊的線條定義了為了拉伸圖片可重複的區域(水平或垂直方向上的拉伸區域)。底部和右邊的邊界線條定義了圖片裡面的相關區域可以放置View裡面的內容的區域。
如下是一個NinePatch檔案檔案來定義一個按鈕
NinePatch通過左邊和上邊的畫素邊定義了拉伸區域,底部和右邊的區域定義了繪製的區域。在上面的圖片中,灰色的點線標記的區域標記了在拉伸的時候將會重複的區域。下面一張圖片裡面粉紅色的區域定義了View裡面的內用將要放置的區域。如果該區域放不下內容,圖片將會被拉伸來讓他填充滿。
Draw 9-patch工具提供了一個極端便利的方法來建立一個NinePath圖片。使用一個所見即所得圖形編輯器。它甚至會提供警告,如果你定義的拉伸區域會產生的偽像有風險導致畫素重複
XML例項
如下的佈局檔案中的XML演示瞭如何把一個NinePatch新增到一對按鈕中(NinePatch儲存在res/drawable/my_button_background.9.png)
<Button id="@+id/tiny" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerInParent="true" android:text="Tiny" android:textSize="8sp" android:background="@drawable/my_button_background"/> <Button id="@+id/big" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:text="Biiiiiiig text!" android:textSize="30sp" android:background="@drawable/my_button_background"/>
注意,把寬度和高度設定為wrap_content來使按鈕裡面的Text環繞整個按鈕
如下是上面XML檔案裡面NinePath圖片的兩個按鈕的渲染圖。注意寬度和高度是怎麼隨著Text改變的,已經背景圖片是怎麼拉伸