最近在项目开发过程中,因为界面布局美化的需要开始接触到.9.png,无论是Goolge官方文档还是网上其他资料,
都给出了很多关于.9.png的基本介绍,.9.png基础文章推荐以下几篇:
Google官方:
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
http://developer.android.com/tools/help/draw9patch.html
ISUX:
http://isux.tencent.com/android-ui-9-png.html
radley:
http://radleymarx.com/blog/simple-guide-to-9-patch/
本文针对实际项目中遇到的问题,以此进行总结:
1..9.png如何理解?
.9.png仍然是一个png格式的图片,只不过是针对Android平台的可以指定图片特定位置拉伸和填充内容的一种特殊的png图片格式。
这里需要注意几个问题:
a..9.png只是针对Android平台而言的,在其他平台上没有效果;
b..9.png只是针对图片拉伸而言的,当然包括单独的横线拉伸,单独的纵向拉伸和同时横向和纵向拉伸,对于图片压缩没有效果;
c..9.png可以同时指定图片的横向和纵向拉伸的区域(相应的可以理解成可以指定图片不进行拉升的区域),由此可以在图片拉伸时达到自己想要的效果;
d..9.png可以指定图片上填充内容(包括文字和非文字的布局等)的区域,非填充区域即可理解成div中的padding留白。
2..9.png拉伸和填充区域如何指定?
这方面网上资料太多,主要都谈到在.png图片四周增加左、上、右、下四条带有一个像素的黑实线,分别表示含义如下:
左边线条:当图片进行纵向拉伸时,由此线条从图片左边下边垂直位移到图片左边上边所形成的区域都是可以进行纵向拉伸的,此区域外则不进行拉伸,保留原来效果;
上边线条:当图片进行水平拉伸时,由此线条从图片上边左边水平位移到图片上边右边所形成的区域都是可以进行横向拉伸的,此区域外则不进行拉伸,保留原来效果;
右边线条:控制图片填充内容的垂直padding留白;
下边线条:控制图片填充内容的水平padding留白。
3..9.png如何制作?
网上也介绍了不少关于.9.png的图片制作工具,本人还是比较推荐Google官方推荐的工具draw9patch。
位于目录\adt-bundle\sdk\tools\下。双击即可打开,既可以通过.png图片制作成.9.png,也可直接对现有.9.png图片进行修改,使用非常方便。
4..9.png制作时需要注意什么问题?
网上不少资料中有说道,在制作.9.png图片时,左边和上边黑实线是必须的,右边和下边的黑实线可以省略。
在实际项目开发过程中,本人就因为此点被坑了不少时间。误以为右下线条和左上线条之间没有牵制关系。
以TextView为例,在项目中经常需要将.9.png为背景,上面写上文字为内容,如果希望文字能够填充整个背景图片,
设置同样高度的两个.9.png,然后其中一张不标识右下线,另一张标识完整的的右下线,很显然实际运行出的效果是不同的。
A. 不标识右下线的.9.png图片默认是存在padding留白的!!并且具体留白与左上线的位置有关!!
因此,一般情况下,建议右下两线也都标识上。
B. 网上经常提到,左上右下四条线将图片形成九宫格形式,是没错的。但是,对于较为复杂的实际需求而言,图片每条边都可以不止一条线,
但无论几条,规则依然如上,灵活运用图片每条边的线条设置,可以将图片拉伸和填充区域细化到满足目标需求。
笔者水平有限,若有错漏,欢迎指正,如果转载以及CV操作,请务必注明出处,谢谢!