9 patch png 的上下左右

转载 2016年06月01日 15:50:52

原文地址:http://www.cnblogs.com/richiewang/p/4194858.html

前言:

9 patch png 图片,扩展名为.9.png,是一个标准的PNG图像,它包括额外的1个像素的边界,通过对这个边界的描述来达到我们预期的拉伸效果。android引入这种png的扩展格式来解决同一图片在被拉伸后变形的问题,进一步为资源重用提供了优雅的解决方式。

 

工具:

要预览或者编辑9patch图片,就要用到android sdk中自带的draw9patch工具,该工具在android sdk 的 tools 目录下。

 

本文主要介绍9 patch图片中上下左右四个描边分别的作用:

 

这四个描边可以分为两类:

1)用来描述可拉伸的区域----------------------由左和上描边决定;

2)用来描述内部间距的区域-------------------由右和下描边决定;

 

实例:

下面来看几个例子,会对各个描边的作用有更直观的认识。

 

(1)无描边

下图是一张没有任何描边的png, 对于缩放,其实就是等价于image的scale效果。  可以明显的看到右侧的三张小图,四个边均有不同程度的变形;

QQ截图20141221191132

 

(2)左描边 和  上描边-----(定制可拉伸的区域)

 

只有左描边时,图片垂直方向上被如下图标注,被分为三部分,当图片被纵向拉伸时,会发现 1,3区域保持,2区域被拉伸;而当图片横向拉伸时,效果跟情况(1)是一样的。

   QQ截图2014122223505677

 

只有上描边时,情况跟只有左描边类似,只不过是当图片被向拉伸时,如下图,同样有 1,3区域保持,2区域被拉伸的效果。

QQ截图20141223001731

当上描边和左描边同时存在时,也是我们在android中用的最多的情况,照旧先上个图看看:

QQ截图20141223002613

两个描边,把图片分为了9份,我想这就是9 patch 名称的由来吧o(∩_∩)o ,从效果中我们就可以看到,在横向纵向的拉伸过程中1,3,7,9始终保持不变,这也就正好保持了四个圆角在任意拉伸后不变形;2和8在纵向拉伸的时候保持;4,6在横向拉伸的时候保持;5 就是那个时刻准备着被拉伸的主角。

 

(3)右描边和下描边

这个其实是个可选的操作,这两个描边定制了拉伸效果之后内部间距的问题。这个效果在当把9patch图片用于layout或者textview等这些控件的背景的时候,才会显现出来。继续上图来说明问题。

QQ截图20141231000615

上面图中,标出了ABCD 四个长度,这是由右描边和下描边分割出来的,在把这张图片作为父控件背景的时候,子控件相对与父控件的上下左右padding分别对应的就是ABCD。

实例如下:

QQ截图20141231001212

这张途中标出的ABCD,就上图的ABCD 区域  一一对应,这样我们就多了一个直接通过9patch图片来设置padding了。完结。。


相关文章推荐

利用9-Patch PNG来实现ListView的圆角显示

说到圆角显示,可能很多人的第一反应就是覆盖onDraw方法来自己画个圆角,可能以前写过其它Windows程序,比如Delphi的人会更有这种冲动吧。 不过在Android中,我们不需要这么麻烦,事实...

进阶:利用9-Patch PNG来实现ListView的圆角显示

转载 : http://www.learningandroid.net/blog/advance/9-patch-listview-coner/ 部分摘要: 何为9-Patch ...

Android Studio中如何制作和使用.9.png(Nine Patch)图片

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

Android Drawable Resources系列2:<nine-patch>标签、.9.png图片制作

一、Nine-Patch File:.9图的使用跟一般图片的使用基本没有什么不同,主要就是.9是矢量图,比较适合做背景的填充。 一般使用,res/drawable/myimage.png, <Butt...

Android Nine-patch(.9.png)小结

最近在项目开发过程中,因为界面布局美化的需要开始接触到.9.png,无论是Goolge官方文档还是网上其他资料, 都给出了很多关于.9.png的基本介绍,.9.png基础文章推荐以下几篇: ...

Android 9 patch 图片 (.9.png 格式图片) 的特点和制作

本文围绕 .9.png 格式图片讨论以下两个话题:  1. 该格式图片的特点  2. 制作方式    一 .9.png 格式的文件的特点    与传统的png 格式图片相...

Android的9patch 图片(xx.9.png 图片) 的特点和制作

一 .9.png 格式的文件的特点    废话少说,安卓为了支持这些不同该屏幕尺寸,做了一种可以伸缩自如像孙悟空的金箍棒一样的 的图片--简称点九图。    与传统的png 格式图片相比, 9.pn...

Android工具draw9patch使用点.9.png图片制作

本文将以示例的形式,讲解QQ聊天气泡.9.png图片的制作过程

使用Android SDK自带工具draw9patch制作简单的.9.png图片

一.如何使用draw9patch制作.9.png图片(配置过Android环境,主要是SDK) 二.进入draw9patch界面,并导入要修改的.9.png图片 三.编辑图片 将鼠标放在白...

android 9 patch 图片(.9.png 格式图片) 的特点和制作_oisoft 机器人图片

android 9 patch 图片(.9.png 格式图片) 的特点和制作_oisoft 机器人图片
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)