前言

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,双击运行。

android 点9图拉伸 安卓图片拉伸软件_android 点9图拉伸

运行后如下所示:

android 点9图拉伸 安卓图片拉伸软件_9-patch图片_02

2. 将需要制作成.9的图片拖进去:

将原图拖入工具中,显示如下:

android 点9图拉伸 安卓图片拉伸软件_Android_03

3. 绘制拉伸区域和显示区域:

android 点9图拉伸 安卓图片拉伸软件_点9图片_04

分析

  • 左边和上边黑色边是可以拉伸部分,即可以随着设置的大小在手机上显示不同的效果。
  • 下侧边和右侧边的黑色边是可显示区域。

一侧边的多处拉伸区域

若是需要在一侧边绘制多处可拉伸区域,当制做完一处可拉伸区域后。点击图片外面,会出现新的黑色拉伸区域,根据具体的实际需求重复次数。

4. 保存

android 点9图拉伸 安卓图片拉伸软件_Android_05

当制作完成后,按ctrl+s会进行保存操作。

5. 成品最终展示:

原图和.9图片分别如下:

android 点9图拉伸 安卓图片拉伸软件_9-patch图片_06


AndroidStudio制作.9图片

1. AndroidStudio中选着图片:

在AndroidStudio中,选择一张图片,右键点击,选择Create 9-patch file,如下图所示:

android 点9图拉伸 安卓图片拉伸软件_点9图片_07

2. 输入.9图片的名字和保存目录:

android 点9图拉伸 安卓图片拉伸软件_android_08

根据不同的实际需求,保存对应的目录下。这里,本人选择drawable-hdpi下。

3. 找到且打开刚才的.9图片,进行制作:

打开刚才保存的.9图片,如下图所示:

android 点9图拉伸 安卓图片拉伸软件_android_09

进行绘制操作:

左侧窗格是绘制区域,在其中编辑可拉伸配线和内容区域的线条。右侧窗格是预览区域,在其中预览拉伸的图形。

android 点9图拉伸 安卓图片拉伸软件_点9图片_10

根据需求绘制拉伸区域,这里根据需求,左侧边拉伸两处,上侧边拉伸两处。

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