Android中.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有所帮助!

时间: 2024-08-01 01:12:28

Android中.9.png图片的使用及制作的相关文章

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

我们有一个TextView,其里面的内容是可以通过代码动态改变的,我们想用一张图片作为TextView的背景,实现类似于手机QQ对话中的气泡文本效果. TextView定义如下: <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravit

Android中3种图片压缩处理方法

  这篇文章主要介绍了Android中3种图片压缩处理方法,本文讲解了质量压缩方法.获得缩略图.图片缩放三种方法并分别给出示例代码,需要的朋友可以参考下 Android中图片的存在形式: 1:文件形式:二进制形式存在与硬盘中. 2:流的形式:二进制形式存在与内存中. 3:Bitmap的形式 三种形式的区别: 文件形式和流的形式:对图片体积大小并没有影响.也就是说,如果你手机SD卡上的图片通过流的形式读到内存中,在内存中的大小也是原图的大小. 注意:不是Bitmap的形式. Bitmap的形式:图

android中如何将一个图片处理成相同长和宽?

问题描述 android中如何将一个图片处理成相同长和宽? 我实现了一个从手机相册获得图片的功能,获得的图片的高和宽是不相等,图片是一个长方形,要怎样处理才能将它的宽和高是相等的? 解决方案 public static Bitmap createTargetSizeBitmap(int targetSizeBitmap image){ int w = image.getWidth(); int h = image.getHeight(); Matrix m = new Matrix(); m.p

管理-Android中怎么把图片添加进相册

问题描述 Android中怎么把图片添加进相册 Android中管理相册的类是哪个啊我想把图片存进相册应该怎么做呢我是把工程目录下的图片获取了然后存入到相册里面 解决方案 这个应该是利用系统的ContentProvider进行.参照下面博客,http://blog.csdn.net/mr_dsw/article/details/48524977 解决方案二: Android 相册图片 添加应用到分享列表android裁剪相册图片Android 保存图片到系统相册 解决方案三: 把你的图片放在相册

数据缓存-Android中数据以及图片的缓存

问题描述 Android中数据以及图片的缓存 在实际开发中,应该如何对图片还有数据进行缓存处理呢?就是,有网络的情况下用户点击进去了好多界面,当关闭网络的时候再进入到原来点击的界面时,展示有网络时缓存的数据!这个应该怎么操作呢????菜鸟求解答3q 解决方案 可以缓存,更好的办法是用GreenDao或者WrapLibrary保存到数据库里 解决方案二: Android--SoftReference缓存图片

Android中简单调用图片、视频、音频、录音和拍照的方法_Android

本文实例讲述了Android中简单调用图片.视频.音频.录音和拍照的方法.分享给大家供大家参考,具体如下: //选择图片 requestCode 返回的标识 Intent innerIntent = new Intent(Intent.ACTION_GET_CONTENT); //"android.intent.action.GET_CONTENT" innerIntent.setType(contentType); //查看类型 String IMAGE_UNSPECIFIED =

安卓Android中如何设置图片的移动,能够自动地移动

问题描述 安卓Android中如何设置图片的移动,能够自动地移动 安卓Android中如何设置图片的移动,能够自动地移动,比如下雨的情形,雨滴自由下落 解决方案 图片移动就用动画就可以啊,在Activity的onStart()或者onResume()中启动动画,你每次进入Activity,这个图片就会自动的移动的. 解决方案二: http://www.2cto.com/kf/201109/102541.html 解决方案三: protected void onResume() { super.o

Android中实现圆角图片的几种方法

Android中实现圆角图片有多种姿势,不知你解锁了几种? 方法一:setXfermode法 此种方式就是再new一个相同尺寸的bitmap,然后使用paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));先画圆角矩形,再画原始bitmap,然后就得到了一个圆角的bitmap了. public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, float roundPx) { Bitmap

Android中3种图片压缩处理方法_Android

Android中图片的存在形式: 1:文件形式:二进制形式存在与硬盘中. 2:流的形式:二进制形式存在与内存中. 3:Bitmap的形式 三种形式的区别: 文件形式和流的形式:对图片体积大小并没有影响.也就是说,如果你手机SD卡上的图片通过流的形式读到内存中,在内存中的大小也是原图的大小. 注意:不是Bitmap的形式. Bitmap的形式:图片占用的内存会瞬间变大. 以下是代码的形式:      /** * 图片压缩的方法总结 */ /* * 图片压缩的方法01:质量压缩方法 */ priva