1:介绍
NinePatch图片以*.9.png结尾,和普通图片的区别是四周多了一个边框
如上图所示,左边那条黑色线代表图片垂直拉伸的区域,上边的那条黑色线代表水平拉伸区域,右边的黑色线代表内容绘制的垂直区域,下边的黑色线代表内容绘制的水平区域,右边和下边的线是可选的,左边和上边的线不能省略。
采用NinePatch图片做背景,可使背景随着内容的拉伸(缩小)而拉伸(缩小)。那么如何将普通的PNG图片编辑为NinePatch图片呢, Android SDK/tools目录下提供了编辑器draw9patch.bat,双击即可打开,使用起来很简单了,主要有以下选项:
采用NinePatch图片做背景,可使背景随着内容的拉伸(缩小)而拉伸(缩小)。那么如何将普通的PNG图片编辑为NinePatch图片呢, Android SDK/tools目录下提供了编辑器draw9patch.bat,双击即可打开,使用起来很简单了,主要有以下选项:
- ? Zoom: 用来缩放左边编辑区域的大小
- ? Patch scale: 用来缩放右边预览区域的大小
- ? Show lock: 当鼠标在图片区域的时候显示不可编辑区域
- ? Show patches: 在编辑区域显示图片拉伸的区域 (使用粉红色来标示)
- ? Show content: 在预览区域显示图片的内容区域(使用浅紫色来标示)
- ? Show bad patches: 在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,如果完全消除该内容则图片拉伸后是没有变形的,也就是说,不管如何缩放图片显示都是良好的。(实际试发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。)
例子:
NinePatch是一种很有用的PNG图片格式,它可以在特定区域随文字大小进行缩放。如下:
从上图可以看到,背景图片的中间区域会随着文字的大小进行缩放。背景图片是一张NinePatch图片。 NinePatch图片可以使用android自带的draw9patch工具来制作,该工具在SDK安装路径的tools目录下。执行该工具,然后点击“File”->“open 9-path”打开一张用于制作NinePatch图片的原来图片。在画布的上方和左方的边上画线指定缩放区域,
勾选“Show patches”可显示画定的区域,绿色
为固定大小区域,红色为缩放区域,文字会摆放在红色
区域。制作完后,点击“File”? “save 9-path”保存
图片,draw9patch工具会自动为图片加上*.9.png后缀。
把制作好的图片拷贝进项目的res/drawable目录,然后
编写代码。如下:
2:使用
传统UI开发中,如果背景的大小不一样,一般需要为每种大小都 制作一张图片,这在button中尤为明显。当然我们也可以一小块一小块水平重复的画,也可 以垂直的话。在android中专门有一种叫nine patch图片(以 9.png结尾)来解决背景大小不一样时,只用一张背景图片。
用自带的tools\draw9patch.bat 打开一张png图片,我们可以在png图片最外面的空格画一个像素宽的黑线。左边是编辑区,在左边的图中,左边黑线的高度决定了垂直拉升时的扩展区域,也 即当垂直拉伸时,只有这个区域的图片会被拉伸。同理图片上边的黑线长度决定了水平拉升时的扩展区域。右边区域是拉升的效果图,从上之下分别为垂直拉伸,水 平拉伸,以及两个方向的拉升。该工具提供了所见即所得的nine patch png编辑方式 。
把编辑后的png保存为 9.png到工程目录的res/drawable目录下,如果你的9.png中没有黑线,那么eclipse是会报错的。
效果图如下。从中我们也可以理解为什么叫 nine patch,相当于把一张png图分成了9个部分,分别为4个角,4条边,以及一个中间区域,4个角是不做拉升的,所以还能一直保持圆角的状态,而2条水 平边和垂直边分别只做水平和垂直拉伸,所以不会出现边会被拉粗的情况,只有中间用黑线指定的区域做拉伸。结果是图片不会走样
NinePatch是一種「可延展」的PNG圖檔。NinePatch圖檔的用途是製作「可隨文字大小縮放」的圖片,如圖1。
圖1: 文字背景可隨著文字大小縮放
NinePatch是很有用的圖片格式,可做為widget的「背景圖」。如圖1的範例,其應用程式的設計如下:
- 文字部份使用TextView元件
- 使用TextView的XML attribute來設定文字大小
- 使用TextView的XML attribute來設定一張背景圖
- 使用NinePatch圖片做為背景圖,如此一來背景圖就可以隨著文字大小縮放
首先,第一個工作就是「製作NinePatch圖檔」,方式如下。
Step 1. 準備一張原始的PNG圖檔,如圖2。
圖2: 原始PNG圖檔(arrow.png)
Step 2. 啟動Android提供的draw9patch工具,直接執行Android SDK tools/目錄下的draw9patch執行檔即可,如圖3。
圖3: Android SDK提供的draw9patch工具(點擊看原圖)
Step 3. 開啟原始PNG圖檔,編輯圖檔,如圖4。
圖4: 開始編輯圖檔(點擊看原圖)
如何編輯NinePatch圖檔
NinePatch圖檔的製作方式是「繪製二條線」,分別在原始圖檔的上方與左方繪出二條「黑線」,黑線所交集的區域即為「可延展」區域。如下圖的粉紅色區域。
圖5: 定義延展區
「可延展區」是Android框架用來擺放文字的區域,換句話說,文字(TextView)只會被放置在粉紅色區域,並且擺放的原則是「對準粉紅區域的中心點」,即上下置中、左右也置中。非「可延展區」,即綠色部份,並不會隨著文字的大小縮放。所以:
1. 綠色區域是固定大小區域
2. 粉紅色區域是可延展區域、文字擺放於此
圖中的「二條黑線」是怎麼畫出來的呢?方式如下。
Step 4. 移動「Zoom」調整圖檔比例,讓「斑馬線」的大小能適中,如圖6。
圖6: 調整比例
Step 7: 畫黑線
斑馬線是用來畫黑線的區域,怎麼畫黑線呢?用滑鼠點斑馬線就可以了。要怎麼刪除黑線上?按住「Shift」再點斑馬線即可。斑馬線很不好點,所以如果不是要特意訓練操作滑鼠的技巧以及考驗眼力,善用「Zoom」功能可以幫助黑線的繪製。
勾選「Show patches」選項,即可顯示粉紅色區域,如圖7。
圖7: 即時顯示可延展區
在draw9patch的右邊也會有縮放的展示圖。
Step 8: 完成NinePatch圖檔
儲存完成的NinePatch圖檔,draw9patch會自動將圖檔的副檔名儲存為*.9.png。完成NinePatch圖檔後,就可以開始寫程式了。
分享到:
相关推荐
Android NinePatch 技术
9patch mac版 点9工具(安装包)
Android原生的9patch图片制作工具,上传到CSDN以供大家学习以及参考,免去自行搜索下载的烦恼
切片Android样式的9色补丁图像,调整大小并进行交互式预览。 有关9补丁的说明,请参见 。 安装 如果要使用交互式查看器,请阅读“交互式查看器”下的其他安装说明。 $ pip install ninepatch Python用法 from ...
Android人员开发工具 这个九宫格绘画工具(draw9patch.bat)可以让你很容易的通过一个所见即所得(WYS|WYG)的编辑器来创建一个九宫格NinePatch图
免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,...
NinePatch图(9-Patch图,.9图)是一种可拉伸的图片。 该压缩包含有两种类型的Nine-Patch图片,一种是微信聊天背景,另一种是QQ聊天背景(海浪)。
Swing9patch, 一组很酷的Java Swing可重用组件或UI效果。
ninepatch-editor-1.25
Phaser3 Nine Patch插件为Phaser3添加了9切片缩放支持! 调整九个补丁的大小 没有九个补丁的调整大小 主要特点: 快速燃烧 低内存使用 易于使用的API 什么是九补丁? Nine-Patch是一种使用额外信息的图像格式,...
让您在 iOS 上轻松使用 9-Patch PNG 图片。 该技术只是将 9-patch PNG 图像转换为 iOS 兼容、可调整大小的 UIImage 对象。 有关详细信息,请参阅 UIImage 的 resizableImageWithCapInsets:(UIEdgeInsets)insets ...
NinePatchTest是Ninepatch的方法的实现工程
(实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。) 序列 ② :区域是导入的图片,以及可操作区域。 序列 ③ :这里 zoom:的长条bar 是对...
一个常用的工具类,用于装饰recyclerview,支持ninepatch镜像。
在Android应用开发当中经常需要使用图片,而图片又经常需要进行拉申,图片拉申的时候会出现变形,制作NinePatch图片可以指定图片的拉申区域,使图片拉申后还能获得比较好的效果。
photoshop网站切图高级教程
BeautyEye is a Java Swing cross-platform look and feel. 得益于Android平台的NinePatch技术,使得美化Swing变得容易。 BeautyEye is free, you can study, learn, even for commercial use.
用于装饰RecyclerView的通用工具类,支持ninepatch图像。 文档在这里 您可以使用gradle或maven导入此lib,因为它存在于JCenter中。 lib中将显示更多可扩展的有用方法。 该库将合并到ExpandRecyclerView lib中。 ...
图像NinePatch 作为视图的背景上使用具有伸缩性的位图图像,必须使用项目目录中的9.png扩展名 进行保存res/drawable/左侧和顶部绘制一条(或
在输入目录中,必须有一个名为“ninepatches.json”的 JSON 配置文件,它定义了每个输入图像的 Ninepatch 属性: { "ninePatches": { "testimg1.png": { "xScalingRange": "16-48", "yScalingRange": "16-48...