Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”。这种图片是用于Android开发的一种特殊的图片格式,它的好处在于可以用简单的方式把一张图片中哪些区域可以拉伸,哪些区域不可以拉伸设定好,同时可以把显示内容区域的位置标示清楚。
本文结合一些具体的例子来看下.9.png的具体用法。

首先看下普通的.png资源与.9.png的资源区别:

普通的png资源就不多介绍了,可以明显看到.9.png的外围是有一些黑色的线条的,那这些线条是用来做什么的呢?我们来看下放大的图像:

放大后可以比较明显的看到上下左右分别有一个像素的黑色线段,这里分别标注了序号。简单来说,序号1和2标识了可以拉伸的区域,序号3和4标识了内容区域。当设定了按钮实际应用的宽和高之后,横向会拉伸1区域的像素,纵向会拉伸2区域的像素。如下图:

拉伸的含义应该比较容易理解,但是内容区域的标注有什么意义呢?我们来看下图:

这里程序设置的文字垂直居中,水平居左的对齐方式。对齐方式是没有问题的,但是对于这种大圆角同时又有些不规则边框的的图形来说,错误的标注方式会让排版看起来很混乱。所以我们需要修正内容区域的线段位置和长度。

把横向的内容区域缩短到圆角以内,纵向的内容区域控制在输入框的高度以内,这样文字就可以正常显示了。

这里还有一种特殊情况,就是本身是.9.png的资源,但是在修改过程中你希望这张.9.png不能被拉伸(在做皮肤的情况中有可能会遇到),那怎么办呢?只要把拉伸区域的点点在透明像素的地方就可以了,这样拉伸的时候会拉伸透明部分的像素,而不会拉伸图像本身。如下图:

大家可以看到拉伸区域的黑点是可以不连续的。

说了半天.9.png的用法,那.9.png如何输出呢?有很多种方式可以输出.9.png,比如说用draw9patch.bat这个工具,或者简单一点,用photoshop直接输出。输出的方式是先输出普通的png资源,然后扩大画布大小,上下左右各空出一个像素,再用一个像素的铅笔工具(颜色选择纯黑色),上下左右分别画点就可以了,保存的时候注意把后缀修改为.9.png。
有两点需要特别注意下:
1.最外围的一圈像素必须要么是纯黑色,要么是透明,一点点的半透明的像素都不可以有,比如说99%的黑色或者是1%的投影都不可以有;
2.文件的后缀名必须是.9.png,不能是.png或者是.9.png.png,这样的命名都会导致编译失败。

androidUI设计 .9.png 制作及去黑线

1.打开draw9patch.bat      我的路径是 D:\adt-bundle-windows-x86_64\sdk\tools ,找到你SDK目录tools里面的draw9patch.bat

2.打开你要处理的图片,我这以自己的图片发送为例

3.说明黑线用法,左键画图,右键取消选择

上:只拉伸黑线向下的区域,这样就保证字体不被拉伸

左:在纵向上,只拉伸黑线向右边包含的区域

下:显示黑线向上的区域,保证字体被显示

右:显示黑线向左的区域

没有黑线的区域表示拉伸时不发生变化,因为有时候会用到圆角图片

4.去黑线
           下载工具xUltimate-d9pc-x86

把要去除黑线的图片放到example1\res\drawable-hdpi目录下,然后点击xUltimate-d9pc.exe,运行,等一两秒,滴答一声就好了,处理好的.9图片在done\example1\res\drawable-hdpi 目录下,把图片复制出来就可以用了

对比效果

Android设计中的.9.png的更多相关文章

  1. 【转】Android设计中的.9.png

    来源:http://isux.tencent.com/android-ui-9-png.html Android设计中的.9.png 注意:当使用9.png做TextView背景时,一定要设置内容区域 ...

  2. Android设计中的.9.png图片

    .9.png是一种能够自己定义拉伸特定区域的图片格式. 简书:Android设计中的.9.png图片 在Android的UI设计开发中,非常多控件须要适配不同的手机分辨率进行拉伸或者压缩,这样就出现了 ...

  3. Android设计中的尺寸问题

    Android把屏幕大小分成四种:small, normal, large, xlarge; 屏幕密度分成:low(ldpi), medium(mdpi), high(hdpi), extra hig ...

  4. Android 设计中的.9.png

    在 Android 的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”.这种图片是用于Android开发的一种特殊的图片格式, ...

  5. 【转载】Android设计中的.9.png

      转载自:腾讯ISUX (http://isux.tencent.com/android-ui-9-png.html) 在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压 ...

  6. Android设计中的.9.png与Android Studio中的设置

    在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”.这种图片是用于Android开发的一种特殊的图片格式,它的 ...

  7. 点9图 Android设计中如何切图.9.png

    转载自:http://blog.csdn.net/buaaroid/article/details/51499516 本文主要介绍如何制作 切图.9.png(点9图),另一篇姊妹篇文章Android屏 ...

  8. Android开发中 .9.png格式图形设计:

    Android .9.png设计 宿舍大神在做android项目,有幸得知.9.png的图形格式. 不知道大家是否注意过聊天气泡和锁屏时随着你文字的增多和你的滑动而跟着变化并且分辨率没有变低的图形?是 ...

  9. shape和selector是Android UI设计中经常用到的

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...

随机推荐

  1. haproxy hdr和path

    path : string This extracts the request's URL path, which starts at the first slash and ends before ...

  2. 4.1. 如何在Windows环境下开发Python

    4.1. 如何在Windows环境下开发Python 4.1. 如何在Windows环境下开发Python 4.1.1. Python的最原始的开发方式是什么样的 4.1.1.1. 找个文本编辑器,新 ...

  3. Unix/Linux环境C编程入门教程(30) 字符串操作那些事儿

    函数介绍 rindex(查找字符串中最后一个出现的指定字符) 相关函数 index,memchr,strchr,strrchr 表头文件 #include<string.h> 定义函数 c ...

  4. kvm-GT

    REF: http://los-vmm.sc.intel.com/wiki/How-to-setup-kvmgthttp://xenvgt.sh.intel.com/image/bdw-h/ Host ...

  5. .net面试问答(大汇总)

    用.net做B/S结构的系统,您是用几层结构来开发,每一层之间的关系以及为什么要这样分层? 答:从下至上分别为:数据访问层.业务逻辑层(又或成为领域层).表示层 数据访问层:有时候也称为是持久层,其功 ...

  6. C#字典Dictionary排序(顺序、倒序)

    这里是针对.NET版本过低的排序方式,没怎么用过,记录一下: 一.创建字典Dictionary 对象 假如 Dictionary 中保存的是一个网站页面流量,key 是网页名称,值value对应的是网 ...

  7. ping网络故障

    网络的应用已渐渐深入我们的工作和生活,它带给了我们各方面的便利.因此,这种种的便利致使很多人对网络产生依赖性.那么,当电脑不能上网时,我们如何才能准确地判断电脑问题出在哪里?又如何能快捷地解决这故障? ...

  8. jQuery Custom Selector JQuery自定义选择器

    什么是JQuery的选择器呢,详见JQuery中的Selector: http://docs.jquery.com/Selectors 比如 $("div:contains('John')& ...

  9. ASP.NET打印EXCEl报表技术总结

    序言:我们在做企业项目或者一些管理系统的时候往往会用到导出到excel报表这项功能,下面我介绍的是用windows自带的excel来打印 首先必须引入:Interop.Excel.dll.Intero ...

  10. Sql遍历数据库

    Sql遍历数据库 set nocount on ) ) ) set @str='ad' Declare cur_Depart Cursor For select name,id from syscol ...