Andorid中.9.png图片的使用及制作

我们有一个TextView，其里面的内容是可以通过代码动态改变的，我们想用一张图片作为TextView的背景，实现类似于手机QQ对话中的气泡文本效果。

TextView定义如下：

<TextView android:text="@string/hello_world"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:background="@drawable/original" />

背景图片如下所示：

最终TextView的效果如下所示：

上图中的虚线是TextView的外轮廓，我们把TextView的宽度和高度都定义为wrap_content，并且将gravity设置为center，但是还是没有实现我们理想的状态。TextView中的文本相对于整个图片居中了，但是我们想要的效果是文本在绿色的矩形区域内居中。

上图中的文本较短，展现出的问题还不是很明显。当我们将TextView中的文本设置为具有一定长度的时候，问题更加突出，如下所示：

上面这张图片暴露出两个问题：

我们原始的图片是自上而下绿色逐渐变淡，并且右侧和下侧有阴影。当背景图被拉伸为上图大小的时候，图片失真严重：消息框的四个角模糊不清；阴影被模糊放大，比较难看；绿色不清晰，渐变效果也基本看不出来。
文字已经超出了图片的消息框范围，杂乱无章。

出现上述问题的原因是，整个背景图被完全拉伸了，而且拉伸后的图片的宽高比例与原始图片的宽高比例不同。如果只对原始图片矩形消息框中的区域进行拉伸，那么就可以解决上述问题。

为了解决上述问题，我们可以使用Android中的.9.png格式图片，即Nine-patch。

下面对.9.png格式图片进行一下说明：

首先，.9.png格式的图片本身就是.png格式图片，不过该图片以.9作为文件名的后缀。
我们可以将一个.png图片转换成.9.png图片，.9.png图片比正常的.png图片在图片最外围的四边多了1px边框，我们可以在这最外层的1px边框上定义图片的可拉伸区域以及图片的内容区域。

我们对原始的背景图进行编辑，可以得到如下的文件名为message.9.png的图片：

当我们用该处理过的.9.png图片作为TextView的背景时，效果如下所示：

由上图我们可以看到，所有文本都居中放到了消息框的矩形区域中，而且图片没有失真，保持了原有图片的质感。

我们可以仔细观察一下上述的message.9.png这张图片，可以发现该图片的最外层的四边有黑点、黑线，具体来说：

可以将图片最上侧1px边框中的一个或多个点设置为黑色，本例中我们用了一条黑色的线段，这些黑色的点定义了图片中可以被横向拉伸的区域。同样也可以将图片最左侧1px边框中的一个或多个点设置为黑色，本例中我们只用了一个黑色的像素点，这些黑色的点定义了图片中可以被纵向拉伸的区域。横向拉伸像素点与纵向拉伸像素点相交定义了图片中可拉伸的矩形区域，这样就实现了对图片中一部分区域进行拉伸。
我们可以选择性地对图片的底边和右边设置黑色线段，用这些黑色线段定义图片的内容区域。当我们图片里的样式是不规则图形的时候，定义图片的内容区域很重要，TextView中的文本都会放到内容区域中。将图片最下侧1px边框设置一条黑色线段，该横向线段定义了图片的横向内容区域。将图片最右侧1px边框设置一条黑色线段，该纵向线段定义了图片的纵向内容区域。横向线段与纵向线段的组成的矩形区域就组成了内容区域。如果不定义图片的内容区域，那么图片的内容区域就是整个图片区域。
.9.png最外侧四边中的像素要么是纯透明、纯白色，要么是纯黑色，不要设置其他颜色和透明度。

我们可以用Photoshop将一个已有的.png编辑成.9.png。其实，Android本身也提供了编辑.9.png的工具，Android/sdk/tools目录下有很多实用的工具，我们可以使用该目录下的draw9patch工具对.png图片进行编辑。

使用步骤如下：

可以通过命令行，也可以通过直接双击启动draw9patch，显示出GUI界面。
打开“Draw 9-patch”之后，可以直接将一个.png图片拖拽到GUI界面上，也可以通过File菜单中的“Open 9-patch”菜单项打开.png图片。左侧是图片编辑区，右侧是预览区。可以在编辑区对图片的最外层的四边框设置黑色点，如下图所示：
通过鼠标单击可以将最外层中的像素设置为黑色，通过这种方法可以设置图片的拉伸区域和图片的内容区域。按住Shift键再单击黑色像素可以将黑色像素重置为透明。左侧的编辑会实时在右侧区域显示出来。右侧预览区中有三个图片，第一个图片表示的是垂直方向进行拉伸的预览效果图，第二个图片表示的是水平方向进行拉伸的预览效果图，第三个图片表示的是同时在水平和垂直方向上进行拉伸的预览效果图。
在界面下侧是控制参数的面板。
- Zoom
  通过调节Zoom可以调节左侧编辑区域的缩放比例。
- Patch scale
  通过调节Patch scale可以调节右侧预览区域的缩放比例。
- Show lock
  我们之前提到了，我们只能编辑图片最外层1px的边框，如果勾选了Show lock，那么当我们将鼠标放到左侧编辑区域时，那么不可编辑区域会以红色条纹遮盖，效果如下所示：
- Show content
  当我们勾选了Show content后，右侧预览区中的图片会把内容区域以蓝色表示。
- Show patches
  当勾选了Show patches后，左侧编辑区域中的可拉伸区域会粉红色高亮显示出来。
- Show bad patches
  当我们在top或left边上设置可拉伸区域设置了连续多个像素时，有可能会造成图片在拉伸时多个像素颜色进行插值导致失真，如果出现了这种情况会以红色显示。

希望本文对大家使用.9.png有所帮助！

相关阅读：
我的Android博文整理汇总

Andorid中.9.png图片的使用及制作相关推荐

dw html5中怎么设置图片自动切换,DW制作九宫格全屏亮灯轮播图片且自动切换图片教程...
本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧! 软件名称:Adobe Dreamweaver CS3 官方中文安装版软件大小: ...
jdbc mysql查询显示图片_JDBC【向数据库中存入读取图片】
JDBC-向数据库中存入读取图片注:此代码依赖自定义的数据库连接工具类 1.向数据库存入一张照片 import java.io.File; import java.io.FileInputStrea ...
解决Chrome中UEditor插入图片的选择框加载过慢问题
解决Chrome中UEditor插入图片的选择框加载过慢问题 ../resources/plugins/ueditor/ueditor.all.js 中line24489/24498中的 accept ...
R语言ggplot2可视化使用ggplot2包patchwork包在可视化结果（右上角）中插入logo图片
R语言ggplot2可视化使用ggplot2包patchwork包在可视化结果(右上角)中插入logo图片目录
ubuntu中命令打开图片、文档、音乐、视频等
ubuntu中命令打开图片.文档.音乐.视频等安装播放软件 sudo apt install libdvdnav4 libdvdread4 gstreamer1.0-plugins-bad gstr ...
word文档html图片不能移动,win7系统Word中插入的图片不能移动的解决方法
很多小伙伴都遇到过win7系统Word中插入的图片不能移动的困惑吧,一些朋友看过网上零散的win7系统Word中插入的图片不能移动的处理方法,并没有完完全全明白win7系统Word中插入的图片不能移动 ...
java jframe显示图片_java怎么在JFrame中显示动态图片
java怎么在JFrame中显示动态图片 (2012-09-16 23:39:54) 标签: 杂谈 import java.awt.Graphics; import javax.swing.Image ...
php文章远程图片,php保存远程图片到本地 php正则匹配文章中的远程图片地址
在添加文章的时候,很多情况下我们需要处理文章中的远程图片,将其保存到本地,以免别人网站删除后文章里面就无法访问了. 因此我们需要正则匹配文章中的图片地址, 这里我们使用php的正则表达式来实现:$co ...
【Android 安装包优化】Android 中使用 SVG 图片 ( Android 5.0 以下的矢量图方案 | 矢量图生成为 PNG 图片 )
文章目录一.Android 5.0 以下的矢量图方案二.矢量图生成为 PNG 图片三.完整的 build.gradle 构建脚本四.编译效果五.参考资料一.Android 5.0 以下的矢 ...

Andorid中.9.png图片的使用及制作

Andorid中.9.png图片的使用及制作相关推荐

最新文章

热门文章