加载中…
个人资料
书生
书生
  • 博客等级:
  • 博客积分:0
  • 博客访问:2,391
  • 关注人气:9
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

《论Android开发AS创建点9图片》

(2017-09-01 12:56:19)
标签:

android开发

分类: 互联网热点知识

软件环境:Android  Studio 2.1.2win10家庭版电脑


.9图片,对于Android开发者而言,想必并不陌生。只是偶尔开发中涉及,难免因搁置太久,已忘却。今有重拾此知识,现亲测汇总,望于其他人有所助益!


一、.9概述

.9图片是andriod app开发里一种特殊的图片形式,文件的扩展名为:.9.png

作用:就是在图片拉伸的时候保证其不会失真。具体则是通过设置其四个“边框”处,是图片在指定位置进行水平/垂直拉伸并且指定其图片被覆盖内容的显示位置,从而使得图片的边角处不致失真而影响美观;

二、.9图片制作详解

1)打开AS,选择需要.9操作的图片,右击,Create 9-Patch file

《论Android开发AS创建点9图片》

AS将默认生成至当前文件夹中,如下图

《论Android开发AS创建点9图片》

双击打开,如下图

《论Android开发AS创建点9图片》

如果仅是如此,不对此.9图片做任何操作,其与一般图片无异。

下面是我的测试页面同布局,

《论Android开发AS创建点9图片》

2)将原图片(icon_dialog.png)作为TextView的背景,运行之后你会发现两个问题:

其一,你会发现右下角变得很模糊,影响美观

其二,就是“灯火辉煌”这几个文字显示的位置不对

此处不做运行结果截图展示。

3)了解AS单击.9图片之后的页面属性(*

《论Android开发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键,然后点击鼠标左键。

我们先绘制左上两边,控制拉伸位置,如下绘制完成了之后,可以看右边的阅览图,明显比没有绘制时边角的清晰度更高。

《论Android开发AS创建点9图片》

此时为了防止右下角被拉伸,划线的时候,特意将右下角处空出来。

4.2绘制完了图片的拉伸区域之后,我们还需要绘制图片包裹的内容的显示区域,如果没有绘制的话,里边的内容是会从左到右依次显示,这样有时达不到我们想要的效果。

Demo中的图片我想要图片里面的文本显示在中央区域,即不显示在文本区域,所以我的黑色描边可以这样描。

《论Android开发AS创建点9图片》

通过对四条边的描黑边处理,我们就成功了避免了上述我们遇到的两个问题,拉伸的都是我们设置的区域,显示的也是我们想要显示的位置。

4.3对不同情况下描边的远行结果运行测试

4.3.1上诉四边描述成功下的运行界面展示

《论Android开发AS创建点9图片》

4.3.2四边都不描的的运行界面展示(编译出错)

《论Android开发AS创建点9图片》

4.3.3只描顶边的运行界面展示(编译出错)

《论Android开发AS创建点9图片》

4.3.4只描顶边与左边的运行界面展示

 

《论Android开发AS创建点9图片》

运行结果是右下角没有拉伸变形,但是文字位置没有处于正中间。

《论Android开发AS创建点9图片》

4.3.5只描底边与右边的运行界面展示(编译出错)

《论Android开发AS创建点9图片》

4.3.6只描底边与右边,还有顶边的运行界面展示(编译出错)

《论Android开发AS创建点9图片》

5)综上所述

其一、AS 2.1.2对于.9图片的编译,至少需要描两条边——顶边与左边;

其二、AS制作.9图,一定要分清楚左上边,与右下边的作用;

其三、AS对于解决边角拉伸与内容位置只是基于一些简单的操作,对于一些比较复杂的图片需求,可能就不会那么容易了。

总之,技术路漫漫兮,吾将上下而求索!

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有