前言:
Android .9图片是一个指定一些区域可拉伸,另外一些区域不拉伸的位图,同时还可以指定显示内容的区域。在Android开发中,经常使用到.9图片,避免手机密度导致位图变形。
在Eclipse开发App的时代:
- 制作.9图片,用Draw9patch.bat工具完成。
AndroidStudio开发App的时代:
- Draw9patch.bat工具制作.9图片
- AndroidStudio支持制作.9图片。
Draw9patch.bat工具制作.9图片
1. 打开工具:
在Android SDK–>tools–>Draw9patch.bat,双击运行。
运行后如下所示:
2. 将需要制作成.9的图片拖进去:
将原图拖入工具中,显示如下:
3. 绘制拉伸区域和显示区域:
分析:
- 左边和上边黑色边是可以拉伸部分,即可以随着设置的大小在手机上显示不同的效果。
- 下侧边和右侧边的黑色边是可显示区域。
一侧边的多处拉伸区域:
若是需要在一侧边绘制多处可拉伸区域,当制做完一处可拉伸区域后。点击图片外面,会出现新的黑色拉伸区域,根据具体的实际需求重复次数。
4. 保存
当制作完成后,按ctrl+s会进行保存操作。
5. 成品最终展示:
原图和.9图片分别如下:
AndroidStudio制作.9图片
1. AndroidStudio中选着图片:
在AndroidStudio中,选择一张图片,右键点击,选择Create 9-patch file,如下图所示:
2. 输入.9图片的名字和保存目录:
根据不同的实际需求,保存对应的目录下。这里,本人选择drawable-hdpi下。
3. 找到且打开刚才的.9图片,进行制作:
打开刚才保存的.9图片,如下图所示:
进行绘制操作:
左侧窗格是绘制区域,在其中编辑可拉伸配线和内容区域的线条。右侧窗格是预览区域,在其中预览拉伸的图形。
根据需求绘制拉伸区域,这里根据需求,左侧边拉伸两处,上侧边拉伸两处。
4. 保存:
快捷键Ctrl+S进行保存,或者File->Save all。
5. 底部视窗上一些参数(来源官方介绍):
- Zoom:调整图形在绘制区域中的缩放级别。
- Patch scale:调整图像在预览区域中的比例。
- Show lock:当鼠标悬停在图形的不可绘制区域上时以直观方式呈现。
- Show patches:在绘制区域中预览可拉伸配线(紫色为可拉伸配线),如上面的图 2 所示。
- Show content:突出显示预览图像中的内容区域(紫色为允许内容的区域),如图 2 所示。
- Show bad patches:在拉伸时可能会在图形中产生伪影的配线区域周围添加红色边界,如图 2 所示。如果您消除所有不良配线,已拉伸图像的视觉连贯性将得以保持
AndroidStudio中.9图片注意事项:
Android Studio中,.9图片要要同时在左侧和上侧都要画线(即可拉伸区域)。若是只绘一侧,会运行不起来,出现以下错误。
AAPT err(Facade for 955467117): ERROR: 9-patch image \\?\F:\HaplioChat\app\src\main\res\drawable-hdpi\chat_second_content_bg.9.png malformed.
AAPT err(Facade for 955467117): No marked region found along edge.
AAPT err(Facade for 955467117): Found along top edge.
资源参考:
- AndroidStudio 9-Patch : https://developer.android.google.cn/studio/write/draw9patch.html
- NinePatch工具介绍:
https://developer.android.google.cn/guide/topics/graphics/2d-graphics.html#nine-patch