软件环境:Android Studio 2.1.2、win10家庭版电脑
.9图片,对于Android开发者而言,想必并不陌生。只是偶尔开发中涉及,难免因搁置太久,已忘却。今有重拾此知识,现亲测汇总,望于其他人有所助益!
一、.9概述
.9图片是andriod app开发里一种特殊的图片形式,文件的扩展名为:.9.png;
作用:就是在图片拉伸的时候保证其不会失真。具体则是通过设置其四个“边框”处,是图片在指定位置进行水平/垂直拉伸并且指定其图片被覆盖内容的显示位置,从而使得图片的边角处不致失真而影响美观;
二、.9图片制作详解
(1)打开AS,选择需要.9操作的图片,右击,Create 9-Patch file
AS将默认生成至当前文件夹中,如下图
双击打开,如下图
如果仅是如此,不对此.9图片做任何操作,其与一般图片无异。
下面是我的测试页面同布局,
(2)将原图片(icon_dialog.png)作为TextView的背景,运行之后你会发现两个问题:
其一,你会发现右下角变得很模糊,影响美观
其二,就是“灯火辉煌”这几个文字显示的位置不对
此处不做运行结果截图展示。
(3)了解AS单击.9图片之后的页面属性(*)
标识1:“Zoom”选项,是来放大或缩小“1号区域”中我们的图片,方便大家编辑;
标识2:“patch scale”选项,是来放大或缩小“2号区域”中我们的.9示例图片;
标识3:“Show lock”选中该选项,把鼠标放到我们编辑过的图片上就会发现,在图片上显示了一个类似于对角线的东西,那个是锁,锁住了不可编辑的区域;
标识4:“Show content”选项是在右边的查看区域中的图片显示我们需要拉伸的地方;
标识5:,“Show patches”选项是将降级过的图片的区域用其他颜色表示出来,方便我们查看;
标识6:“Show bad patches” 选中该选项就会出现红色的线条将我们需要拉伸的区域,圈起来,方便我们查看自己编辑过的需要拉伸的区域;
标识7:顶部:在水平拉伸的时候,保持其他位置不动,只在这个点的区域做无限的延伸;
标识8:左边:在竖直拉伸的时候,保持其他位置不动,只在这个点的区域做无限的延伸;
标识9:底部:在水平拉伸的时候,指定图片里的内容显示的区域;
标识10:右边:在竖直拉伸的时候,指定图片里的内容显示的区域;
(4)制作流程
进入.9图片的操作界面,右边则是实时的显示界面。接下来,我们要对图片进行描边了,描边之前一定要清楚四条边的含义,上左控制拉伸位置,下右控制内容显示位置。
4.1描边时,按下鼠标左键,然后放在图片边界移动就能描边了,要是想要去掉黑边,可以按下Shift键,然后点击鼠标左键。
我们先绘制左上两边,控制拉伸位置,如下绘制完成了之后,可以看右边的阅览图,明显比没有绘制时边角的清晰度更高。
此时为了防止右下角被拉伸,划线的时候,特意将右下角处空出来。
4.2绘制完了图片的拉伸区域之后,我们还需要绘制图片包裹的内容的显示区域,如果没有绘制的话,里边的内容是会从左到右依次显示,这样有时达不到我们想要的效果。
Demo中的图片我想要图片里面的文本显示在*区域,即不显示在文本区域,所以我的黑色描边可以这样描。
通过对四条边的描黑边处理,我们就成功了避免了上述我们遇到的两个问题,拉伸的都是我们设置的区域,显示的也是我们想要显示的位置。
4.3对不同情况下描边的远行结果运行测试
4.3.1上诉四边描述成功下的运行界面展示
4.3.2四边都不描的的运行界面展示(编译出错)
4.3.3只描顶边的运行界面展示(编译出错)
4.3.4只描顶边与左边的运行界面展示
运行结果是右下角没有拉伸变形,但是文字位置没有处于正中间。
4.3.5只描底边与右边的运行界面展示(编译出错)
4.3.6只描底边与右边,还有顶边的运行界面展示(编译出错)
(5)综上所述
其一、AS 2.1.2对于.9图片的编译,至少需要描两条边——顶边与左边;
其二、AS制作.9图,一定要分清楚左上边,与右下边的作用;
其三、AS对于解决边角拉伸与内容位置只是基于一些简单的操作,对于一些比较复杂的图片需求,可能就不会那么容易了。
其四、.9.png图片放在
drawable目录下引用,放在mipmap目录下回报错
总之,技术路漫漫兮,吾将上下而求索!