android .9图片详解及应用

.9.png是干什么用的呢？这里我就不再说明了。
我们知道.9.png图片的上下左右都有1px宽度且长度任意的黑线，那么这些黑线的作用是什么呢？可以总结成一句话“左上拉伸，右下填充”，就是说左边和上边的黑色线条表示是可以拉伸的区域，右边和下边的黑线表示内容填充的区域。这么说，可能不是很好理解，下面会有例子加以说明。

我们先来看张.9.png的图：

左边和上边的黑线对应可以拉伸的区域，黑线以外的区域不能拉伸。
右边和下边的黑线表示填充的内容的区域。比方说，TextView的背景就是这个.9图片，那么我们设置的text最左边的位置就是下边黑线的起始位置；最右边的位置就是下边黑线的结束位置；同理，最上面的位置就是右边黑线的起始位置；最下面的位置就是右边黑线的结束位置。后续会有例子来说明。

为了举例说明，那就得自己制作.9.png图片啦，方法很简单，直接运行android-sdk-windows\tools目录下的Draw9Patch.bat。下面是我制作好的.9.png。

这个图片是原图，有点小，我放大点看：

可以看到4条黑线的具体位置。上边的黑线表示水平拉伸的区域，左边黑线表示竖直拉伸的区域，拉伸的效果如右边的3个小图所示。可以看出拉伸对应区域。

下面写个例子来说明，看看内容填充的位置是不是对应的右边和下边的区域。我制作的这个.9图，下边的黑线距离左边是31px，距离右边是15px.

 "20px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/tag"
        android:src="@drawable/music_home_nav_cursor"
        />

就是为ImageView 设置背景，背景就是刚才的制作的.9.png图。效果如下：

得到的图片后，用画图工具打开这个这张图片，发现，蓝色图片的位置距离最左边几近于31px，距离右边的距离也接近于15px。可以发现右、下的黑线就是确定填充内容区域。