一文彻底读懂点9图

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
17700 38 197 2019-12-04


两年前我写了一篇关于点9图的原理科普文,近期收UI中国邀请,加点案例,再梳理一遍!

大纲如下:


1.什么是点九图

2.点九图的作用是什么

3.点九图的原理

4.案例1

5.案例2


1. 什么是点九图

点九图其实就是安卓系统中特有的一种图片格式,为了让大家更好的记住,我们只要知道,后缀名是“.9.png"的图片,就是点九图。



2.点九图的作用是什么

每个事物都有其存在的价值,所以先弄清楚点九图能为我们解决什么问题,这样后面理解起来就会容易很多。

其实点九图的用处就是帮助我们拉伸切图的,比如这个切图:


如果它需要纵向拉伸,直接拉会变成下面这个样子:



而用了点九图就可以让切图局部拉伸,而不是整体拉伸,这样就可以把容易变形的地方保护起来:



是不是拉伸的很完美!有黑线不用怕,那只是告诉安卓系统:“嘿,大兄弟,这是张点九图,特殊对待一下!”


3.点九图的原理


点九图最大的原则就是系统只认#000000的纯黑线或者点,还有就是四个边的四条线,左上两条线掌管可拉伸区域,右下两条线掌管内容显示区:



先说左上两条线,因为两条线原理是一样的,所以我们单独拿左边这条线来举例吧,当我们没有左边那条黑线时,纵向拉伸是这样的:




圆角是不是变形了,如果左边加一条黑线,就相当于把原来的图形分为三个部分:




当再次纵向拉伸的时候,只有标记了黑线的部分可以被拉伸,而上下两部分是完好无损的,想象一下,无论你拉伸到多高,是不是都不会变形了:




当然,你左边画一个点也可以起到相同的效果:



左边这条线是控制纵向拉伸的,所以上面那条黑线就是控制横向拉伸的,原理是一样的!


接下来我们来说右下两条线,是控制内容区域的,单独拿右边那条线来举例,如果没有右边那条黑线,在这个切图上输入内容,比如文字,是没有限制的,内容会撑满整个背景图:



当有了右边那条黑线后,切图相当于在纵向上又被分开了:


而这次是右边有黑线哦,别忘了右边的黑线是控制显示区域的,所以只有带黑线的部分才可以显示内容


当然,文字不会这样被切断一半显示的,这里只是方便大家观看哪里可以显示内容!

同样的原理,当我下面也画一条线后,横向上也是只有带黑线的部分可以显示内容(红线是辅助示意的哈):



这就是点九的基本原理了!


然后有几点需要强调一下:

·每条边画满黑线=没画黑线,就相当于没有起到保护作用。

·黑线或黑点一定是纯黑#000000

·左上两条线控制拉伸区,右下两条线控制内容区。

·输出的图片后缀必须是「.9.png」。


4.案例1

拿最近的一汽比赛为例,找到其中一个界面:





我们来切上面的进度条:




先来分析一下, 首先这个进度条内不会放置文字,所以对于右测和下方就不用管了(因为他们是控制显示内容的),其次这个进度条会发生的情况就是横向拉伸,但是如果我们不用点9,直接横向拉伸,就会导致结果如下:




圆角变形,没有被保护好,所以现在我们就需要利用点9来保护横向拉伸时的圆角,也就是在非圆角处画黑线,所以这个切图样式如下:



这样就可以保证横向拉伸不变形了。



5.案例2


还是一汽比赛的例子,界面如下:



我们要的切图是文字下面的光晕:



还是先来分析一下,首先这个切图不会被横向或者纵向单独拉伸,所以在拉伸上不用管,画整条黑线或者直接不画黑线都OK。


其次我们要管的就是内容显示区域,我们需要文字始终在光线的上面,也就是文字一定是在绿色区域上面(红色是整个切图的大小):



所以我们就可以在右侧画线的时候,把绿色这一块空出来,如下图:



这样就可以保证文字始终在光线的上面了。


好了,以上就是关于点9图的理解和总结,欢迎交流。



Powered by Froala Editor

全部评论:38

  • 江城GodLike

    2020-08-03 13:38

    导出的是一张带黑线的图吗

  • hu1hu

    2020-06-22 17:00

    @Q ๑: 黑色线不能画满,比如说内容居中,上下左右都有安全距离,黑线就要画在安全距离上,这样拉伸的时候只拉伸安全距离中的空白区域,而中间内容则不会被动,不知道你能不能听的明白。 或者这样说,你的上下左右边距都是60,那你的线就从上下左右画60长就好了。

  • 2020-03-29 16:19

    完蛋了,没从事过ui的不太明白,是不是后续是.9.png就可以了?需要特殊的导出方法吗? 是不是后续是这个,开发怎么拉伸都不会变形咧?望解答,谢谢

  • 快看猪会飞

    2020-02-12 11:15

    大触 讲的好清楚 简单易懂 感谢

  • 快看猪会飞

    2020-02-12 11:10

    大触 好棒

  • Q ๑

    2020-01-22 15:01

    @Q ๑: 引导页四周都是白的,内容区域在中间位置,黑线试了好多地方,后来在不同的屏幕尺寸还是会被拉伸。。。跪求解决方法

  • Q ๑

    2020-01-22 15:00

    请问引导页怎么切图,安卓的三个尺寸上传上去会变形,后来画了黑线还是没什么用。

  • 鲸玖TIAN

    2020-01-09 10:58

    上次我们安卓让我切点九 我表示一脸懵,看了这个我懂了,谢谢~ 但是这个.9图我看楼主说黑线自己画,然后切图的时候切出来就行了,那切图是需要用特殊工具切的吗?

  • 155***3375

    2019-12-25 23:14

    @菜心设计铺: 上次组长给我一个不规则button,让我给前段输出点九图,给我整懵圈了。不规则的那一面怎么弄也有问题

  • 大衍一

    2019-12-19 15:18

    好像跟前端讨论过,我记得他说.9早就不用了,现在实现用不到.9了。所以也没有输出过.9的切图。。。。

  • lisy

    2019-12-19 10:11

    案例二没有明白诶、

  • Sword_Z

    2019-12-19 09:31

    @A hero彬☀: AI中图形没有扩展拉伸是不会变形的,还可以用直接选择工具选中锚点拉伸

  • 潘子_Panzero

    2019-12-17 14:12

    之前做聊天气泡,给安卓这样切的.9,后面安卓说还是识别不出来,不知道啥原因

  • 奇一的大腿

    2019-12-14 11:14

    简单易懂

  • A hero彬☀

    2019-12-11 09:57

    我没看懂 但是在PS里边拉着没问题 在AI 里边拉着会出现圆角变形 那我是不是在AI画的时候 要在两条边上格各自加上两条线

  • Lixxxxing

    2019-12-10 09:41

    清晰明白~get了

  • 2019-12-09 11:33

    是不是在有“圆角设计”的地方都需要单独切一张“点九”的图啊??

  • 菜心设计铺

    2019-12-09 10:41

    @我不是你的小浣熊玩不出你的其乐无穷: 可能开发帮你切了

  • 一只玥子

    2019-12-09 10:40

    我工作中碰到点9切图,是切一个较小的可拉伸的正方形状就好,倒也没有要加黑线啦

  • 一只玥子

    2019-12-09 10:39

    @我不是你的小浣熊玩不出你的其乐无穷: 比如微信的聊天界面的消息框就需要的

  • 我不是你的小浣熊玩不出你的其乐无穷

    2019-12-09 10:06

    为什么我切图的时候没用过这哥点九切图呢?不是直接用切图插件直接导出不同分辨率的图就好了吗?什么情况下一定要用到点九切图呢?

  • Kumonouemade

    2019-12-06 17:32

    @不谙温柔: +1

  • orclo

    2019-12-06 16:27

    @Evalin_rui: iOS 直接就能在导出图片上做设置,中间拉伸四周保护。resizableImageWithCapInsets 这个工具选项。

  • Evalin_rui

    2019-12-06 11:52

    想问一下 安卓是用这种方式解决图形拉伸问题,那IOS如何解决这种问题呢?

  • 不谙温柔

    2019-12-06 11:29

    @名字只是个代号而已: 工作以来没切过.9

  • 菜心设计铺

    2019-12-05 18:46

    @: 对呀

  • 三通啊

    2019-12-05 18:00

    不吹不黑,我大一课本上就有的知识,大概就是,开车要系安全带的知识点。感谢大神分享!让我温故而知新, 术业有专攻,任重而道远。

  • 2019-12-05 17:26

    那个黑线是自己画上去吗,包含黑线一起输出吗?

  • Maorimol

    2019-12-05 17:22

    切图的时候是在左、上、右、下画上黑色的线,然后沿着边缘切成一张图吗?然后命名为.9.png是这样切的吗?

  • 菜心设计铺

    2019-12-05 16:58

    @叁455811: 这个图,不会单独横向拉伸,也不会单独纵向拉伸,都是等比缩放,所以拉伸不需要保护,所以左、上全画和不画都是可以的

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票