这篇文章是android开发人员的必备知识,内容摘选自网络,友我为大家整理和总结,不求完美,但是有用。

视频教程地址:http://player.youku.com/player.php/sid/XMTMwODc3Njc2/v.swf

1.背景自适应且不失真问题的存在
      制作自适应背景图片是UI开发的一个广泛问题,也是界面设计师渴望解决的问题,我相信我们彼此都深有体会。
      比如,列表的背景图一定,但是列表的高度随着列表数据项会发生变化;标题栏的背景,无论横屏还是竖屏,高分辨率还是低分辨率,都能自动填充满,而且不失真等等背景问题。
      根据以往的经验,我们一般采用先切图后拼凑的做法,这种做法本来我想在这里和大家介绍一下,其实有的时候还是很有用的,但是说起来会比较麻烦,就不说这个非重点了。
     Android针对这种情况,专门制作了一种.9.PNG格式来解决这个问题。

2.9.PNG格式。
      *.9.PNG就标准的PNG格式,只是在最外面一圈额外增加1px的边框,这个1px的边框就是用来定义图片中可扩展的和静态不变的区域。特别说明,left(左)和top(上)边框中交叉部分是可拉伸部分,未选中部分是静态区域部分。right和bottom(下和右)边框中交叉部分则是内容部分。
 
如上图《也就是说,在手机里。无论上面那张图怎么放大,四周的圆角都是不会被放大的!只有left(左)和top(上)边框内才会伸缩!

在Android中以9.PNG格式的图片未背景,则能够自定义拉伸而不失真,比如系统的Button就是一个典型的例子。
     其实呢,无论是left和top,还是right和bottom都是把图片分成9块 (边角四块是不能缩放的,其他的四块则是允许缩放的),所以叫做9.PNG。

3. 使用Draw9Patch.jar制作9.PNG图片之定义拉伸区域。

前面已经了解到9.PNG格式的工作方式,下面我们使用工具Draw9Patch(ADK自带)来制作.9.PNG图片。
      
第一步:准备要拉伸的图片。

默认的拉伸是整体拉伸,其实边框部分我们并不想拉伸,好,我们自己来定义拉伸区域,如下图

然后点击File,导出为content.9.png。

看看效果!可以看出,边框非常的清晰。下右边是未使用.9.PNG的对比图,而且也不是我们要的效果:

 

到这里为止,我们已经基本会制作.9.PNG图片了。为了知识体系的全面性和深入性,我们继续。

4.使用Draw9Patch.jar制作9.PNG图片之定义内容区域。
      是不是觉得上面那张图文字和边距挨的太近,好,我们使用right和bottom边的线来定义内容区域,来达到增大内边距的目的。

我们定义了一个很小的内容区域,其他的地方则自动充当边框,从而使内边距显的很大,如下图,

呵呵!ok了!

5.制作.9.PNG的高级技巧。
       对于初学Draw9Patch的人来说,这可以算是高级技巧,那就是:拉伸区域,可以不是连续的,可以不止一块,而且是和自定义的边框线的长度成正比。
       直接上图说明:

........ 

教程就到此结束了! 送给准备学习开发的机油!!   大家多多支持!

附件更新在一楼!

如果想了解更多的详细教程!可以看看这个!也希望能有机油给我提些宝贵意见!!
http://bbs.dospy.com/space.php?27035863/mythreads

draw9patch超详细教程的更多相关文章

  1. Github上传代码菜鸟超详细教程【转】

    最近需要将课设代码上传到Github上,之前只是用来fork别人的代码. 这篇文章写得是windows下的使用方法. 第一步:创建Github新账户 第二步:新建仓库 第三部:填写名称,简介(可选), ...

  2. WebRTC VideoEngine超详细教程(三)——集成X264编码和ffmpeg解码

    转自:http://blog.csdn.net/nonmarking/article/details/47958395 本系列目前共三篇文章,后续还会更新 WebRTC VideoEngine超详细教 ...

  3. Struts2+Spring4+Hibernate4整合超详细教程

    Struts2.Spring4.Hibernate4整合 超详细教程 Struts2.Spring4.Hibernate4整合实例-下载 项目目的: 整合使用最新版本的三大框架(即Struts2.Sp ...

  4. 安装64位Oracle 10g超详细教程

    安装64位Oracle 10g超详细教程 1. 安装准备阶段 1.1 安装Oracle环境 经过上一篇博文的过程,已经完成了对Linux系统的安装,本例使用X-Manager来实现与Linux系统的连 ...

  5. NumPy 超详细教程(3):ndarray 的内部机理及高级迭代

    系列文章地址 NumPy 最详细教程(1):NumPy 数组 NumPy 超详细教程(2):数据类型 NumPy 超详细教程(3):ndarray 的内部机理及高级迭代 ndarray 对象的内部机理 ...

  6. NumPy 超详细教程(2):数据类型

    系列文章地址 NumPy 最详细教程(1):NumPy 数组 NumPy 超详细教程(2):数据类型 NumPy 超详细教程(3):ndarray 的内部机理及高级迭代 文章目录 NumPy 数据类型 ...

  7. NumPy 超详细教程(1):NumPy 数组

    系列文章地址 NumPy 最详细教程(1):NumPy 数组 NumPy 超详细教程(2):数据类型 NumPy 超详细教程(3):ndarray 的内部机理及高级迭代 文章目录 Numpy 数组:n ...

  8. 【python】10分钟教你用python打造贪吃蛇超详细教程

    10分钟教你用python打造贪吃蛇超详细教程 在家闲着没妹子约, 刚好最近又学了一下python,听说pygame挺好玩的.今天就在家研究一下, 弄了个贪吃蛇出来.希望大家喜欢. 先看程序效果: 0 ...

  9. 数学规划求解器lp_solve超详细教程

    前言 最近小编学了运筹学中的单纯形法.于是,很快便按奈不住跳动的心.这不得不让我拿起纸和笔思考着,一个至关重要的问题:如何用单纯形法装一个完备的13? 恰巧,在我坐在图书馆陷入沉思的时候,一位漂亮的小 ...

随机推荐

  1. Python中如何写控制台进度条的整理

    本文实例讲述了Python显示进度条的方法,是Python程序设计中非常实用的技巧.分享给大家供大家参考.具体方法如下: 首先,进度条和一般的print区别在哪里呢? 答案就是print会输出一个\n ...

  2. 《c和指针》1.5编程练习问题

    <c和指针>1.5编程练习问题 #include<stdio.h>#include<stdlib.h>#include<string.h>#define ...

  3. w3c 学习html DOM

    什么是DOM? DOM是W3C标准,定义了访问HTML 和 XML文档的标准 W3C 文档对象模型(DOM)是中立于平台和语言接口,它允许程序动态的访问和更新文档的内容.结构和样式. W3C DOM ...

  4. RabbitMQ 原文译05--Topics

    在之前的系统中,我们改进了我们的日志系统,我们使用direct 交换机代替fanout交换机,可以实现选择性的接受日志. 虽然使用direct 交换机改进了我们的系统,但是对于多种条件的判断,依然存在 ...

  5. Quora图片懒加载

    浏览quora的时候发现他的懒加载有点特别,然后就看了一下 然后等图片下载后: 就是上传图片的时候就把图片给压缩成了10X10的小图片,然后加载的时候放大价格模糊的滤镜

  6. ASP.NET 预编译

    ASP.NET 预编译概述 https://msdn.microsoft.com/zh-cn/library/bb398860%28v=VS.90%29.aspx 如何:预编译 ASP.NET 网站以 ...

  7. uitableview的重用重叠问题

    以前也遇到过.但都不知道怎么就解决了. 今天费了一番功夫找到了最佳解决方案. 对于一些复杂的cell 从来都是用自定义的方法,但是如果复杂的cell里面内容多了.特别是图片加载,那难免会出现重叠重用 ...

  8. zoj 3686 A Simple Tree Problem (线段树)

    Solution: 根据树的遍历道的时间给树的节点编号,记录下进入节点和退出节点的时间.这个时间区间覆盖了这个节点的所有子树,可以当做连续的区间利用线段树进行操作. /* 线段树 */ #pragma ...

  9. js获取任意元素到页面的距离

    function getPos(obj){ var pos={left:0,top:0} while(obj){ pos.left+=obj.offsetLeft; pos.top+=obj.offs ...

  10. 利用OllyDebug查看程序调用的dll模块

    最近在做一个Qt项目,在产品发布的时候一直为找不到程序到底缺少了哪些dll组件而困扰.具体问题是,在我的项目中使用到了QMediaPlayer播放一段音频文件,我使用的开发环境的Win7 32位,而在 ...