9.PNG

相當(dāng)于把一張png圖分成了9個(gè)部分(九宮格)，分別為4個(gè)角，4條邊，以及1個(gè)中間區(qū)域，啟動(dòng)它需要在Android SDK 路徑下如 X:/android sdk/tools 找到一個(gè)draw9patch.bat，雙擊運(yùn)行后，效果如下：

.9工具.PNG

此時(shí)拖入一張圖片，區(qū)域劃分如下：

.9PNG 區(qū)域劃分.png

序列 1：區(qū)域是導(dǎo)入的圖片，以及可操作區(qū)域。
序列 2 ：從上到下，依次為：縱向拉伸的效果預(yù)覽、橫向拉伸的效果預(yù)覽，以及整體拉伸的效果預(yù)覽。
序列 3：工具欄

如何操作

鼠標(biāo)左鍵選取需要拉伸的像素點(diǎn)； shift+鼠標(biāo)左鍵取消當(dāng)前像素點(diǎn)。
從圖中可以看出，導(dǎo)入的png圖片默認(rèn)周圍多了一像素點(diǎn)，也就是這一圈一像素點(diǎn)就是可操作區(qū)域。因?yàn)橄路胶陀曳娇刹僮鲄^(qū)域是指定內(nèi)容的顯示區(qū)域，屬于可選區(qū)域，可不予理會(huì)；但是要注意內(nèi)容區(qū)域的標(biāo)記不能有間斷，否則.9.png圖片在放入項(xiàng)目下會(huì)報(bào)錯(cuò)。

.9PNG 操作.png

注意上方和左邊的黑色像素，是想讓此png圖像拉伸操作的時(shí)候，只是中間區(qū)域被拉伸。選擇上方中間區(qū)域是為了橫向拉伸的時(shí)候選取的拉伸像素點(diǎn)，左邊則是縱向拉伸像素點(diǎn)。

注意

1.做.9.png的圖時(shí)， padding值由right和buttom的黑線設(shè)置，不能在代碼中設(shè)置
2.圖片中如果有不需要拉伸的區(qū)域，left和top的黑線要跳過這個(gè)區(qū)域

實(shí)踐

將上述兩個(gè)圖片導(dǎo)入到項(xiàng)目中，布局如下：

<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="你好，請(qǐng)問你是誰？" />

        <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="我是你小學(xué)同學(xué)，名叫張三，當(dāng)年和你做同桌。" />

        <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="還記得當(dāng)年我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>

效果如下：

.9 案例.gif