Android開發之 .9PNG 的使用

YungFan發表於2017-12-13
Android

何為.9PNG？

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

.9工具.PNG

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

.9PNG 區域劃分.png

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

如何操作

滑鼠左鍵選取需要拉伸的畫素點； shift+滑鼠左鍵取消當前畫素點。 從圖中可以看出，匯入的png圖片預設周圍多了一畫素點，也就是這一圈一畫素點就是可操作區域。因為下方和右方可操作區域是指定內容的顯示區域，屬於可選區域，可不予理會；但是要注意內容區域的標記不能有間斷，否則.9.png圖片在放入專案下會報錯。

.9PNG 操作.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>
複製程式碼

效果如下：

.9 案例.gif

相關文章