点九
2016-02-23 10:48
260 查看
一、点九图的介绍
PNG,是一种非失真性压缩位图图形文件格式。PNG格式是非失真性压缩的,允许使用类似于GIF格式的调色板技术,支持真彩色图像,并具备阿尔法通道(半透明)等特性。PNG的的英文名称为Portable Network Graphics,即便携式网络图片。另有说法是名称来源于非官方的“PNG is Not GIF”。在这里不过多的讨论PNG格式的定义问题,但是.9.png确实是标准的PNG格式,只是在最外面一圈额外增加1px的边框,这个1px的边框就是用来定义图片中可扩展的和静态不变的区域。特别说明,left和top边框中交叉部分是可拉伸部分,未选中部分是静态区域部分,right和bottom边框中交叉部分则是内容部分(变相的相当于定义看一个内边距,神似padding功能,后面我会单独介绍一下),这个参数是可选的,如下图,左图是显示top和left拉伸区域,右图是显示right和bottom的内容区域:
![](http://img.zcool.cn/community/029d975641ad8f0000012720748dfe.png)
![](http://img.zcool.cn/community/027d885641ad8f0000012720abdd9e.png)
在Android中以9.png格式的图片为背景,则能够自定义拉伸而不失真,比如系统的Button就是一个典型的例子,不过最常见的我也最喜欢还是微信的对话框,我们拿它来举例看看效果:
![](http://img.zcool.cn/community/02bd355641adbd0000012720ddaa5a.png)
从上图可以看出,使用点九图的话,其细节可以尽量保留,怎么拉伸都不会变形失真,怎么样?看到这里各位看官明白了吗?
其实呢,无论是left和top,还是right和bottom都是把图片分成9块(边角四块是不能缩放的,其他的四块则是允许缩放的),看下图数一数,123456789,正好九块,所以叫做9.png。
![](http://img.zcool.cn/community/0227135641adda000001272077c1b0.png)
二、如何使用NinePng九图神器(一款安卓App)制作9.png图片?
前面已经了解到9.png格式的工作方式,下面我们使用这款专门处理点九图的App(不了解的读者可以到www.ninepng.cn网站去了解一下)来制作.9.png图片。
第一步:准备要拉伸的图片,并传输图片到此App上。
![](http://img.zcool.cn/community/02f8fd5641adef000001272041add6.png)
非常小的一张图片,这张图片有可能是在PC电脑上,刚用Photoshop创作完成,那么我就以此图片为例来讲解。
接下来我们需要把这张图片导入到手机上。
首先,在App中的设置界面打开【Wifi共享】,会得到一个IP地址
![](http://img.zcool.cn/community/021f245641ae2200000127206b995a.png)
然后,在电脑上使用浏览器(推荐使用Chrome浏览器)访问这个IP地址(注意:必须是连接同一个路由器的电脑,可以是有线的连接,也可以是无线的连接)
![](http://img.zcool.cn/community/025b185641ae3f00000127208e0478.png)
这时,你就可以在电脑端直接上传图片了。点击【上传】按钮,然后上传你想要上传的图片即可。
![](http://img.zcool.cn/community/0266165641ae5500000127209a858d.png)
App中会同步接收并显示所上传的图片
![](http://img.zcool.cn/community/02cde15641ae690000012720bb5eb5.png)
第二步:制作.9.png图片。
在App中点击chat_bg这张图,这时底部会出现一个菜单,如下左图,然后选择第一项——编辑,会进入到一个编辑点九图的界面,如下右图所示:![](http://img.zcool.cn/community/02b4175641ae8b0000012720ee8a6c.png)
![](http://img.zcool.cn/community/02b6125641ae8b0000012720db7c07.png)
看到界面的上下左右各有一个耳朵形状的按钮了没有?点开它,然后开始拖动到合适的位置,上边和下边的按钮可以同时操作,同样左右也是。
![](http://img.zcool.cn/community/02f1f45641aeab0000012720b3cf16.png)
![](http://img.zcool.cn/community/02561d5641aeab000001272066d255.png)
这样,我们的left和top的拉伸区域就定义好了,right和bottom的内容区域也定义好了
然后,我们还需要把制作好的点九图保存下来。点击右上角的按钮,弹出一个菜单界面,点击保存按钮,保存为chang_bg.9.png。
![](http://img.zcool.cn/community/0270745641aece000001272096e678.png)
![](http://img.zcool.cn/community/02b7b85641aecf0000012720ca0e36.png)
如果你想看看你制作的点九图是什么效果,那么就点击右上角的三角形预览按钮,将会进入预览界面,并可以点击分别设置不同的内容和效果,比如我们一开始的效果。如果想增加一种分辨率的模拟器,可以点击右上角的“+”按钮。
![](http://img.zcool.cn/community/02379e5641aee90000012720189fb6.png)
![](http://img.zcool.cn/community/02c7c25641aeea0000012720c2c345.png)
如果还需要调整界面,那么就回到上一个界面继续重新拖动修改即可。
第三步,传给开发人员
刚才已经打开了【wifi共享】,会得到一个IP地址,如果还没打开,可以在【设置】界面点击打开上部的【Wifi共享】。如果要传给开发人员的话,请让开发人员在电脑上用浏览器(推荐用Chrome浏览器)访问这个IP地址(注意:必须是同一个局域网下,连接相同的路由器才行哦~),然后找到该图片,并下载保存在其电脑上。这样开发人员就可以立即使用“刚出炉”的“热腾腾”的点九图了。
三、制作.9.png的高级技巧
对于点九图了解不深的人来说,这可以算是高级技巧,那就是:拉伸区域,可以不是连续的,可以不止一块,而且是和自定义的边框线的长度成正比。点击耳朵按钮弹出的页面上边缘有个“+”号按钮,点击即增加一个,最多可以增加三个,直接上图说明:
![](http://img.zcool.cn/community/024de55641af100000012720db6c45.png)
其实,增加黑线仅仅是为了让我们观看更容易,在程序编译的时候,会自动把这些黑线代表的信息整合进png图片中。如果不信,你可以随便找一个APK文件,把.apk改成.zip,然后解压缩,在查看res/drawable相关目录下的图片文件。不过也有的仍然保留了四周的黑线。
四、最后送上一些使用九图神器App制作的其它图例的预览效果,以飨读者:
![](http://img.zcool.cn/community/0233b65641af3d00000127205280fa.png)
![](http://img.zcool.cn/community/0242875641af3d00000127204d9a3b.png)
![](http://img.zcool.cn/community/02a3d55641af690000012720bea586.png)
![](http://img.zcool.cn/community/02ed235641af6900000127202d99d5.png)
![](http://img.zcool.cn/community/0286a85641af7a0000012720a852af.png)
![](http://img.zcool.cn/community/02d6f65641af7a0000012720165f82.png)
![](http://img.zcool.cn/community/0217275641af8d0000012720fb36fc.png)
![](http://img.zcool.cn/community/0243a35641af8e0000012720c8029a.png)
![](http://img.zcool.cn/community/02651a5641af9b0000012720ef9a2b.png)
![](http://img.zcool.cn/community/02cb775641af9b000001272068efd1.png)
原文链接:http://www.zcool.com.cn/article/ZMTgzODUy.html
相关文章推荐
- java和android的基础
- Android Studio配置svn时提示需要证书:authentication required的解决方法
- matlab 扩大虚拟内存
- 浅析若干Java序列化工具
- MediaPlayer和AudioTrack播放Audio的区别与联系
- 在Android中实现推送方式的底层原理与推送的知识及相关解决方案
- React.Children
- CSS3 滤镜
- mysql主从异常分析
- label 根据内容text确定控件的大小 分为单行/多行文字
- Ext JS 5.1.0 Grid的deselect事件失效的处理方法
- AOD452场效应管MOS管
- Spring 使用注解方式进行事务管理
- JVM系列之JVM体系(一)
- You have not concluded your merge (MERGE_HEAD exists) git拉取失败
- mm编译 问题
- swift-基本操作02-自增和复合赋值运算符
- jquery hover(overListener, outListener) || bind('mouseover',methodA).bind('mouseout',methodB)
- iOS Developer Libray (中文版)-- About Objective-C
- JVM学习(3)——总结Java内存模型