9_patch图片的规则和原理.docVIP

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中在要拉伸的方向使用 同时具有水平和垂直渐变的效果， 或者斜纹等等，但是要看具体情况。