安卓点九图切法

简介: 点九图,是 Android 开发中用到的一种特殊格式的图片,文件名以”.9.png“命名。这种图片能告诉开发,图像哪一部分可以被拉伸,哪一部分不能被拉伸需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应。点九图常用于对话框和聊天气泡背景图片中。制作点九图有四个硬性要求,只要满足这四点,点九图就可以被正确识别。要求一:名称格式必须为:文件名称 .9.png。要求二:上下左右各留有 1px 的标识线区,此区内不能有半透明像素(特别注意:切图若有投影,不要泄漏到标识线区)。要求三:伸缩标识线与内间距标识线为不透明的纯黑色(#000000),光学标识线为不透

点九图,是 Android 开发中用到的一种特殊格式的图片,文件名以”.9.png“命名。这种图片能告诉开发,图像哪一部分可以被拉伸,哪一部分不能被拉伸需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应。点九图常用于对话框和聊天气泡背景图片中。


image.png


制作点九图有四个硬性要求,只要满足这四点,点九图就可以被正确识别。

要求一:


名称格式必须为:文件名称 .9.png。


要求二:


上下左右各留有 1px 的标识线区,此区内不能有半透明像素(特别注意:切图若有投影,不要泄漏到标识线区)。


要求三:


伸缩标识线与内间距标识线为不透明的纯黑色(#000000),光学标识线为不透明的纯红色(#ff0000)。


要求四:


点九图的特殊结构会导致其4个顶角处成为“绝对禁区”,这4个1像素×1像素的区域内不能有任何内容。


伸缩线详解



伸缩线标注了切图内的拉伸区域/收缩区域。一般来说点九图越小越好,因此通常切图尺寸都要小于控件尺寸,但这并不意味着不会出现切图尺寸大于控件尺寸的情况,在这种情况下,切图会根据伸缩线来进行缩小。


从实验的结果得到三个结论:


1.切图拉伸时,仅伸缩区会被拉伸。


2.切图收缩时,首先伸缩区会被收缩。


3.当伸缩区缩小到0之后,切图整体继续收缩(Android 4.3之前表现不同,谷歌公布的Android系统9月份的月度版本分布图数据显示4.3之前的机型占比不足7%,所以可忽略此情况)。


每个区域的拉伸/放缩长度与本区的伸缩标识线长度成正比。


内间距线详解



内间距线所标注的是控件的内间距,而不是点九图的内间距,所以,内间距线跟点九图本身并没有直接的联系。


1.横向内间距线的左端到切图左端的距离为控件的左侧内间距值;


2.横向内间距线的右端到切图右端的距离为控件的右侧内间距值。


例如,对话框是圆角,文字需要被包裹在其内,如果纵向显示内容区域顶到两遍,显示的效果会是如下图。


image.png


image.png


虽然内间距线也可以画为多段,但是系统只关心最左端最右端的位置,所以多段内间距线是没有任何意义的。


点九图中的内间距线,仅在代码中没有指定Padding属性的时候才会生效,但这不代表可以忽略点九图中的内间距线。我建议没有特殊要求,  点9图都带上内边距线, 避免写padding具体的数值.


视觉边界布局(Optical bounds layout)


是在Android 4.3(Api level 18)中引入的一种新的布局对齐方式。


光学边界也叫做视觉边界,下图是一个带有投影的蓝色按钮切图。在视觉上,此图形的外轮廓是蓝色按钮所占区域,而不是切图实际所占区域。光学边界线标注的位置为投影的位置,表示此区域在视觉上不可察觉。


image.png


对于那些有透明空白边的控件来说,使用视觉边界布局在显示效果上更加整齐。 不然的话,要保证每个控件的空白透明边都是一样的才能保证内容对齐。


image.png


边界对齐了


注意:


  1. 最外边的 1px 线段必须是纯黑色(#000000),一点点的半透明的像素都不可以有,比如说99%的黑色或者是1%的投影都不可以有。(这1PX 像素在程序最终输出的效果中不会被显示),光学标识线为不透明的纯红色(#ff0000)。


  1. 文件的后缀名必须是 .9.png,不能是 .png 或者是 .9.png.png,这样的命名都会导致编译失败。


  1. 点九图的特殊结构会导致其4个顶角处成为“绝对禁区”,这 4个 1像素×1 像素的区域内不能有任何内容。

    image.png


  1. 站在安卓开发的角度, 如果是纯色背景建议放在 drawable-nodpi 下, 如果是非纯色, 例如有边框, 按照行业标准一套图, 图简便放在 drawable-xxhdpi 下,  在加载背景的时候系统会进行缩放, 如果有条件多套图就多套图。


.9图其他说明



.9图放置在不同 dpi 文件夹下的效果


注: 若.9图可以设置为本身不透明,看实际需要了。例如以下就没有设置为透明。

.9图放到 ldpi 的效果


image.png


和 xxdpi 的效果


image.png


参考


点九切图你知道怎么切吗?-UI 中国-专业用户体验设计平台


https://www.ui.cn/detail/285877.html


点九图完全解析<附官方工具>-UI 中国-专业用户体验设计平台


https://www.ui.cn/detail/290941.html




目录
相关文章
|
1月前
|
人工智能 vr&ar Android开发
深入探索安卓与iOS的未来发展
【10月更文挑战第8天】 本文将深入探讨安卓和iOS两个主流操作系统的未来发展,从技术创新、用户体验和市场竞争等多个角度进行分析,揭示它们在技术演进中的趋势以及面临的挑战。
53 3
|
1月前
|
安全 Android开发 iOS开发
探索安卓与iOS的未来发展
【10月更文挑战第12天】 随着科技的飞速发展,移动操作系统已经成为人们日常生活中不可或缺的一部分。本文将探讨安卓和iOS系统的未来发展,分析它们在技术创新、用户体验和生态系统建设方面的潜力,并展望未来可能的趋势。通过比较两者的优势和挑战,我们希望为读者提供一个全面而深入的视角,帮助他们更好地了解这两个主流移动操作系统的未来走向。
33 0
|
21天前
|
搜索推荐 Android开发 iOS开发
安卓与iOS的较量:选择最适合你的移动操作系统
在智能手机市场上,安卓和iOS一直是两大主流操作系统。本文将深入探讨这两个系统的优缺点,帮助你根据自己的需求做出最佳选择。
|
3月前
|
安全 Android开发 iOS开发
安卓与iOS的较量:哪个更适合你?
在智能手机的世界里,安卓和iOS是两个主要的操作系统。它们各自有着不同的优点和缺点,那么哪一个更适合你呢?本文将从用户界面、应用程序、安全性等方面进行比较,帮助你做出决定。
|
3月前
|
IDE 开发工具 Android开发
安卓与iOS开发之比较:选择适合你的平台
在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据半壁江山。本文将深入浅出地探讨这两个平台的开发环境、工具、语言和市场差异,帮助开发者根据自己的需求和偏好做出明智的选择。无论你是编程新手还是资深开发者,了解这些平台的核心差异将助你一臂之力,让你的技术之路更加顺畅。
36 2
|
3月前
|
安全 搜索推荐 Android开发
安卓与iOS的较量:选择适合你的移动操作系统
在移动设备的世界中,安卓和iOS是两大巨头,它们各自拥有独特的优势和特点。本文将深入探讨这两个操作系统的核心差异,包括它们的设计理念、用户界面、应用生态、安全性、以及更新机制。无论你是科技爱好者还是普通用户,了解这些差异将帮助你做出更明智的选择,找到最适合你个人需求的操作系统。让我们一起探索这场持续已久的较量,看看哪个系统能更好地满足你的移动生活需求。
55 1
|
3月前
|
安全 搜索推荐 Android开发
探索未来:安卓与iOS的技术创新之路
在数字时代的浪潮中,安卓和iOS两大操作系统如同巨轮,引领着智能设备的发展。本文将深入浅出地分析这两大系统的最新技术动态,探讨它们如何塑造我们的数字生活,并展望未来可能带来的变革。通过比较和对比,我们将揭示这两个平台的独特之处以及它们面临的挑战,同时提供一些关于如何选择适合自己的操作系统的实用建议。
56 1
|
3月前
|
搜索推荐 安全 Android开发
安卓与iOS的较量:哪个系统更适合你?
在智能手机市场中,安卓和iOS两大操作系统一直占据主导地位。本文将从多个方面对这两个系统进行比较,以帮助读者更好地了解它们之间的区别和优劣。我们将重点关注它们的用户界面、性能、安全性、应用生态等方面。无论您是安卓粉丝还是iOS忠实拥趸,这篇文章都将为您提供有价值的信息。让我们一起探索这两个系统的世界吧!
|
5月前
|
安全 Android开发 iOS开发
安卓与iOS移动操作系统的发展与比较
在移动互联网时代的今天,安卓和iOS作为两大主流移动操作系统,各自以其独特的特性和生态系统深刻影响着全球用户。本文将探讨它们的发展历程、核心特点以及在用户体验、开发生态和安全性方面的比较。
106 1
|
6月前
|
存储 SQL 数据库
安卓移动应用开发(安卓系统开发教程)
安卓移动应用开发(安卓系统开发教程)