1,自动拉伸位图

【1】定义

  • Android 里有9patch图的概念,也就是.9图,能够自动拉伸你指定的地方,这其实是一种格式特殊的png文件,

  • 能指明可以拉伸以及不可拉伸的区域,同时还可以把显示内容区域的位置标示清楚。

举个最简单的例子,比如看QQ的聊天框

06,Android屏幕适配(.9图)06,Android屏幕适配(.9图)

06,Android屏幕适配(.9图) 

其实咱们发的文字是内容区域,后面的其实就是个背景图片。

在我们的代码里,比如我们找一张聊天背景的图片,如下

06,Android屏幕适配(.9图) 

 

接下来放到我们的xml布局里面,当我给TextView设置了文字,可以看到如下效果:

06,Android屏幕适配(.9图) 

 

文字内容不在正中间,即使我们调整文字内容在中间以求得显示正常,如下:

 

06,Android屏幕适配(.9图) 

 

 

那也要考虑另一个问题,当文字内容特别多的时候的一个显示效果,如图:

 

06,Android屏幕适配(.9图)

 

这样图片完全变形了,比如内容区域变形了,而且“尖儿”不应该被变大的,那该怎么办呢?

首先这个背景图片要能根据文字内容的排版改变自己的大小,这个毋庸置疑,但是每个聊天框都有一个“尖儿”,这个是要对准发信息的人,我们怎么能保证这个“尖儿”不被拉伸呢?

如果只是一张单纯的图片,在文字内容为一行的时候不会发生什么改变,但是当文字内容超过2行或者更多时,图片肯定就会变形。

 

那问题是,我们怎么保证图片不会随着文本内容的改变而变形呢?或者说如何让内容区域限定在一个区域范围内呢?

 

这就要引入了.9图的概念了。

 

先看一张图:

06,Android屏幕适配(.9图) 

 

这是.9图制作的一个入门,首先你要明白这个图片四周的四条黑边的作用。

左边和上边的两条黑线代表的就是拉伸区域,就是我们控制这张图片哪些区域可以缩放,缩放的区域就是两条黑边的交集,即第一张图的紫色区域。

 

右边和下边代表的是padding,就是间隔区域,通俗来讲就是文本内容的区域,下面给出示例。

 

如果我们能让内容定死,那就万事大吉,下面介绍.9图的制作。

 

首先第一步,选中你家UI妹子给的图,右键点击,选中create 9-patch file

 

06,Android屏幕适配(.9图) 

然后点击ok

06,Android屏幕适配(.9图) 

 

然后点开创建好的.9图进入编辑模式

 

06,Android屏幕适配(.9图) 

 

这张图我就不做过多解释了,必要的文字信息都在图上面标注了。可以看到当拉伸的时候图片变形了,尤其是那个“尖儿”。

 

下面讲讲怎么制作这张图片,或者说怎么设置拉伸区域。

如上面所讲,我先在左边画一条黑线,如图

06,Android屏幕适配(.9图) 

 

发现右边的三种视图变化了,由于我画的黑边横向穿过的区域没有涉及到“尖儿”,所以无论怎么拉伸,“尖儿”都不会变形,下面我再在上面画一条。

 

06,Android屏幕适配(.9图) 

 

其实跟上面的没什么太大区别,但是.9图的有两条线必须画,就是左边和上边,否则会报错。

上图的红色区域就是图片会被拉伸的区域,其他地方不会发生任何变化,这个时候,一个简单的.9图就制作完成了。

 

这个时候再看xml布局的显示效果。

 

06,Android屏幕适配(.9图) 

 

当然,你也可以把剩下的两条边给画上,那是设置内容区域的padding的,我就简明扼要的说一下,这个不是重点。

 

06,Android屏幕适配(.9图) 

 

设置好之后,我们去掉该TextView的padding属性和gravity属性运行到手机上,效果图如下:

06,Android屏幕适配(.9图) 

 

【3】对.9图进行修改

06,Android屏幕适配(.9图)

 

 

相关文章: