Android 9 NinePatch (9.png) 圖檔的製作與應用

對於圓角四邊形的圖案,

若有長寬的伸縮,

通常四個圓角也會隨之變形而不自然,

在 Android 中, 提供了一種解決方式, 就是 9 NinePatch (9.png),

也就是將你要的 png 圖檔, 轉換成 9 NinePatch (9.png) 圖檔即可,

除了四個邊角不會應伸縮而變形的優點之外,

9 NinePatch 圖檔還有一個優點, 就是文字與圖案邊界不會重疊 (參考下面的範例),

至於如何轉換, 相關步驟, 參考如下 :

1) 到 <Android_SDK_Home> / tools 目錄中, 執行 draw9patch.bat, 畫面如下 :



2) 將要轉換的 png 檔案拖曳到這視窗內 :


呈現畫面, 如下 :



3) 設定 png 圖檔的上下左右四邊的伸縮範圍 :

圖案右邊的伸縮範圍上邊界 :


圖案右邊的伸縮範圍下邊界 :


圖案左邊的伸縮範圍上邊界 :


圖案左邊的伸縮範圍下邊界 :


圖案上面的伸縮範圍左邊界 :


圖案上面的伸縮範圍右邊界 :


圖案下面的伸縮範圍左邊界 :


圖案下面的伸縮範圍右邊界 :



4) 右邊視窗為預覽視窗 :

長度伸縮 2x 的預覽 :


寬度伸縮 2x 的預覽 :


長寬都伸縮 2x 的預覽 :



5) 最後, 將結果儲存起來, draw9Patch 會自動將檔名設定為 xxx.9.png.

原始圖檔 (tom_test_original.png) :


NinePatch 圖檔 (四邊黑色線, 代表伸縮範圍) (tom_test.9.png) :



Android 測試實作, 參考下面的範例 :
Layout XML :

 XML 內容

<?xml version="1.0"  encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:scrollbars="vertical"
    >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="90dp"
        android:textColor="#FF0000FF"
        android:text="背景非 9.png 圖片。背景非 9.png 圖片。背景非 9.png 圖片。"
        android:background="@drawable/tom_test_original"
        />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="90dp"
        android:textColor="#FF0000FF"
        android:text="背景非 9.png 圖片。\n背景非 9.png 圖片。"
        android:background="@drawable/tom_test_original"
        />
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="90dp"
        android:textColor="#FF0000FF"
        android:text="背景用 9.png 圖片。背景用 9.png 圖片。背景用 9.png 圖片。"
        android:background="@drawable/tom_test"
        />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="90dp"
        android:textColor="#FF0000FF"
        android:text="背景用 9.png 圖片。\n背景用 9.png 圖片。"
        android:background="@drawable/tom_test"
        />
</LinearLayout>

Main 主程式 :

 程式碼

public class Test extends Activity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView( R.layout.main_test );
        setTitle("9 NinePatch (9.png) 圖片");
    }
}

範例結果, 如下 :
背景使用【原始圖案】, 其文字會與圖案邊界重疊.
背景使用【9 NinePatch 圖案】, 其文字不會與圖案邊界重疊.

昭佑.天翔