Android开发之 .9PNG 的使用

9.PNG

相当于把一张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