Android 图片自动拉伸不变形，点九

要让 UI 设计师 制作 Android 用的点九图（.9.png），可以按照以下流程和要求进行：

🧩 一、什么是点九图？
点九图（NinePatch）是一种特殊的 PNG 图像，用于在 Android 中根据内容大小自动拉伸背景或边框。它能定义哪些区域可以拉伸、内容如何填充。

🎨 二、UI 制作流程（推荐使用 Photoshop + Android Studio 或专用工具）
✅ 方法 1：用 Android Studio 自带工具制作 .9.png
准备好一张普通的 PNG 图片（无圆角/拉伸定义）。

在 Android Studio 中：

右键点击 res/drawable → New → Drawable Resource File。

将 PNG 命名为 xxx.9.png，注意一定是 .9.png 后缀。

Android Studio 会自动打开 Draw 9-patch 工具界面。

用画笔工具在左、上边缘画黑线来定义“可拉伸区域”。

在右、下边缘画黑线来定义“内容显示区域”。

可以实时预览不同大小下的拉伸效果。

编辑完成后，直接保存。

🧠 拉伸规则说明：
左边黑线：定义水平方向可拉伸区域。

上边黑线：定义垂直方向可拉伸区域。

右边黑线：定义内容显示的水平区域。

下边黑线：定义内容显示的垂直区域。

✅ 方法 2：使用专用工具（推荐给 UI 设计师）
Draw9Patch在线工具（适合设计师）
上传你的 PNG。

用工具画出拉伸区域与内容区域。

下载 .9.png 文件。

交给开发者放入 res/drawable/ 目录即可使用。

📁 三、保存要求
文件名必须以 .9.png 结尾。

图片四边需留出 1 像素的边框画黑线。

内容不能贴边（至少留出 1px 内边距）。

尽量导出为 不带透明边的纯图（除非故意为透明效果设计）。

代码使用：

     <LinearLayoutandroid:layout_width="331dp"android:layout_height="wrap_content"android:background="@mipmap/ic_9_group_1912062586_1"android:orientation="vertical"android:layout_marginTop="19dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="恋爱建议"android:layout_marginTop="10dp"android:layout_marginBottom="10dp"/><TextViewandroid:id="@+id/tv_love_sug"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方发撒啊啥地方是安分点爱上对方"android:textColor="#FFF"android:textSize="16sp" /></LinearLayout>

原理：
🧩 NinePatch 的“九宫格”原理（看图能更理解）
一张 NinePatch 图片（.9.png）会被系统划分为一个 3x3 的九宫格：

 -----------------------------
| TL |  T  | TR |
|----|-----|----|
| L  | C   | R  |
|----|-----|----|
| BL |  B  | BR |

区域	说明
TL / TR / BL / BR（四角）	不会被拉伸，保持原样，通常用来保留圆角、边框角等
T / B（上下边）	只能水平拉伸
L / R（左右边）	只能垂直拉伸
C（中心）	可以随意拉伸（水平+垂直），最常用来拉伸背景或填充区域

🖋 如何标记拉伸区域（左/上边框）
你在工具里点左边或上边时，其实就是告诉系统：

左边的黑线：哪一段高度可垂直拉伸

上边的黑线：哪一段宽度可水平拉伸

这些黑线定义了“中心 C 区域”——也就是那个被允许拉伸的核心区域。

🧰 示例说明
假设你上传了一个带圆角的气泡图：

你需要这样标记：
上边中间画一段黑线 → 代表水平方向可拉伸（避开左上/右上角）

左边中间画一段黑线 → 代表垂直方向可拉伸（避开左上/左下角）

右边画一段黑线 → 定义文本区域右边界

下边画一段黑线 → 定义文本区域下边界

这样图片就只会在中间拉伸，圆角不会被破坏，文字也不会靠得太边。

🎯 总结一句话：
“你看到的九宫格，是系统理解图片如何拉伸的视觉辅助框，我们需要通过在图片边上画黑线，告诉系统‘哪里可以伸缩、哪里不能动’。”

如果一个图片，被拉很长很长，那L和B就会被垂直拉伸了。如果原图宽度50，屏幕宽度200，那宽度被拉的很长的话，T和B也会被拉伸。四个角不变，中间是可拉伸区域