美文网首页
点九图的制作和注意事项

点九图的制作和注意事项

作者: 骑着蜗牛闯世界666 | 来源:发表于2018-02-04 21:47 被阅读0次

开发的过程中,会遇到一些给按钮设置一个图片作为背景,因为按钮的文字是不固定的,因此需要这个时候普通的图片就不能很好支持这种场景的需求了,在比较多文字的时候,可能会存在拉伸的情况。这个时候就可以用到点九图来实现我们想要的效果,同时,如果想要做一个有阴影的背景图,使用点九图片也是一种选择方案。

一、点九图的制作

点九图的制作工具可以使用sdk自带的draw9patch.bat工具,这个工具位于sdk/tools下面,主要的操作步骤如下:
1、进入到sdk/tools目录下,执行draw9patch.bat,会出现如下对话框:


image.png

2、将你的图片拖动到该窗口执行编辑操作


image.png

1号黑色条位置向下覆盖的区域表示图片横向拉伸时,只拉伸该区域
2号黑色条位置向右覆盖的区域表示图片纵向拉伸时,只拉伸该区域
3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域
4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域
没有黑色条的位置覆盖的区域是图片拉伸时保持不变(比如,如果图片的四角为弧形的时候,当图片被任意拉伸时,四角的弧形都不会发生改变)

3、编辑完成之后,点击右上角的File,执行save操作即可
4、拷贝存储的图片放在你的工程中使用即可,不需执行其他的操作。

可能遇到的坑

拉伸的高度不对

有时候设计师给你的图可能是四周留有边距的,并且上下的边距可能不一致,这个时候你就要注意2区域的拉伸情况了。虽然要拉伸的区域可以是除了圆角其他的区域,但是如果你的位置是放在了中间偏下的区域,如果图片的上下间距不一样的话,可能就会出现上面白色的区域过小,下面白色的区域过大的情况。

View自带padding?

如果给一个view设置了一张点九的图片作为背景图,并且你的实现跟view的padding有关,这个时候可能会遇到一个比较诡异的情况,明明就没有给view设置padding,为啥打印出来的padding并不是0呢?其实只要我们看一下setBackgroundDrawable的源代码,我们就知道,其实在这一步,是会去拿点九图的一些属性,给view设置padding的。并且padding的大小,跟3、4区域的黑色线的大小有关。详细的可参考官方的介绍:http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

参考链接

1、http://blog.csdn.net/pugongying1988/article/details/6938972
2、http://su1216.iteye.com/blog/1536253

相关文章

  • 点九图的制作和注意事项

    开发的过程中,会遇到一些给按钮设置一个图片作为背景,因为按钮的文字是不固定的,因此需要这个时候普通的图片就不能很好...

  • Android 点九图片制作步骤

    点九点图的制作和使用: 首先看一下点九图片和非点九图片的效果: 非.9拉伸之后的样子 .9拉升之后的样子 使用.9...

  • 点九图使用注意事项

    如图1,要想通过点九图实现以箭头为对称的背景,那么箭头左右两边设置的可拉伸的部分应为1px,不然会出现拉伸不对称的...

  • Android点九图注意事项

    1.简介 我们知道在安卓开发中,由于安卓机型繁多,屏幕适配是个很常见的问题.在不同的机型下,如果使用同一张图片,那...

  • 看完这篇基础科普,别再说你不会用点九图了!

    先来看看大纲: 什么是点九图 点九图的作用是什么 点九图的原理 总结 一. 什么是点九图 点九图其实就是安卓系统中...

  • 点九图

    在sdk的目录下,tools目录下,找到draw9patch.bat打开,对图片进行“描点”处理。

  • “996”工作制——勤奋的背后

    第一次看到“996”工作制,是在有赞年会舆论漩涡评论中。所谓的“996”工作制,就是早上九点上班晚上九点下班每周工...

  • 【Android】点9图,点九图

    第六节视频的内容,真正做起来才发现自己一点都不了解这个点9图。 概述 官网截的: A NinePatchDrawa...

  • 点九切图

    图片格式〔.9.png〕 在线生成点九〔http://romannurik.github.io/AndroidAs...

  • 制作Nine-Patch图片(九点图)

    为什么制作九点图 今天简单记录一下九点图的制作方式,那么制作九点图的作用是什么呢,我们先看一个例子,下面是一个聊天...

网友评论

      本文标题:点九图的制作和注意事项

      本文链接:https://www.haomeiwen.com/subject/wjcvzxtx.html