首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android-.9图详解

Android-.9图详解

作者头像
android_薛之涛
发布2018-10-09 12:18:19
2.2K0
发布2018-10-09 12:18:19
举报
文章被收录于专栏:Android-薛之涛Android-薛之涛

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图显示

完毕!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.09.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 什么是.9.png图片,和普通png图片的区别?
  • 2. .9图四个边的黑线(黑点)的意义?
  • 3. 制作工具?
  • 4.实际操作一波
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档