Android—9Path图片的使用

Android UI设计时,经常会使用图片作为背景,比如给按钮设置背景图片时,图片会默认缩放来适应整个按钮。但是有时这种缩放效果并不是我们所需求的。而我们只是希望缩放图片的特定位置,以此来保证按钮的视觉效果。此时,官方提供的9-Path图片处理工具就派上用场了。

首先,9-Patn工具默认位于Android SDK  的tools文件夹中,双击“draw9patch”,选择Run即可。

运行如下图所示 :


选择File - Open 9-Path... 选择需要处理的图片。


其中,左侧的图像区域即为操作区;右侧三个图像的区域为预览区,从上到下分别位纵向拉伸后、横向拉伸后、整体拉伸后的预览;

Zoom:调整视图大小,便于操作;Path scale:模拟拉伸操作;

选项处,show lock:锁定图像操作区;show content :在预览图上显示内容显示区域(9 path处理后的图片分为缩放区域和内容显示区域,后面会有讲解);

show patches:在操作区显示图片拉伸的区域;


如图所示,操作区有四条线,决定了改图片的额缩放规则、内容显示规则。

左侧和上侧:确定图片的缩放区域;

右侧和下侧:确定图片的显示区域;

如图,粉红色区域即为调整后图片的缩放区域(由左侧、上策的两条黑线确定);同理,右侧、下侧的黑线确定里内容显示区域。

经过这样处理后,保存(默认后罪名为 .9.png),就可以在项目中使用了。

测试结果:

1、处理前效果图:

2、处理后效果图:

1、什么是9Path 它是一个对png图片做处理的一个工具,能够为我们生成一个"*.9.png"的图片 2、什么是"*.9.png" "*.9.png"是Android os里所支持的一种特殊的图片格式,用它可以实现部分拉伸,这种图片是经过9Path进行特殊处理过的,如果不处理的话,直接用PNG图就会有失真,拉伸不正常的现象出现。 3、9Path在哪里呢? 在Android SDK路径下X:/android sdk/tools里你会找到一个【draw9Path.bat】,双击启动9Path,官方名:NinePath 导入一张png图片,然后进入9Path的操作界面 图一: 序列 ① :在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,如果完全消除该内容则图片拉伸后是没有变形的,也就是说,不管如何缩放图片显示都是良 好的。 (实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。) 序列 ② :区域是导入的图片,以及可操作区域。 序列 ③ :这里 zoom:的长条bar 是对导入的图放大缩小操作,这里的放大缩小只是为了让使用者更方便操作,毕竟是对像素点操作比较费眼,下面的 patch scale 是序列 ④区域中的三种形态的拉伸后的一个预览操作,可以看到操作后的图片拉伸后的效果。 序列 ④: 区域这里从上到下,依次为:纵向拉伸的效果预览、横向拉伸的效果预览,以及整体拉伸的效果预览 序列 ⑤: 这里如果你勾选上,那么当你鼠标放在 ② 区域内的时候并且当前位置为不可操作区域就会出现lock的一张图,就是显示不可编辑区域 ; 序列 ⑥: 这里勾选上,那么在④ 区域中你就会看到当前操作的像素点在拉伸预览图中的相对位置和效果。 序列 ⑦: 在编辑区域显示图片拉伸的区域; 如何操作 按着鼠标左键是选取需要拉伸的像素点,按着shift+鼠标左键取消当前像素点 操作区域 大家看到导入的png图片默认周围多了一像素点,也就是这一圈一像素点就是咱们的可操作区域。因为下方和右方可操作区域是指定内容的显示区域,属于可选区域,可不予理会;但是要注意内容区域的标记不能有间断,也就是说标记要连续且仅有一处,否则.9.png图片在放入项目下会报错。 主要大家注意Left 和 top 操作区域; Top操作区域的一排像素点,表示横向拉伸的像素点; Left操作区的一排像素点,表示纵向拉伸的像素点; 图二 (图一)然后对比(图二),看到区别了吧!很明显,(图1)我们没有任何操作,默认整体拉伸,那么拉伸的效果很明显的失真了...而(图2)我们指定了拉伸的像素点所以只是中间的被拉伸,图片的花边我们保留不拉伸这样看起来就好太多啦 娃哈哈、 然后通过9Path就可以保存出来一张“*.9.png”图片,我们放在android 项目的res 下的 drawable 下就可以拉!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值