Android使用NinePatch圖片實現大小可變的Button

在Android的一些應用程序中,有時要用到大小可以延展的圖片做背景,實現的方法是使用NinePatch。

下面是一個用NinePatch圖片給Button做背景的例子,實現一個可以隨文字大小而改變的圖片Button:

準備一張NinePatch資源圖片(button.9.png),具體方法參考(/kf/201205/133933.html);
將button.9.png拖曳(drag)到android工程的/res/drawable-mdpi目錄下。
修改main.XML文件:
[html] <?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" > 
 
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/hello" /> 
 
    <Button 
        android:id="@+id/btn1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/button" 
        android:text="music" 
        android:textSize="12sp" /> 
 
    <Button 
        android:id="@+id/btn2" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/button" 
        android:text="dialer" 
        android:textSize="24sp" /> 
 
    <Button 
        android:id="@+id/btn3" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/button" 
        android:text="wallpaper" 
        android:textSize="48sp" /> 
 
</LinearLayout> 
<?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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button"
        android:text="music"
        android:textSize="12sp" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button"
        android:text="dialer"
        android:textSize="24sp" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button"
        android:text="wallpaper"
        android:textSize="48sp" />

</LinearLayout>

這裡的做法是,在UI上擺放Button元件,並設定Button上的文字及大小。通過「android:background」屬性設定,將Button的背景設定為「@drawable/button」,即「drawable資源(drawable-mdpi/目錄)裡的button圖片」,Android框架會去找到button.9.png檔案。因為button.9.png是一張NinePatch圖片,因此會隨著Button上的文字大小延展。

此時所有工作已完成,不需要改寫任何代碼,程序運行效果如下:

摘自 Young的專欄

發佈留言