Android-.9图详解

Android设备适配,图片方面很重要的一部分就是.9图的使用了,我们今天就来记录一下。

1. 什么是.9.png图片,和普通png图片的区别?

.9.png图片本质上还是png图片,区别是.9.png图比正常的png图片在最外围多了1px的边框,这就允许我们在这个1px的边框上定义图片的可拉伸区域以及图片的内容区域。这也就是说.9.png的制作实际上就是我们在这1px的边框上按我们的需求,把对应位置设置为黑线,然后系统帮我们自动拉伸了。

2. .9图四个边的黑线(黑点)的意义?

正常图片都有四个边,.9图的左上(左边和上边两条边)表示可以拉伸区域,其中上面黑线(或者点)表示横向可拉伸的区域;左边黑线(或者点)表示纵向可拉伸的区域.在图片拉伸时只有黑线区域内的图像会被拉伸,黑线两边的图像保持原状。

右下(右边和下边两条边)表示间隔区域,其中下边表示横向填放内容的区域;右边表示纵向填放内容的区域,在图片拉伸时,控件内部的文字上下左右边界只能放在黑线区域(有点类似垂直居中显示)。

3. 制作工具?

如果你还用eclipse开发,在你sdk中的tools文件夹找Draw9patch.bat文件,这是一个Windows 批处理文件,双击进入界面,拖入图片开始制作. 如果是studio直接以.9.png为后缀,双击编辑进入图片界面,选择左下角的9-patch即可开始制,或者图片右击在列表选则Create 9-Patch file即可。

4.实际操作一波

我们就以一个TextView为例,给其设置一个图片背景,效果如下: 直接设置为背景:

正常显示

可以看到,如果我们的文字少还可以,如果文字过多,就会出现背景图不能随文字的增多而自动拉伸,真丑。 开始制作.9图 先说一下底部复选框的含义:

image.png

1.首先我们要把图片下方的showbad patches勾选上,此时(如果点九图片绘制有误的话)会看到图片出现 报错的区域。 2.说明一下:图片下方的showcontent如果勾选上,会看到右侧的小图中出现蓝色的区域,代表的是可以自动 拉伸的部分。 3.如果发现你的点9图片太小或者极小,可以拖动图片下方的zoom放大图片,然后就可以精确操作了。

.9图各边框含义

image.png

处理为.9图之后

.9图显示

完毕!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:仿12306的APP登陆界面

设置输入的文本类型,默认设置为“Alphabet”,表示不限制输入的文本类型,如图5

9610
来自专栏WindCoder

iOS 下 input=text 等输入框,触发时,灰色背景

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个...

26410
来自专栏葡萄城控件技术团队

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

28990
来自专栏韩东吉的Unity杂货铺

零基础入门 8: Canvas和EventSystem

UGUI是新版Unity自带的原生UI系统,组件也在不断的增加扩展,基本的贴图,文本,按钮等还是可以用的。接下来的几篇内容会以UGUI展开分享。

16430
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

58090
来自专栏偏前端工程师的驿站

CSS魔法堂:稍稍深入伪类选择器

 过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分...

15020
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:快速在手机上实现日历功能

11820
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

34140
来自专栏梦魇小栈

工具使用篇之Markdown

实时预览工具只是为了达到所见即所得的效果而已, 适合初学者学习 Markdown , 我们真正在进行写作的时候,其实是不需要实时预览的, 因为 Markdown...

15030
来自专栏非著名程序员

基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的...

257100

扫码关注云+社区

领取腾讯云代金券