消息
登录即可查看消息记录
当前位置: 首页 >文章 > 一篇文章帮你搞定点九图
收藏
分享

一篇文章帮你搞定点九图

举报小虎转载君小虎转载君发布于 2021-07-16351阅读2点赞
什么是点九图...

文章来源:转行人的设计笔记,ID:zhrenui
作者:Andrew_臣

点九图是安卓独有的切图格式,这种格式可以使圆角矩形在拉伸放大时不会模糊失真。之前对点九只是有了解,后来在实际案例中磕磕碰碰,参考了大量文章才有了较为切实的理解体会。鉴于很多小伙伴对于这一块依旧是一知半解,因此我将这一部分单独拎出来进行复盘,希望对小伙伴们有所帮助。


什么是点九图

点九图(Nine Patch Drawable Grahpic)是安卓独有的切图格式,针对界面中所有可拉伸的圆角矩形,最常用的场景就是界面中那些会随字段长度而变化的聊天对话框、标签等等,以及android各式各样终端设备的自适应。

举个通俗易懂的例子。微信中的对话气泡会随着用户输入文本的长短或者终端屏幕的尺寸大小,会产生长度高度的自由变化,但是气泡本身并不会失真。这就是因为拉伸动作只存在于四个圆角外的部分,所以不论你输入多少文本,横屏竖屏,手机还是平板,都可以很好得自适应。而一旦没有做这些处理,圆角矩形就会变成右下图:

ios对于这类情况只需要一串UIImage代码即可解决,然鹅android就没有那么友好了。为了避免失真变形,需要咱们设计师先制作android专属的点九图,再交付给前端才能解决。



点九图的原理


为了方便定义可拉伸区域,我们一般先将圆角矩形划分为九个区域,除了1、2、3、4的圆角区域不可拉伸外,其他区域都可以自由拉伸。而实现原理就是,程序通过识别圆角矩形四周的1px、#000000的黑线(需要设计画出),来达到定义拉伸区域和文本区域的目的。

那这四条黑线又各自代表什么呢?

左上的两条黑线:定义圆角矩形的可拉伸区域

右下的两条黑线:定义圆角矩形中的文本区域


可拉伸区域的定义

当你在5、6区域的旁边画两条1px的黑线时,android程序便可以识别到这俩玩意儿是可以分别横向和纵向拉伸的,为了方便各位理解,这里借鉴了菜心大佬的方法,画了更浅显易懂的示意图。

当我们只画出左侧黑线时,相当于将圆角矩形划分为三个形状,两个深蓝色不可拉伸形状+绿色可拉伸形状。后者即黑线高度所对应的形状,可以实现纵向的自由拉伸:

如果黑线高度只有2px,可拉伸形状高度也同样会缩至2px,但依旧可以得到想要的高度:

这时可能有人想问:那到底要多高的黑线呢?

一般在实际项目中要考虑到图片占用的内存,因此我们需要尽可能得压缩图片尺寸,一到两个像素的黑线(可拉伸区域)足矣,没必要搞多长。

试想下,在一个有20个tag的筛选页中,如果每个tag定义了10px的纵向拉伸区域,相当于最终切图高度比2px高出8px,累计多出来的这160px毫无意义得降低了App性能,终端用户的体验也会受到连带影响。

而上侧的黑线同理,这里不再赘述。



文本区域的定义

有文本填充的情况下,则需要我们画出右下的两条黑线来限制文本的区域。

当没有黑线时,文本就会不受限制得撑满整个背景图。

而当我们只画出右侧的黑线时,就定义了文本的高度区域。

我们再加上右侧黑线,去限制下文本的宽度区域,一个像模像样的气泡就出来啦~


怎么画点九图

点九图的切图有工具(draw9patch)和手动两种方法,这里我结合实际案例仅讲解手动的方法,也建议小伙伴们可以自己亲手去试一下,知其然知其所以然嘛~

Sale Assistant是我目前负责的一个线上产品,android端中筛选界面的tag同样是随字段长度进行拉伸的需求,因此我们先拿它来开刀~(为了让大家能看清,我加深了tag颜色)

1. 首先,我们将其中一个tag切出透明png,并用PS打开(尺寸根据前端的要求来,这里只演示xxhdpi);

2. 新建参考线定义可拉伸区域的可删除部分。这里我需要将可拉伸区域缩减到2px,因此在每个圆角两边只预留一个像素;


3. 使用选框工具(M)选中刚刚定义的可删除的可拉伸区域,删掉它!


4. 将这四块部分(4个圆角和压缩后的可拉伸区域)拼合在一起,并用裁剪工具(C)裁剪画布,为黑线预留2px;


5. 用1px粗的铅笔工具(B)在可拉伸区域旁边画2px长度的线段即可~(必须是#000000的纯黑不透明线段)

6. 切图保存准备交付,命名后缀必须是.9.png哦。就此搞定,是不是很简单?



总结

最后来波小总结~

1.点九图是android端独有的切图格式;、

2.我们需要以1px的纯黑线段来定义图片的可拉伸区域和文本区域;

3.为了帮助前端小哥降低图片的占用内存,我们要尽可能得压缩可拉伸区域的尺寸;

4.最后的切图命名后缀必须是.9.png。




本文原创,未经作者允许不可转载!
更多内容,欢迎关注作者微信公众号:转行人的设计笔记!



0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户89,901人)

【2期】可爱简笔画入门训练营
距离开班仅剩1天184人已报名
【7月】电商海报设计训练营
距离开班仅剩2天63人已报名
8天打造4套热门产品界面设计
距离开班仅剩2天546人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
手机版
虎课移动APP
支持视频下载,随时随地学习
桌面客户端 >
邀新有礼
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:400-862-9191工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分

恭喜你,领取成功

开课时间:

新人免费领取免费¥99

扫码开通训练营权限

打开微信“扫一扫”功能
扫码上方二维码

免费学习97000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了100,740
并提交了2,379份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
恭喜!签到成功,获得 10 个虎课币
上上签 ·21August.2018
尽管眼下十分艰难,可日后这段经历说不定就会开花结果
— 唐代文学家 韩愈
训练营坚持完成打卡任务 报名费全额返更多>>
直播公开课学员好评率95%以上更多>>
登录虎课网,每天免费学课程全站 97000+ 视频会员教程 | 每日可免费学 1