2012-02-29

Tags: android

一般而言，在android上要畫格線(e.g. 畫個類似田字的格線)，直接操作2D API是最省事的。但是...這不代表你只能用2D API來做這事，其實用系統的LayoutManager配合貼圖的方式也辦的到；而且利用貼圖的方式，你就不用自己在那辛苦的算XY軸位置，也不用擔心程式在不同size的android手機上畫出來的圖型會走樣。

要達成這個目的，可以用Nine-patch的技巧(請參考 官方說明)輕松完成。

假設想畫出如下的圖型

可以先產生二個Nine-patch的小圖

corner1.9.png

corner2.9.png


接著在xml layout部份設定成下面這樣

<?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:gravity="center" android:orientation="vertical">



    <TableLayout android:id="@+id/tableLayout1"

        android:layout_width="200dp" android:layout_height="wrap_content"

        android:background="@drawable/corner1" android:stretchColumns="*">



        <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content"

            android:layout_height="wrap_content">



            <TextView android:id="@+id/textView1" android:layout_width="wrap_content"

                android:layout_height="100dp" android:background="@drawable/corner2"

                android:gravity="center" android:text="A" />



            <TextView android:id="@+id/textView2" android:layout_width="wrap_content"

                android:layout_height="100dp" android:background="@drawable/corner2"

                android:gravity="center" android:text="B" />

        </TableRow>



        <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content"

            android:layout_height="wrap_content">



            <TextView android:id="@+id/textView3" android:layout_width="wrap_content"

                android:layout_height="100dp" android:background="@drawable/corner2"

                android:gravity="center" android:text="C" />



            <TextView android:id="@+id/textView4" android:layout_width="wrap_content"

                android:layout_height="100dp" android:background="@drawable/corner2"

                android:gravity="center" android:text="D" />

        </TableRow>

    </TableLayout>

</LinearLayout>

最後~當程式啟動時，就會秀出想要的格線圖了...:)

利用這種方式最大的好處應該是layout可以經由LayoutManager自動調整，而且你可以視需要針對UI畫面裡的各個元件(e.g. TextView、Button...etc)註冊各式的listener，進而達到跟User進行互動的目的。利用2D API想要做到這麼複雜的功能，也是有辦法，但是程式碼應該會很可觀，而且程式還不見的會好維護。

話說回來，這招最好用的地方應該是幫TableLayout畫格線。HTML裡的Table tag，很容易就可以畫出格線效果，但是android裡要幫Table畫格線就麻煩了，利用這種貼圖的方式算是比較容易達到這個目的的招式。

---