Android開發之 .9PNG 的使用

何爲.9PNG？

至關於把一張png圖分紅了9個部分(九宮格)，分別爲4個角，4條邊，以及1箇中間區域，啓動它須要在Android SDK 路徑下如 X:/android sdk/tools 找到一個draw9patch.bat，雙擊運行後，效果以下：

此時拖入一張圖片，區域劃分以下：

序列 1：區域是導入的圖片，以及可操做區域。
序列 2 ：從上到下，依次爲：縱向拉伸的效果預覽、橫向拉伸的效果預覽，以及總體拉伸的效果預覽。
序列 3：工具欄

如何操做

鼠標左鍵選取須要拉伸的像素點； shift+鼠標左鍵取消當前像素點。 從圖中能夠看出，導入的png圖片默認周圍多了一像素點，也就是這一圈一像素點就是可操做區域。由於下方和右方可操做區域是指定內容的顯示區域，屬於可選區域，可不予理會；可是要注意內容區域的標記不能有間斷，不然.9.png圖片在放入項目下會報錯。

注意上方和左邊的黑色像素，是想讓此png圖像拉伸操做的時候，只是中間區域被拉伸。選擇上方中間區域是爲了橫向拉伸的時候選取的拉伸像素點，左邊則是縱向拉伸像素點。

注意

1.作.9.png的圖時， padding值由right和buttom的黑線設置，不能在代碼中設置
2.圖片中若是有不須要拉伸的區域，left和top的黑線要跳過這個區域

實踐

將上述兩個圖片導入到項目中，佈局以下：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009688"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:scrollbars="none"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="150dp"
            android:background="@drawable/friend_bubble"
            android:gravity="left|center_vertical"
            android:text="hi" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginLeft="150dp"
            android:background="@drawable/user_bubble"
            android:gravity="left|center_vertical"
            android:text="你好，請問你是誰？" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="150dp"
            android:background="@drawable/friend_bubble"
            android:gravity="left|center_vertical"
            android:text="我是你小學同窗，名叫張三，當年和你作同桌。" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginLeft="150dp"
            android:background="@drawable/user_bubble"
            android:gravity="left|center_vertical"
            android:text="是嗎？我怎麼沒有印象。" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="150dp"
            android:background="@drawable/friend_bubble"
            android:gravity="left|center_vertical"
            android:text="還記得當年我12歲，你11歲，我還借你半塊橡皮，至今未還。" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginLeft="150dp"
            android:background="@drawable/user_bubble"
            android:gravity="left|center_vertical"
            android:text="......" />
    </LinearLayout>

</ScrollView>
複製代碼

效果以下：