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了。完结。。


安卓Studio学习笔记---Android studio加载9.png图片报错

今天在运行项目的时候,一直提示这个错误 貌似是使用了.9图片,但是在idea是可以运行,在Studio上不能运行,这就头疼了,怎么会这样? 好吧,Studio的使用还不是很熟悉,只能再去问百度...
  • juhua2012
  • juhua2012
  • 2016年08月03日 13:47
  • 3659

Android 9-patch 九图的制作与使用

一、9.PNG简介 九图(9.PNG)这种格式的图片是安卓开发里面的一种特殊的图片,在android 环境下具有自适应调节大小的能力: (1)允许开发人员定义可扩展区域,当需要延伸图片以填充比图片...
  • wangbaochu
  • wangbaochu
  • 2016年01月05日 18:17
  • 4413

Android中9-patch图片的总结

上周开始,自己算是第一次真正在项目中开发Android,和iOSd
  • lihei12345
  • lihei12345
  • 2014年07月15日 20:53
  • 4747

draw9patch工具的使用,按钮的背景和文字颜色的美化

一个Android应用的好坏可能对于我们开发人员来说主要考虑其运行效率和性能,可是对于用户来说,一般情况下他们注重的是应用的外表,也就是时一个应用能否成功的 让各大用户青睐,其应用的的外貌起着至关重要...
  • btt2013
  • btt2013
  • 2015年11月17日 09:16
  • 846

超级简单的9patch

转载请声明出处:http://blog.csdn.net/dawanganban 我们在有些应用中会用到将图片内部指定区域撑大的效果,如微信中的消息内容背景,这时候就要用到9patch图片,效果如下...
  • lxq_xsyu
  • lxq_xsyu
  • 2013年12月17日 16:48
  • 2600

NinePatch图片制作从入门到精通

Android应用中的使用图片时,经常需要进行拉申,而拉申后很容易导致图片变形,这时候就可以使用NinePatch图片来解决这个问题。...
  • android_cai_niao
  • android_cai_niao
  • 2015年01月26日 13:19
  • 1255

9切图编辑器下载 及 工具说明 【Nine-Patch Editor1_0_0_3】来源 米柚

[制作教程] 【图片教程】9.png编辑器-傻瓜式操作(11.04.29更新) 博客源址:http://www.miui.com/thread-83505-1-1.html9.png编辑器工作界面 ...
  • Buaaroid
  • Buaaroid
  • 2016年05月25日 15:54
  • 1868

android遇到的问题及解决——9patch图片处理中的红线问题

昨天在Android Studio中处理一张9patch图片的时候,遇到个问题。按照ide的提示(下图) 按住control后在图片上点拉伸点,画出来的线条是红色的(下图) 当时没有太...
  • u012123160
  • u012123160
  • 2015年03月05日 10:34
  • 1134

使用layer-list代替9patch绘制输入框EditText

开发中我们会用到如下图的文本输入框 常规的办法是使用一张.9图片,如果没有切图的话,也可以使用layer-list进行绘制,如下: ...
  • u012390990
  • u012390990
  • 2015年11月25日 09:30
  • 487

关于9-patch的超详细教程

这篇文章是android开发人员的必备知识,内容摘选自网络,不求完美,但是有用。 1.背景自适应且不失真问题的存在       制作自适应背景图片是UI开发的一个广泛问题,也是界面设计师渴望解...
  • giggle90
  • giggle90
  • 2014年07月17日 10:43
  • 344
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:9 patch png 的上下左右
举报原因:
原因补充:

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