Android原生开发笔记 九宫格图片

java yekong 578℃

将某张图片设置成视图背景时,如果图片尺寸太小,则系统会自动拉伸图片使之填满背景。
可是一旦图片拉得过大,其画面容易变得模糊。

Android原生开发笔记 九宫格图片

为了解决这个问题,Android专门设计了点九图片。点九图片的扩展名是png,文件名后面常带有“.9”字样。因为该图片划分了3x3的九宫格区域,所以得名点九图片,也叫九宫格图片。如果背景是一个形状图形,其stroke节点的width属性已经设置了固定数值(如1dp),那么无论该图形被拉到多大,描边宽度始终是1dp。点九图片的实现原理与之类似,即拉伸图形时,只拉伸内部区域,不拉伸边缘线条。为了演示九宫格图片的展示效果,要利用Android Studio制作一张点九图片。首先在drawable目录下找到待加工的原始图片
button_pressed_orig.png,右击它弹出右键菜单如图5-4所示。
选择右键菜单下面的“Create 9—Patch files...",并在随后弹出的对话框中单击OK按钮。接着drawable目录自动生成一个名为“button_pressed_orig.9.png”的图片,双击该文件,主界面右侧弹出如图5—5所示的点九图片的加工窗口。
16727110164934TXROd

注意图5—5的左侧窗口是图片加工区域,右侧窗口是图片预览区域,从上到下依次是纵向拉伸预览、横向拉伸预览、两方向同时拉伸预览。在左侧窗口图片四周的马赛克处单击会出现一个黑点,把黑点左右或上下拖动会拖出一段黑线,不同方向上的黑线表示不同的效果。

如图5—6所示,界面上边的黑线指的是水平方向的拉伸区域。水平方向拉伸图片时,只有黑线区域内的图像会拉伸,黑线以外的图像保持原状,从而保证左右两侧的边框厚度不变。

1672710874887WkSlVw

如图所示,界面左边的黑线指的是垂直方向的拉伸区域。垂直方向拉伸图片时,只有黑线区域内的图像会拉伸,黑线以外的图像保持原状,从而保证上下两侧的边框厚度不变。
1672711193828W9Mmr2

如图5—8所示,界面下边的黑线指的是该图片作为控件背景时,控件内部的文字左右边界只能放在黑线区域内。这里Horizontal Padding的效果就相当于android:paddingLeft与android:paddingRight

1672711228740B8yALQ

如图5—9所示,界面右边的黑线指的是该图片作为控件背景时,控件内部的文字上下边界只能放在黑线区域内。这里Vertical Padding的效果就相当于android:paddingTop与android:paddingBottom.

1672711367007kDwtfN

尤其注意,如果点九图片被设置为视图背景,且该图片指定了Horizontal Padding和Vertical Padding,那么视图内部将一直与视图边缘保持固定间距,无论怎么调整XML文件和Java代码都无法缩小间隔,缘由是点九图片早已在水平和垂直方向都设置了padding。

图片效果对比

图片效果对比

教程地址

感恩老师的教程:Android 基础教程,从开发入门到项目实战49-九宫格图片

喜欢 (0)