Android开发 -- .9图片原理和Draw 9-patch工具的使用

一. .9图片的介绍

.9图片的作用：

1. 主要防止图片被拉伸后变形。因为在一个像素里如果是相同色块，那么它被拉伸不会变形。但如何该像素里有不同色块，就将导致它变形。

2.通过.9图片可以把图片做的很小，不占资源，减少apk的大小

下面我们来看一下，同一张图片使用了.9和不使用.9图片的区别：

由图中，我们可以看出没有使用.9图片的对话框被拉伸的变形了。

我们再看下这俩个背景图片的区别：(左：.9图片 ； 右：非.9图片)

仔细观察，才发现.9图片在左边和上面多了一个小黑点，其他基本一致。    

二. .9图片的使用1 -- 拉伸图片

1.上：表示图片被横向拉伸时，黑点所在的区域就是可拉伸的区域

2.左：表示图片被纵向拉伸时，黑点所在的区域就是可拉伸的区域

（关于图片下方和右方的作用在下一个实例中会讲解）

在Draw 9-patch工具中，选中show patches会自动显示出被拉伸的区域。

在Draw 9-patch工具的右手边，可以预览拉伸效果，从上到下依次是：纵向拉伸 / 横向拉伸 / 纵向横向拉伸

下面我们来看一下俩种不同的拉伸区域的.9图片造成的不同效果：

a. 

 

b.

图a和图b的不同点在于： 图a的左侧只在箭头的下面画了个黑点，而图b的左侧在箭头的上下面都各自画了个黑点。

从右手边的预览图，我们也可以看出图a在纵向拉伸时，只会拉伸箭头下方那个黑点所在的区域。而图b在纵向拉伸时，箭头上下方的区域都会进行拉伸。

为了更直观的看出效果，可在Draw 9-patch工具中，Patch scale是进行拉伸的倍数选择，可将它由最小值滑到最大值，以在预览图中观察效果。

同时，我们在真机中进行编译看效果：

三. .9图片的使用2 -- padding效果

1.下：黑色区域表示横向的内容显示区域

2.右：黑色区域表示纵向的内容显示区域

在Draw 9-patch工具中，勾选Show content，可以在右手边的预览区域看到紫色的区域就是内容显示的区域。

我们来看一个使用了下方和右方黑点的和没有使用的区别：

由图中，我们可以很直观的看出，使用了下方/右方黑点的可以适当调整文字内容在图片中的区域。其实就是实现android:padding的效果，即设置内边距。

下方黑点区域的左端实现 android:paddingLeft ，右端实现android:paddingRight

右方黑点区域的上端实现android:paddingTop，下端实现android:paddingBottom

同样，可在Draw 9-patch工具中，Patch scale是进行拉伸的倍数选择，可将它由最小值滑到最大值，以在预览图中观察效果。