Android Nine-patch(.9.png)小结
最近在项目开发过程中,因为界面布局美化的需要开始接触到.9.png,无论是Goolge官方文档还是网上其他资料,
都给出了很多关于.9.png的基本介绍,.9.png基础文章推荐以下几篇:
Google官方:
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
http://developer.android.com/tools/help/draw9patch.html
ISUX:
http://isux.tencent.com/android-ui-9-png.html
radley:
http://radleymarx.com/blog/simple-guide-to-9-patch/
本文针对实际项目中遇到的问题,以此进行总结:
1..9.png如何理解?
.9.png仍然是一个png格式的图片,只不过是针对Android平台的可以指定图片特定位置拉伸和填充内容的一种特殊的png图片格式。
这里需要注意几个问题:
a..9.png只是针对Android平台而言的,在其他平台上没有效果;
b..9.png只是针对图片拉伸而言的,当然包括单独的横线拉伸,单独的纵向拉伸和同时横向和纵向拉伸,对于图片压缩没有效果;
c..9.png可以同时指定图片的横向和纵向拉伸的区域(相应的可以理解成可以指定图片不进行拉升的区域),由此可以在图片拉伸时达到自己想要的效果;
d..9.png可以指定图片上填充内容(包括文字和非文字的布局等)的区域,非填充区域即可理解成div中的padding留白。
2..9.png拉伸和填充区域如何指定?
这方面网上资料太多,主要都谈到在.png图片四周增加左、上、右、下四条带有一个像素的黑实线,分别表示含义如下:
左边线条:当图片进行纵向拉伸时,由此线条从图片左边下边垂直位移到图片左边上边所形成的区域都是可以进行纵向拉伸的,此区域外则不进行拉伸,保留原来效果;
上边线条:当图片进行水平拉伸时,由此线条从图片上边左边水平位移到图片上边右边所形成的区域都是可以进行横向拉伸的,此区域外则不进行拉伸,保留原来效果;
右边线条:控制图片填充内容的垂直padding留白;
下边线条:控制图片填充内容的水平padding留白。
3..9.png如何制作?
网上也介绍了不少关于.9.png的图片制作工具,本人还是比较推荐Google官方推荐的工具draw9patch。
位于目录\adt-bundle\sdk\tools\下。双击即可打开,既可以通过.png图片制作成.9.png,也可直接对现有.9.png图片进行修改,使用非常方便。
4..9.png制作时需要注意什么问题?
网上不少资料中有说道,在制作.9.png图片时,左边和上边黑实线是必须的,右边和下边的黑实线可以省略。
在实际项目开发过程中,本人就因为此点被坑了不少时间。误以为右下线条和左上线条之间没有牵制关系。
以TextView为例,在项目中经常需要将.9.png为背景,上面写上文字为内容,如果希望文字能够填充整个背景图片,
设置同样高度的两个.9.png,然后其中一张不标识右下线,另一张标识完整的的右下线,很显然实际运行出的效果是不同的。
A. 不标识右下线的.9.png图片默认是存在padding留白的!!并且具体留白与左上线的位置有关!!
因此,一般情况下,建议右下两线也都标识上。
B. 网上经常提到,左上右下四条线将图片形成九宫格形式,是没错的。但是,对于较为复杂的实际需求而言,图片每条边都可以不止一条线,
但无论几条,规则依然如上,灵活运用图片每条边的线条设置,可以将图片拉伸和填充区域细化到满足目标需求。
Android Nine-patch(.9.png)小结的更多相关文章
- Android学习之 WebView使用小结
这段时间基于项目须要 在开发中与WebView的接触比較多,前段时间关于HTML5规范尘埃落定的消息出如今各大IT社区头版上,更有人说:HTML5将颠覆原生App开发 尽管我不太认同这一点 可是关于H ...
- Android MVP+Retrofit+RxJava实践小结
关于MVP.Retrofit.RxJava,之前已经分别做了分享,如果您还没有阅读过,可以猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava ...
- android 打Patch的方法 .
http://blog.csdn.net/sunyubo458/article/details/6680840 作为程序员,了解diff&patch命 令是非常必要的.比如说我们发现某个项目有 ...
- Mono for Android布局控件属性小结
1. layout_weight 用于给一个线性布局中的诸多视图的重要度赋值. 所有的视图都有一个layout_weight值,默认为零,意思是需要显示 多大的视图就占据多大的屏幕空 间.若赋一个高于 ...
- Android虚拟机运行问题之小结
首先说一下关于虚拟机的技巧,以前我也总是感觉电脑运行虚拟机的时候老是卡,后来在看课堂直播时看到老师用的是Total Control,在网上搜“Total Control”就能能找到,比系统自带SDK运 ...
- 转: Android异步加载图像小结
转:http://blog.csdn.net/sgl870927/article/details/6285535 研究了android从网络上异步加载图像,现总结如下: (1)由于android UI ...
- Android --- 读取系统资源函数getResources()小结
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1201/655.html 编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用, ...
- Android 个推 踩坑小结
公司一个项目之前在手机上一直可以正常运行,后来在平板上运行了一下,在欢迎页面卡出了,一直没有反应. 于是我就将项目在电脑上用Android Studio往平板上运行了一遍,看了下打印的Log日志,发现 ...
- Android客户端与服务器交互方式-小结
最近的Android项目开发过程中一个问题困扰自己很长时间,Android客户端与服务器交互有几种方式,最常见的就是webservices和json.要在Android手机客户端与pc服务器交互,需要 ...
- 【Android】Android处理Home键方法小结
实验几次之后(android4.1 和android4.2)发现在单个的activity里面有以下几个方法可以使用: 方法1:onSaveInstanceState方法 下面这个方法可以处理home的 ...
随机推荐
- go语言数据库操作, gorm框架
type User struct{ ID uint `gorm:"primary_key"` Name string Age int Birthday time.Time AddT ...
- pom string
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- SpringBoot报错:Failed to load ApplicationContext(Mapped Statements collection already contains value)
错误提示: Caused by: java.lang.IllegalArgumentException: Mapped Statements collection already contains v ...
- vue - 新建一个项目
首先: 要先安装node 及 npm Node.js官方安装包及源码下载地址:http://nodejs.org/ 双击安装,在安装界面一直Next 直到Finish完成安装. 打开控制命令行程序(C ...
- Bootstrap 常用属性
一,关于按钮 btn系列 二.关于div 移动位置 col 系列 col-md 系列 col-lg系列 这些都是让多个div在当前页面等大小 三.居中系列 1.文本居中 text-center 2.图 ...
- nginx + springboot 配置
1.spring boot 访问地址http://localhost:13000/test/hello 2.配置nginx.conf文件 upstream my_ngix { server local ...
- 用Group by分组后,取每组的前3条记录,怎么取?
使用子查询进行查询 SELECT * FROM home_content a WHERE ( SELECT count(id) FROM home_content WHERE class_link = ...
- vue-router的学习
一.路由的概述. vue-router是vue.js官方的路由插件,它和vue.js是深度集成的,适用于构建单页面.vue的单页面应用是基于路由和组件的,路由是用于设定访问路径,并将路径和组件映射起来 ...
- Consider defining a bean named 'entityManagerFactory' in your configuration解决办法
错误信息: *************************** APPLICATION FAILED TO START *************************** Descriptio ...
- tomcat +jenkios
来源:https://www.cnblogs.com/edward2013/p/5269465.html 1. 安装JDK JDK下载地址: http://www.oracle.com/techne ...