详解Android .9.png “点九”图片的使用

所属分类: 软件编程 / Android 阅读数: 61
收藏 0 赞 0 分享

“点九”图片概述

这里写图片描述 

“点九”是andriod平台的应用软件开发里的一种特殊的图片形式,文件扩展名为:.9.png。
我们都知道android平台有多种不同的分辨率,很多控件的切图文件在被放大拉伸后,边角会模糊失真,而使用点九PNG技术,可以将图片横向和纵向同时进行拉伸,以实现在多分辨率下的完美显示效果。
而且使用*.9.png图片技术,只需要采用一套界面切图去适配不同的分辨率,大幅减少安装包的大小。程序不需要专门做处理的就可以实现其拉伸,也减少了代码量和开发工作量。

【普通拉伸和点九拉伸效果对比】

这里写图片描述 

很明显看出,使用点九后,仍能保留图像的渐变质感,和圆角的精细度。

从中我们也可以理解为什么叫“点九PNG”,其实相当于把一张png图分成了9个部分(九宫格),分别为4个角,4条边,以及一个中间区域,4个角是不做拉升的,所以还能一直保持圆角的清晰状态,而2条水平边和垂直边分别只做水平和垂直拉伸,所以不会出现边会被拉粗的情况,只有中间用黑线指定的区域做拉伸。结果是图片不会走样。

制作自己的“点九”图片

“点九”图片制作有两种方式:使用 “draw9patch”工具和PS技术。这里我们只讲前一种,流程如下:

这里写图片描述

安装工具

首先你需要给自己的电脑安装上JDK在系统的默认目录下。
然后使用andriod模拟器—android-sdk-windows,打开SDK/tools目录下的“draw9patch.bat”文件,出现载入窗口:

这里写图片描述

导入并编辑

将png图片拖拽到该窗口中,或者File –> Open 9 patch,如下图,自动进入编辑界面。图中介绍了每个区域的内容及功能注释。

这里写图片描述

右侧是视图的预览区域,分别对应纵向拉伸预览、横向拉伸预览和双向拉伸预览。
现在我们在图片边缘点击左键,绘制出黑线,即图片需要被拉伸的区域和内容显示区域。如上图,对4条黑线做了注释。
上边黑线:横向拉伸区域,必须要画的,拉伸是横向拉伸,如右边的区域第二个拉伸的就是横向拉伸的效果
左边黑线:纵向拉伸区域,必须要画的,拉伸是纵向拉伸,如右边的区域第一个拉伸的就是纵向拉伸的效果
下边黑线:可选,横向内容显示区域
右边黑线:可选,纵向内容显示区域
注意,1.黑线必须是连续的,如果你感觉画的不好,按shift+鼠标左键将其擦出,然后重新画。2.如果这是有显示文字的窗体,那么这时右边和下边黑线不能省略,否则文字位置会显示在左边和上边黑线控制的拉伸区域,从而引起错乱。

【draw9patch.bat其他功能说明】
Show lock:显示不可绘区域
Show patches:预览这个绘图区中的可延伸宫格
Show patches:预览视图中的高亮区域(紫色区域)
Show bad patches:在宫格区域四周增加一个红色边界,这可能会在图像被延伸时产生人工痕迹。如果你消除所有的坏宫格,延伸视图的视觉一致性将得到维护。

保存和输出

点击左上file- save,保存文件,自动生成一张后缀名为“*.9.png”格式的图片,图片上下左右各增加了1px的黑线。

最后,截两个项目里面的图来看一下效果,背景在纵向拉伸后完全没有失真:

这里写图片描述

这里写图片描述

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

Android样式和主题之选择器的实例讲解

今天小编就为大家分享一篇关于Android样式和主题之选择器的实例讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享

Android应用动态修改主题的方法示例

今天小编就为大家分享一篇关于Android应用动态修改主题的方法示例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享

Flutter 网络请求框架封装详解

这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Flutter倒计时/计时器的实现代码

这篇文章主要介绍了Flutter倒计时/计时器的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Android使用google breakpad捕获分析native cash

这篇文章主要介绍了Android使用google breakpad捕获分析native cash 的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

详解Flutter WebView与JS互相调用简易指南

这篇文章主要介绍了详解Flutter WebView与JS互相调用简易指南,分为JS调用Flutter和Flutter调用JS,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android开发实现ListView和adapter配合显示图片和文字列表功能示例

这篇文章主要介绍了Android开发实现ListView和adapter配合显示图片和文字列表功能,涉及Android使用ListView结合adapter适配器实现图文显示功能相关的布局、解析、权限控制等操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Android文字基线Baseline算法的使用讲解

今天小编就为大家分享一篇关于Android文字基线Baseline算法的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享

Flutter自定义实现神奇动效的卡片切换视图的示例代码

这篇文章主要介绍了Flutter自定义实现神奇动效的卡片切换视图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android实现自定义滑动刻度尺方法示例

这篇文章主要给大家介绍了关于Android实现自定义滑动刻度尺的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享
查看更多