Andorid中.9.png图片的使用及制作

版权声明：本文为博主原创文章，未经博主允许不得转载。如果觉得文章不错，记得顶一下！如果有疑问觉得文章中有错误，欢迎大家在评论中给我留言指正，看到会及时回复，多多交流

作者:牧晨

1、目录

   任务1  背景

   任务2  原理

   任务3  操作实现 

   任务4   应用到项目中

   任务5  其它应用参考

-------------------------------------------------------------------------------------------------------------------------------------------------------

2.任务1   背景

2.1. 客观存在的问题

    因为安卓采用开放的体系，终端设备的屏幕样式繁多，大小、长宽各不一致。因此同一版本的APP安装到不同大小屏幕的移动终端后，很容易导致：图片、显示图片的组件、屏幕三者之间因为长宽比例不同，而显示效果不同，尤其是横竖屏时更加明显。例如宽屏把圆脸左右拉宽变成大宽脸，在长屏幕上把圆脸上下拉伸变成大长脸，影响了APP的图像显示效果。

   

2.2. 解决方式

    对于上述问题，安卓除了通过不同分辨率和版本的图片资源自动完成屏幕匹配外，还提供了另外一种非常重要并且实用的解决方案。把png格式的图片转换为.9.png格式的图片。

-------------------------------------------------------------------------------------------------------------------------------------------------------

3.任务2   原理

3.1. .9.png图形的结构示意图

    

    （1）、.9.png把原来图像最外一层1个PX的像素拿出来用于做新图像拉伸和内容显示的标记位，如上图中黑色边框（黑色为原图边框）外红色边框（工具中用虚线框显示，虚线框不直观故本图改为红线）所示；

    （2）、上边X1所示的边框，用于标记图像在屏幕X轴方向如何拉伸处理；

    （3）、左边Y1所示的边框，用于标记图像在屏幕Y轴方向如何拉伸处理；

    （4）、下边X2所示的边框，当本图片为文本框的背景色时，文本框中文本内容在屏幕X轴方向的显示区域；

    （5）、右边Y2所示的边框，当本图片为文本框的背景色时，文本框中文本内容在屏幕Y轴方向的显示区域；

3.2. .9.png图形的拉伸原理示意图
      

结合图像直接解释其具体实现原理：

    （1）、【原始图】中X轴方向，有X1~X2，X3~X4两条黑线条，表示：当图像随组件一起拉宽时，原图像在X轴方向，从X1到X2之间，X3到X4之间的图像等比拉宽，之外的图像按照原图宽度原样显示，效果为【水平方向拉伸后的效果图】；

    （2）、【原始图】中Y轴方向，有Y1~Y2，Y3~Y4两条黑线条，表示：当图像随组件一起拉高时，原图像在Y轴方向，从Y1到Y2之间，Y3到Y4之间的图像等比拉宽，之外的图像按照原图宽度原样显示，效果为【垂直方向拉伸后的效果图】；

    （3）、【原始图】中X轴和Y轴同时有黑线，表示：当图像随组件一起拉宽又拉高时，原图像在X轴方向从X1到X2之间，X3到X4之间的图像等比拉宽，原图像在Y轴方向从Y1到Y2之间，X3到X4之间的图像等比拉宽，之外的图像按照原图宽度原样显示，效果为【水平和垂直方向同时拉伸后的效果图】；

    （4）、【原始图】中深绿色块、绿色块、粉色块为拉伸区间示意区，不是原图的本来原色，黑色边框为原图边框。

3.3. .9.png图形的内容显示区示意图

  

    结合图像直接解释其具体实现原理：

    （1）、【原始图】中Y轴方向，有Y1~Y2一条黑线，表示：以此图为背景的组件的文本，在显示时，从Y1坐标开始显示，到Y2截止。
    （2）、【原始图】中X轴方向，有X1~X2一条黑线，表示：以此图为背景的组件的文本，在显示时，从X1坐标开始显示，到X2截止。

    （3）、【原始图】中X轴和Y轴方向，有X1~X2、Y1~Y2两条黑线，表示：以此图为背景的组件的文本，在显示时，限制在X1~X2和Y1~Y2形成的交叉区域。当勾线了【Show Content】选项时，右图中显式一个【暗色区域】就是文本在组件中的显示区域。

 

-------------------------------------------------------------------------------------------------------------------------------------------------------

 

4.任务3   操作实现

4.1.启动draw9patch.bat

    第1步:

    找到android的SDK安装目录，转到tools目录下，找到 draw9patch.bat .双击启动。

4.1.加载图片

    第2步:

    通过菜单【File】=》【open 9-Patch】打开需要编辑的原始PNG文件。打开后界面如下：

4.3.界面中的区域介绍

    （1）、区域【1】【2】【3】【4】为鼠标左键拖动区、用于鼠标左键按下后拖动修图；

    （2）、区域【10】,这个区域右边有个滚动条，从上到下共有3副图，分别为图片【垂直拉伸】后的效果图、【水平拉伸】后的效果图、【水平垂直同时拉伸】时的效果；

    （3）、区域【5】，原图显示缩放比例；
    （4）、区域【6】，为右边区域【10】效果图的显示缩放比例
    （7）、区域【7】勾选后，在右边区域【10】效果图中，以方框方式显示内容框的位置；

    （8）、区域【8】勾选后，在原图中以不同色填充框方式显示拉伸、内容交叉的区域块；

    （9）、区域【9】勾选后，在原图中以不同色边框方式显示拉伸、内容交叉的区域块；

4.4.生成拉伸标记、内容标记

    第3步:分别按需在图中所示的【1】【2】【3】【4】区域，按下选择合适的起点位置，【按下鼠标左键】，左右或者上下【拖动】到合适的位置，然后【松下鼠标左键】；

    拖动时：（1）对应边上有一条黑线形成；（2）原图中有一暗色区域块同步变化；（3）【10】区域的效果图同步变化；

    补充：由于区域【1】【2】【3】【4】空间大选取和移动方便，不像原图周边的虚线部分太窄太细导致选取和移动不变，因此标记、修改时建议通过区域【1】【2】【3】【4】完成，而不是原图周边的虚线部分。

    注意1：X轴的拉伸区、Y轴的拉伸区都可以有多个拉伸的区块；
    注意2：X轴的内容区、Y轴的内容区实际上只会有一个内容区；如果不小心生成多个区块时，组件反而不能明白你的用意，结果只能是【哈哈】。

4.5.部分拉伸标记、内容标记

    如果已经选取的拉伸部分，中间部分有需要取消拉伸时，通过移动两边的线是不能完成的，需要：

    第1步：放大【5】到合适的比例，以便能充分看清并用【鼠标选取】原图周边的虚线框；

    第2步：按下【CTRL】键；

    第3步：按下【鼠标左键】键，依次按需【点击或拖移】鼠标，虚线框上出现红色标记的删除线或删除点；同时原图和效果图有同步的界面显示变化；

4.6.保存

    【File】=》【Save 9-Patch】到指定的位置，生成【原文件名.9.png】的图片。

-------------------------------------------------------------------------------------------------------------------------------------------------------

5.任务4   应用到项目中

    由于项目比较简单，只说说如何实现，不列代码。

5.1:.9.png的效果原图

     

5.2:安卓中的现实

  （1）、  在Activity界面布局中，添加一个满屏的垂直线性布局；

  （2）、  线性布局中放两个TextView，宽度满屏，高度权重1:1，背景一个为原图p11.png，一个为修改或的p12.9.png；

  （3）、 两个TextView框的text属性中，分别放入一段长文字；

  （4）、在布局设计界面中，选择不同宽度、高度的屏幕，分别观察效果；

-------------------------------------------------------------------------------------------------------------------------------------------------------

6.任务5   其它参考

孙群的博客

6.1.解说

    

     （1）.  可以将图片最上侧1px边框中的一个或多个点设置为黑色，本例中我们用了一条黑色的线段，这些黑色的点定义了图片中可以被横向拉伸的区域。 同样也可以将图片最左侧1px边框中的一个或多个点设置为黑色，本例中我们只用了一个黑色的像素点，这些黑色的点定义了图片中可以被纵向拉伸的区域。横向拉伸像素点与纵向拉伸像素点相交定义了图片中可拉伸的矩形区域，这样就实现了对图片中一部分区域进行拉伸。

    （2）. 我们可以选择性地对图片的底边和右边设置黑色线段，用这些黑色线段定义图片的内容区域。当我们图片里的样式是不规则图形的时候，定义图片的内容区域很重要，TextView中的文本都会放到内容区域中。将图片最下侧1px边框设置一条黑色线段，该横向线段定义了图片的横向内容区域。将图片最右侧1px边框 设置一条黑色线段，该纵向线段定义了图片的纵向内容区域。横向线段与纵向线段的组成的矩形区域就组成了内容区域。如果不定义图片的内容区域，那么图片的内容区域就是整个图片区域。

    （3）. .9.png最外侧四边中的像素要么是纯透明、纯白色，要么是纯黑色，不要设置其他颜色和透明度。

6.2.  设计效果图

6.3.  应用效果图    

    当我们用该处理过的.9.png图片作为TextView的背景时，效果如下所示： 

    由上图我们可以看到，所有文本都居中放到了消息框的矩形区域中，而且图片没有失真，保持了原有图片的质感。

希望本文对大家使用.9.png有所帮助！