[转]【Android】9-patch图片以及例子说明
1、何为9-patch?
NinePatch图片以*.9.png结尾,和普通图片(png图片)的区别是四周多了一个边框(如下图所示):
采用NinePatch图片做背景,可使背景随着内容的拉伸(缩小)而拉伸(缩小)。---在Android中,对于不同的分辨率,图片显示就不会变形了
上下左右的四条黑线表示如下:
1、左边和上边的交叉区表示可扩展区域;右边和下边的交叉区表示文字显示区域
2、左边和上边的黑线必须有(否则,工程会报错的);右边和下边的黑线可无,或者只有一个
3、当右边和下边的黑线都没有的时候,左边和上边的交叉区不仅仅表示该区域可扩展,也表示该区域是文字显示区域
4、当右边或者下边的黑线没有时,显示区以其对面的黑线为准
2、Android制作9-patch图片的工具:draw9patch.bat-------将png格式图片改成.9.png格式图片
该工具目录:D:\android-sdks\tools\draw9patch.bat
工具使用步骤:
1、找到该工具,双击打开,节目如下图所示:
2、将要修改的png图片拖动到工作区域,或者选择File打开文件
3、工作区域说明
【参考】http://www.cnblogs.com/slider/archive/2011/12/07/2279302.html
序 列 ① :在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,如果完全消除该内容则图片拉伸后是没有变形的,也就是说,不管如何缩放图片显示都是良 好的。 (实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。)
序列 ② :区域是导入的图片,以及可操作区域。
序 列 ③ :这里 zoom:的长条bar 是对导入的图放大缩小操作,这里的放大缩小只是为了让使用者更方便操作,毕竟是对像素点操作比较费 眼,下面的 patch scale 是序列 ④区域中的三种形态的拉伸后的一个预览操作,可以看到操作后的图片拉伸后的效果。
序列 ④: 区域这里从上到下,依次为:纵向拉伸的效果预览、横向拉伸的效果预览,以及整体拉伸的效果预览
序列 ⑤: 这里如果你勾选上,那么当你鼠标放在 ② 区域内的时候并且当前位置为不可操作区域就会出现lock的一张图,就是显示不可编辑区域 ;
序列 ⑥: 这里勾选上,那么在④ 区域中你就会看到当前操作的像素点在拉伸预览图中的相对位置和效果。
序列 ⑦: 在编辑区域显示图片拉伸的区域;
4、用鼠标在想要画黑线的区域画上黑线:
说明:鼠标直接拖动------画黑线
Shift+鼠标拖动----清除所画的黑线
Ctril+鼠标拖动-----填充颜色(这个,我木有用过,不确定是干啥子的)
记住:上边和左边的黑线是必须的
例如,我的原图test.png为:
我画第一张test1.9.png图片,画了左边和上边
第二张test2.9.png图片,画了上下左右
5、画好后,点击save,保存图片
3、9-patch例子说明
直接上个例子,说明9-patch图片吧。
采用了我画好的三张图片(test.png/test1.9.png/test2.9.png)
xml文件如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="1dp"android:background="@drawable/test"android:text="@string/longcontent" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignLeft="@+id/button1"android:layout_below="@+id/button1"android:layout_marginTop="1dp"android:background="@drawable/test1"android:text="@string/longcontent" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignLeft="@+id/button2"android:layout_below="@+id/button2"android:layout_marginTop="1dp"android:background="@drawable/test2"android:text="@string/longcontent" /></RelativeLayout>
Button的文字内容:
<string name="longcontent">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbc\nccccccccccccccccccddddd</string>
代码运行结果:
第一张为原始png背景图片的button;
第二张为定制了扩展区域的9patch背景图片的button;
第三张为定制了扩展区域以及显示区域的9patch背景图片的button
最后再总结下:
1、9patch是随文字大小可以缩放的图片。 定义了拉伸区域,则除拉伸区域可变外,其他区域保持原来的形状大小不变。
2、采用9patch图片做背景,可使背景随着内容的拉伸(缩小)而拉伸(缩小)
3、为了支持不同分辨率的设备,View可以采用9patch图片做背景图片
4、可以使用SDK自带的draw9patch.bat工具将png格式图片转换为9patch格式图片
转载:http://www.cnblogs.com/Amandaliu/archive/2013/04/26/3045286.html
参考
http://www.cnblogs.com/slider/archive/2011/12/07/2279302.html
http://developer.android.com/tools/help/draw9patch.html
转载于:https://www.cnblogs.com/cqcmdwym/p/3364603.html
[转]【Android】9-patch图片以及例子说明相关推荐
- android studio创建9.patch图片,使用时出现Error: Duplicate resources
创建9.patch图片 右键点击需要创建9.patch图片的图片文件,选择"create 9-Patch file",然后按照需要设置. 制作好后,使用时出现Error:Dupli ...
- linux 浏览器源码下载,Android开发:图片浏览器源码
Android 图片浏览器源码,是你学习Android很好的例子,希望对你的学习有帮助. main.xml android:layout_width="fill_parent" a ...
- Android LruCache 压缩图片 有效避免程序OOM
压缩加载大图片 我们在编写Android程序的时候经常要用到许多图片,不同图片总是会有不同的形状.不同的大小,但在大多数情况下,这些图片都会大于我们程序所需要的大小.比如说系统图片库里展示的图片大都是 ...
- android 简单实现圆角,Android 实现圆角图片的简单实例
Android 实现圆角图片的简单实例 实现效果图: 本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出.于是自己自定义了个View,实现图片的圆角以及圆形效 ...
- android背景图拉伸,解决android:background背景图片被拉伸问题
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
- android如何释放图片缓存
转自:http://my.oschina.net/u/1753339/blog/223379 在你应用程序的UI界面加载一张图片是一件很简单的事情,但是当你需要在界面上加载一大堆图片的时候,情况就变得 ...
- android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...
- Android第三方开源图片裁剪截取:cropper
Android第三方开源图片裁剪截取:cropper 很多app都需要裁剪截取图片作为头像.logo之类,而cropper是github上的一个针对Android平台的.第三方开源图片裁剪截取项 ...
- 【Android 内存优化】Android 原生 API 图片压缩原理 ( 哈夫曼编码开关 | 哈夫曼编码原理 | libjpeg-turbo 函数库 )
文章目录 一. 哈夫曼编码开关 二. 哈夫曼编码原理 三. libjpeg-turbo 函数库 四. libjpeg-turbo 函数库下载 [Android 内存优化]图片文件压缩 ( Androi ...
最新文章
- 【c语言】蓝桥杯算法提高 3-2求存款
- JSP 防止网页刷新重复提交数据
- 周其对话农民丰收节交易会 乡村振兴不能单单从乡村着眼
- linux二重启动防止
- sqlite 查询 支持多用户同时_SQLite支持多进程同时操作数据库文件吗?
- 2019年一半已过,这些大前端技术你都GET了吗?- 下篇
- 海量数据的topK问题
- 生产环境邮件问题总结
- 依图要修AI语音双学位,左手摸底考第一名成绩单,右手开放平台方案
- mybait-plus实现动态自定义查询条件
- 【计算机网络】谢希仁教材轻松解读 概述篇
- VMware安装VMware tools步骤
- 如何将ipad大文件传输到window PC
- [JavaScript] JS求闭区间[min,max]的和
- TeXworks简单入门
- 【渝粤教育】21秋期末考试建设工程法规10221k2
- 金刚怒目与菩萨低眉——企业安全的IAM和DLP
- linux命令行启动向日葵无法编辑,linux版向日葵客户端无法绑定开机网卡
- 机器人学:物体转动角度变化率与其世界坐标系下角速度的关系推导
- 算法 64式 20、其他算法整理
热门文章
- 【Linux】一步一步学Linux——last命令(98)
- c语言使用函数累加由n个a构成的整数之和,c 语言使用函数累加由n个a构成的整数之和...
- python 函数前有一个下划线_【Python】怎么写好一个 Python 函数?
- java 初始化log4j_java – log4j:WARN请正确初始化log4j系统
- bat产品经理能力模型_产品经理如何构建自己的产品能力模型?
- nbu还原oracle,NBU恢复oracle
- sqoop——将mysql数据库的数据表导入到hdfs上
- CentOS修改SSH端口
- 5 Git 分支 - 远程分支
- Tensorflow中文文档