Android制作 9-Patch图片（可调整大小的位图）

爱被打了一巴掌 2022-06-10 14:13 529阅读 0赞

**前言**：

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

![这里写图片描述][SouthEast]

运行后如下所示：

![这里写图片描述][SouthEast 1]

### **2. 将需要制作成.9的图片拖进去：** ###

将原图拖入工具中，显示如下：

![这里写图片描述][SouthEast 2]

### **3. 绘制拉伸区域和显示区域**： ###

![这里写图片描述][SouthEast 3]

**分析**：

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

**一侧边的多处拉伸区域**：

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

#### **4. 保存** ####

![这里写图片描述][SouthEast 4]

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

#### **5. 成品最终展示:** ####

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

![这里写图片描述][SouthEast 5]

--------------------

### **AndroidStudio制作.9图片** ###

--------------------

#### **1. AndroidStudio中选着图片**： ####

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

![这里写图片描述][SouthEast 6]

#### **2. 输入.9图片的名字和保存目录**： ####

![这里写图片描述][SouthEast 7]

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

#### **3. 找到且打开刚才的.9图片，进行制作**： ####

打开刚才保存的.9图片，如下图所示：

![这里写图片描述][SouthEast 8]

进行绘制操作：

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

![这里写图片描述][SouthEast 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][https_developer.android.google.cn_studio_write_draw9patch.html]
 *  **NinePatch工具介绍**：
    
    [https://developer.android.google.cn/guide/topics/graphics/2d-graphics.html\#nine-patch][https_developer.android.google.cn_guide_topics_graphics_2d-graphics.html_nine-patch]

[SouthEast]: /images/20220610/f71375af289243e7ad06632ce4376a8e.png
[SouthEast 1]: /images/20220610/e50007825b1b43b69640966870a8cae2.png
[SouthEast 2]: /images/20220610/65123e886eef48d1a07ac0c8509d7ca6.png
[SouthEast 3]: /images/20220610/f6a86c82a4a84b06abfe778b2e4fb0ba.png
[SouthEast 4]: /images/20220610/a684d34075944ef0a94edc1087a8c870.png
[SouthEast 5]: /images/20220610/3d5989d323cd48d7847f272e6ace56bb.png
[SouthEast 6]: /images/20220610/1cb83e62fa1d4da099334c5fccb4a1d8.png
[SouthEast 7]: /images/20220610/75d4798365b24cac9b8f56f8ab16e554.png
[SouthEast 8]: /images/20220610/7aed446cb3c6487486e3dc629458d555.png
[SouthEast 9]: /images/20220610/812e3c379d0647888eb7c080e95a8b98.png
[https_developer.android.google.cn_studio_write_draw9patch.html]: https://developer.android.google.cn/studio/write/draw9patch.html
[https_developer.android.google.cn_guide_topics_graphics_2d-graphics.html_nine-patch]: https://developer.android.google.cn/guide/topics/graphics/2d-graphics.html#nine-patch