android:NinePatch图片制作
一、工具介绍
这是一张PNG图片,为了方便观看做的比较大。在Android中使用NinePatch图片的一般都是很小的图片,因为当内容多了的时候,背景会自动拉伸来适应内容,而如果图片做大了,内容少,则图片也不会自动变小,所以用作NinePatch图片的png图片一般是比较小的。
打开Android自带的NinePatch图片制作工具(Android SDK目录下的 /tools/draw9patch.bat),并且打开上面的图片,如下:
打开图片后,在位置1的地方,可以看到图片的周围多了1圈1像素大小的透明的点,这就是我们要进行NinePatch图片制作的地方。
1. 位置1:编辑区。
在这个区域来设置图片的“拉伸区域”和“内容区域”。注:“拉伸区域”意思是哪个区域是可以进行拉伸的;“内容区域”,如一个Button、TextView,Button中有文字,则这些文字所在的区域即为内容区域。又如一个Linearlayout,这个布局里面的内容显示的地方也是内容区域。
2. 位置2:拉伸预览区域。
这是模拟垂直拉伸、水平拉伸、垂直水平都拉伸的3种情况的预览图。从上图中可知,“Zoom”是100%,也就是原图的编辑区的大小是原图大小,再看拉伸预览区域,垂直拉伸时,上下两条边的线条宽度被拉高了一倍,因为“Pathch scale”设置的是2x,也就是拉伸为原来的两倍,垂直拉伸后高度就是原来的两倍了,水平拉伸后则宽是原来的两倍了,两边都拉伸后则宽高都是原来的两倍。从上图可知,水平拉伸后,左右两条边的线条宽度比原来宽了一倍,而两边都拉伸的预览图可知4条边的线条宽度都被比原来宽了1倍。
3. 位置3:Zoom - 编辑区显示大小的调整,如果编辑区太小不好编辑,则可以调整这里把编辑区放大
4. 位置4:Patch scale - 拉伸倍数,调整拉伸倍数可以方便的查看拉伸不同倍数后的效果
5. 位置5:Show lock - 显示锁定的区域,即不可编辑的区域
6. 位置6:Show patches – 显示拉伸区域
7. 位置7:Show content – 显示内容区域
8. 位置8:显示使用提示信息
二、工具实战
1.把编辑区视图显示调大,如下:
2.为了方便查看拉伸后的效果也把拉伸比例调大一些:
3.显示不可编辑区域,如下图,当把鼠标移到图片上时就会显示不可编辑区域,即红色框中的区域,现实中最外的红色框是没有的,这里加一个红框只是为了方面观看,从下图可看到红框外由一个像素大小的透明线条围了起来,这条线条即我们要编辑的区域。
4.显示会被进行拉伸的区域,如下的粉红色区域即是会被拉伸的地方,其他的地方将不会被拉伸,也就是说不管怎么拉伸,变的只是粉红的区域,其他的区域的形状什么的都不会发生变化:
注:对于会进行拉伸的区域很多人都是这么说的,其实应该用一种更加准确的说法是“粉红色区域包括粉红色区域的前后左右的部分都是拉伸部分,其他的才是不会被拉伸的部分,我再加些边框后效果图如下:
上图中粉红色区域,和它上下左右的4个蓝色框区域都是拉伸的区域,其他还有4个红框的区域则是一直保持不变的区域。从这张图可看到总共有9个区域,所以称这样的图片为NinePatch图片。
5.显示内容区域,如下图中蓝色的区域即内容区域,如一个TextView设置了下面的图为背景,则文字显示的区域为下面的蓝色区域:
6.画黑线的快捷方式
如上图,把鼠标移到编辑区的灰色区域,上、下、左、右都可以,如上图移到了上方的灰色区域,此时看到了两条灰色线,拉动这两条灰色线即可画出黑线,如下:
如上图,拖动右边的线向左拖,发现左边自动出现了一条黑线,继续向左方向拖是渐渐的消除这条黑线,如果一直拖到与最左边的灰色线重合,则这一条黑线都被消除了,如下图:
经常的情况是我们要自定义的画出黑色线,也就是可以从任何地方开始画黑色的线,方式也很简单,在灰色的地方按下鼠标开始拖动即可,如下:
如上图是从随意的一个位置按下鼠标向右拖动拖出来的一断黑色线。上、下、左、右四条边的黑色线都可以用类似的方法来画。当然了,也可以在透明的线上直接点或者拖动来画黑色线,如下:
如上图就是在透明的线上随意位置按下鼠标向右拖动,当松开鼠标时黑色线就出来了。
删除黑色线,前面说了一种删除黑色线的方式,也可以使用Shift + 点击/拖动 来实现,如下:
7.这个知识点抄于网上
点击这个按钮,如果有坏的拉伸,则会显示出红色。
在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,如果完全消除该内容则图片拉伸后是没有变形的,也就是说,不管如何缩放图片显示都是良好的。 (实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一般来说只要色差不是太大不用考虑这个设置。)
三、制作NinePatch图片实战
3-1 制作拉伸区域
为了方便知道使用NinePatch图片带来的好处,这里再使用另一张图片来进行解讲,如下:
这是一个圆角的图形,因此在进行拉伸时,4个圆角应该保持不变,变的是4条直线。
有时发现打开png图片后发现四周的透明区域不太规则,不是说只会在原图形的周围多一像素的空间而已吗?这时拉动一下Zoom的比例的可以了,如下图:
这里我们要实现拉伸时线条的宽度不变,四个圆角不变。很多人在作用NinePatch图片时都是画一条一条的黑线,其实是他们没能够理解透NinePatch图片的制作,如这里要达到拉伸时线条的宽度不变、四个转角不变,只需要点两个点就够了,如下:
从上图的拉伸预览图可以看到线条宽度没变,4个圆角也没有变。有了前面的理论就容易理解了,在进行水平拉伸时,拉伸的是垂直的那条线的区域,垂直线的两边不会被水平拉伸的,如下图红框是会被水平拉伸的区域,它的左右两边的区域将保持不变:
相应的,垂直拉伸时拉伸的是水平的那条线的区域,这条线的上下两部分是不会被垂直拉伸,如下图中的红色区域会被拉伸:
3-2 制作内容区域
如果图片只是拉伸的功能,上面的知识就够用了。制作内容区域是可选的,如果你没有这个需求就不需要制作内容区域。如果这个图片要用作某些容器的背景,如用作TextView的背景时,TextView中的文字的位置应该是怎样的呢?
如:公司要求这样:需要文字是靠矩形的底部对齐的,应该怎样制作符合这样要求的NinePatch图片呢?
这里还是使用上图的基础上制作,如下:
如上图,在下方画了一条黑钱,则这条黑线就定义了红框这个区域,当然,上图中的红框、蓝框是我画上去的为了方面讲解。这样内容只会出现在红框中,而不会出现在它左右两边的蓝框中。从右边的拉伸预览图也可以看到效果,把“Show content”勾上,则拉伸预览图就可以看到蓝色的区域,这些区域就是文字出现的地方。
接着来设置文字靠矩形的底部对齐,其实这样说不太对,因为当内容小于NinePatch图片设置内容区域的高度时,内容就小于内容区域,那这时内容应该显示在内容区域的哪里呢,这时就要配合gravity来调整。NinePatch图片编辑如下:
如上图在右边画了一条黑线,这条黑线偏下,它定义了内容在垂直方向的位置是偏下的,底部和右边这两条线的交叉部分,如上图的画了斜线的红框即为内容区域,文字将显示在这个区域。
其实这样理解内容区域是错误的,因为图片是会进行拉伸的,正确的理解应该是这样的:底部的黑线和右边的黑线是给内容设置padding,这样比较好理解,如上图设的内容设置用padding来理解如下图:
在Android的布局的TextView使用这张背景,代码如下:
效果图如下:
可看到字体的左右是有一些padding,而上下是方向的padding则是上方的比较大,看起来就像是文字在底部对齐一样。因此,NinePatch图片做的好,连TextView在布局中的padding设置都省了。
四、学习例子
更多的NinePatch图片的制作例子,可查看AndroidSDK目录下的图片,如:sdk\platforms\android-19\data\res\drawable-ldpi
,使用搜索查找NinePatch图片,然后看官网的图片都是怎么点这些黑线的,有什么值得学习的,为什么别人这么点?多看,对于理解NinePatch图片的制作一定大有帮助的,搜索结果如下图:
1.如用ps打开这张图片:
放大:
从这张图片可以看到左边、上边都点了两个黑点,他的意图是什么呢?通过上面的学习分析,它这就是设置了拉伸区域在图形中间的加号的四周,即不管怎么拉伸,图形中间的加号是不会变大、变形的,也就是不会发生改变的。又如下面的图是为了保持中间的减号不被拉伸:
2.
3.如果某个NinePatch图片你看不明白他的意图,则可以把它复制到你的Android项目中,然后使用它,看看是什么效果即可知其意图。如有一张这样的NinePatch图片:
你想象不到使用它会是什么效果吧?这就是人家的高招,如果你不去看别人的,你自己就不会懂得像人家这样去制作NinePatch图片,所以要多看,如应用上图的NinePatch图片效果如下:
4.看下面两张这样的NinePatch图片:
它就是一条透明灰色的水平线,和一条黑色的垂直线,没有必要做成NinePatch啊,为什么呢?
使用这条线看看什么效果,如下:
很经典的一条线,所以需要用到这条线时,我们为何还要自己去制作呢,直接使用:android:background="@android:drawable/menu_separator"
,这样做需要注意,可能在不同的版本这条线可能显示效果不一样。
5.
这张就是保留发光的光晕不会被拉伸,拉伸的是中间白色的区域。文字内容也只会出现在白色区域。
6.
这张是为了保留右边的箭头不被拉伸。
7.
看着是个椭圆,使用后效果为:
8.再看看这些NinePatch图片的意图是什么?
答:这张图片也很高明,放大镜永远不会被拉伸,水平方向的拉伸是顶部右边的那个点,关键是垂直拉伸了,这是左边的那个点,拉伸的是这个点,而这个点是透明的,所以垂直拉伸时不会对下面有颜色的图片的形状有影响。
9.再来看这张,完全无法想象使用后会是什么效果,只能实际使用去直观的看了:
用作TextView的背景后为:
10.
这是scrollbar_handle_vertical.9.png,使用在imageView后为:
看上图NinePatch图片的两边明明是透明度比较高呀,可效果为什么是边线的颜色比较深?
11.还有这么小的NinePatch图片:
btn_default_transparent_normal.9.png
使用后的效果为:(真美!)
12.再看这个透明的NinePatch图片又有什么意图:
使用的效果为:
看了效果才明白其意图,就是图片就设置好了paddingLeft的,如下调用View的宽度后的效果:
不理解原理的人,以为下面的点就是内容区域,就会认为内容应该显示在图片的右边,实际上不是,跟据前面所学,下面的点是设置padding的,也就是paddingLeft是固定的矩离,如下图:
如果是这样的话,那paddingRight就是0,所以我们在保持长度不变的情况下增加文字,如下:
哈哈,证明了我的猜想是对的呀!!
如果NinePatch图片真的是设置了paddingLeft的值的话,那我在代码中把paddingLeft设置为0,看看效果:
猜想是对的!!!学习只用脑子想是不是对的,不要猜想,要用实践去证明!!
13.再来看一张使用相同原理的图:
效果为:
这达到了drawableRight的效果,并且图片已经是和文字居中的。
14.
看着像是个圆形,其实他它是个圆角矩形,真是想不到啊!做图的人太牛了!把图片的容量做到了最小,节省apk的大小啊!
15.再来看这张又有什么高明之处呢?
divider_horizontal_dark.9.png
不知道高明在哪里。但相信Google的人不会这么无聊的,肯定有高明的地方。
这个就一像素的颜色,更加不明白其意图何在。
此时想我起我曾经在用友面试时,一位技术官问我,在ListView中是使用图片做分隔线好还是直接使用Shape图形好,技术官后来说是使用图片的好,因为Android的图形渲染机制不够好,如果直接使用Shape效率就会比较低、比较耗内存。这样可以解释为我们尽量的使用图片,而不要直接使用代码来画图形。
16.
这个就是为了图片的图形保持不变,如果只是这样那在使用图片时用wrapcontent即可,它这样做又会带来什么好处?答:为了可以使背景图片适应任何的控件大小,而且保持图形大小不变。适应大小是为了使点击事件更容易发生,因为控件大的话点中的机率就会大。
android:NinePatch图片制作的更多相关文章
- Android必知必会--NinePatch图片制作
本文为CSDN学院免费课程<NinePatch图片制作从入门到精通>的笔记,建议新手先观看视频,整理此笔记是为了便于自己复习,有NinePatch基础的朋友可以直接观看第四部分.--[转载 ...
- Android Nine-patch(.9.png)小结
最近在项目开发过程中,因为界面布局美化的需要开始接触到.9.png,无论是Goolge官方文档还是网上其他资料, 都给出了很多关于.9.png的基本介绍,.9.png基础文章推荐以下几篇: Googl ...
- Android draw9patch 图片制作与使用
理解一下4句话: 上边 决定左右拉升不变形 左边 决定上下拉升不变形 右边 设置内容高度区域 下边 设置内容宽度区域 下面我拿张图片分别举例说明: 1.QQ多彩气泡 聊天对话框也用.9图片制作 继承过 ...
- android .9图片制作与注意
首先找到你的开发软件所依赖的SDK,在电脑中找到这个SDK的安装路径,如果有太多SDK分不清楚,Window→Android SDK Manager 点开可以看到你的依赖SDK路径,多余的不说直接发个 ...
- Swing杂记——Swing中引入Android的NinePatch技术,让Swing拥有Android的外观定制能力
[摘要] 本文诣在展示如何在Swing中引入 NinePatch技术(早期有文章里中文译作九格图,暂且这么叫吧^_^,但此术非传统移动手机上的功能布局——九格图哦). [准备篇] Q:何为 NineP ...
- Android项目开发填坑记-9patchPng报错
如果阅读体验不佳,请使用–> Github版 背景 之前写了一篇文章Android必知必会–NinePatch图片制作详细介绍了Android 9Patch图片的制作和一些Demo展示,这次说明 ...
- android .9图片的制作
android .9PNG图片制作 在android开发的过程中,我们经常因为没有好的美工图片失真,这样使界面看起来要逊色很多,有的时候可能我们会想在drawable-hdpi,ldpi,mdpi下放 ...
- Android Studio 之 制作 Nine-Patch 图片(.9图片)
•引言 9.png 可以保证图片在合适的位置进行局部拉伸,避免了图片全局缩放造成的图片变形问题. 但是由于Android Studio对于.9图片的检查更加严格,所以不符合AS要求的.9图片会带来很多 ...
- Android九点图(Nine-Patch)制作及应用
你可能之前还没有听说过Nine-Patch这个名词,它是一种被特殊处理过PNG图片,能够指定哪些区域可以被拉伸而哪些区域不可以. 现在我将手把手教你如何去制作一张九点PNG图像. ---------- ...
随机推荐
- Ex 6_5棋子放置问题_第八次作业
题目貌似有问题 (b) 子问题定义: 设maxValue[i][j]为棋盘的前i行中最后一行为i时第i行按照第j种放置方式放置时得到的最大覆盖值,comp[i][j]为第i种放置方式与第j种放置方式是 ...
- 使用siege执行压力测试
没有安装siege? 可参考我的另一篇博客 使用siege执行压力测试笔记 场景分析 使用siege对https://www.baidu.com/进行加压. 要求 模拟20个用户同时访问 一共跑3个循 ...
- javafx点击鼠标出现弹窗,demo
在学习javafx的过程中,不知道怎么出现一个弹窗,如,点击一个按钮出现一个修改信息的列表选项 终于在javafx文档示例中发现了类似的东西,记录一下,备忘package demo9_button; ...
- Javascript中类的实现机制(四)
一: 理解类的实现机制 在JavaScript中可以使用function关键字来定义一个“类”,如何为类添加成员.在函数内通过this指针引用的变量或者方法都会成为类的成员,例如:function ...
- ***php进行支付宝开发中return_url和notify_url的区别分析
本文实例分析了php进行支付宝开发中return_url和notify_url的区别.分享给大家供大家参考.具体分析如下: 在支付宝处理业务中return_url,notify_url是返回些什么状态 ...
- [转] JavaScript:彻底理解同步、异步和事件循环(Event Loop)
一. 单线程 我们常说“JavaScript是单线程的”. 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个.不妨叫它主线程. 但是实际上还存在其他的线程.例如:处理A ...
- 《Java程序性能优化》之并发优化
第四章 并行程序优化 1.非阻塞同步避免了基于锁的同步的缺陷,无锁算法没有锁竞争带来的系统开销,也没有线程间频繁调度带来的开销.CAS算法:包含3个参数CAS(v,e,n).V表示要更新的变量,E表示 ...
- usaco 校园网
题解: 显然当一个图上的点是一个环时能满足题目要求 那么我们来考虑怎么形成一个环 很显然的是要先缩点 缩完点就成为了森林,如何让森林成环呢? 考虑一下环上的点的入度出度一定都大于1 而连一条边可以增加 ...
- 6-16 单词 uva10129
了解了欧拉回路和欧拉道路的性质 : 欧拉道路 最多只有两个奇点(不可能只有一个奇点) 并且当有两个奇点的时候 一个奇点入比出多一 一个奇点出比入多一 采用并查集查看是否连同 如果连 ...
- linux 之 汇编语言 的mov和movl sub 和subl add 和addl 的区别??
AT&T汇编语言(Assembly Language)是UNIX下惯用的汇编语言(Assembly Language)各式 l,w,b是ATT汇编语言(Assembly Language)中用 ...