9-patch图片的规则和原理

2022-05-17 06:47:22 文档大全网 [ 字体：小中大 ] [ 阅读： ]

【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《9-patch图片的规则和原理》，欢迎阅读！
原理,规则,图片,patch
9-patch图片的规则和原理

(感谢张帆同学友情提供的9-patch资料)

传统UI开发中，如果背景的大小不一样，一般需要为每种大小都制作一张图片，这在button中尤为明显。当然我们也可以一小块一小块水平重复的画，也可以垂直的话。在android中专门有一种叫nine patch图片（以 9.png结尾）来解决背景大小不一样时，只用一张背景图片。

图1：

附件中demo.9.png 是一张9-patch的图,它满足如下规则： 1. 文件名为 *.9.png，描述的1张100x100的9-patch图片（当然也可以是其他大小） 2. 图片上下左右各留出1个像素的9-patch标识区域，因此改图片的大小实际应为为 102x102.但是程序里面解析出来会去掉周围1个像素, 还是100x100的图 3. 周围的每个像素满足条件：要么全透明，要么全黑

下面是对于上边和左边的标识区域的说明： 1. 上部和左部必须具有一条黑线，分别标识出水平方向和垂直方向需要拉伸的区域（以

黑线的两端为顶点，以图形边缘为边做垂线（红线），4条垂线包含的区域为拉伸区域，如图1中绿色区域）

2. 为包含在拉伸区域的部分（如图1蓝色区域，也就是4个角）在图片放大的时候不做拉伸，直接贴图。

下面是对右边和下边黑线的说明：

1. 右部和下部的黑线是可选的，但是就算没有黑线也要留出1个像素的空白区域. 2. 以黑线两端点做垂线(黄色虚线）, 相交的区域（黄色区域）标识出图片的padding。

例如，以改图片作为文本框的背景的时候，程序需要知道可以写字的区域，那么这个文字区域就是又黄色标注的，在android里面，以任意9-patch作为控件的背景的时候，你可以认为黄色区域意外的部分只是边框, 不能容纳其他内容。

3. 虽然是可选的，不过我们建议还是需要标注出来，即使不用，也最好把右侧和下部

整个区域标注成黑色，表示整个图片区域都可以写字等，即：paddingLeft = 0, paddingRight = 0, paddingTop = 0, paddingBottom = 0;

图2：

如图2是将图1的9-patch图片load出来然后贴到200x200的区域的样子，可以看到：

1. 周围没有透明区域或者黑边，因为程序里面加载图片的时候不认为周围1圈是图片的范围。

2. 蓝色区域没有大小变化，还是在4个角上。 3. 绿色和黄色区域得到了响应的拉伸。

另外需要说明的是：绿色区域在做拉伸的时候，并不是重复贴图的方式，也就是说不要指望原图绿色区域中间是一个砖块，放大之后贴出来是n个砖块。其实放大之后还是1个砖块，只是被拉大了。所以切记不要在9-patch中在要拉伸的方向使用同时具有水平和垂直渐变的效果，或者斜纹等等，但是要看具体情况。