创建可调整大小的位图(9-patch 文件)
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
Draw 9-patch 工具是 Android Studio 中包含的一种 WYSIWYG(所见即所得)编辑器。借助该工具,您可以创建能够自动调整大小以适应视图内容和屏幕尺寸的位图图像。您可以根据图片内绘制的指示标记,水平或垂直缩放图片中的所选部分。
有关 NinePatch 图形及其工作原理的介绍,请阅读 NinePatch 可绘制对象。
图 1. Android Studio 的 Draw 9-patch 工具,显示 NinePatch 图像。
按照以下步骤使用 Android Studio 中的 Draw 9-patch 工具创建一个 NinePatch 图形。您需要一个用于创建 NinePatch 图像的 PNG 图像。
- 在 Android Studio 中,右键点击您想要用来创建 NinePatch 图像的 PNG 图像,然后点击 Create 9-patch file。
- 为您的 NinePatch 图像输入一个文件名,然后点击 OK。您将创建一个文件扩展名为
.9.png
的图像。
- 双击您的新 NinePatch 文件,将其在 Android Studio 中打开。
在打开的工作区中,左侧窗格是您的绘制区域,您可以在其中修改可拉伸图块和内容区域的线条。右侧窗格是预览区域,您可以在其中预览拉伸的图形。
- 在 1 像素周长的范围内点击,以绘制定义可拉伸图块和(可选)内容区域的线条。
右键点击即可清除之前绘制的线条(在 Mac 上,按住 Shift 键并点击)。
- 完成后,依次点击 File > Save 以保存您所做的更改。
如需在 Android Studio 中打开现有的 NinePatch 文件,请双击该文件。
如需确保您的 NinePatch 图形正确缩小,请验证任意可拉伸区域的尺寸是否至少为 2x2 像素。否则,这些区域在缩小时可能会消失。为避免在缩放过程中发生插值(可能导致边界处的颜色发生变化),请在图形的可拉伸区域之前和之后提供 1 像素的额外空间。
注意:正常的 PNG 文件 (*.png
) 加载时会在图像周围添加 1 个像素的空边框。您可以在边框内绘制可拉伸图块和内容区域。
之前保存的 NinePatch 文件 (*.9.png
) 会按原样加载,不会添加绘制区域,因为此区域已经存在。
图 2. Android Studio 中的 NinePatch 图像,显示了内容、图块和不良图块。
可选控件包括:
- Zoom:调整图形在绘制区域中的缩放级别。
- Patch scale:调整图像在预览区域中的比例。
- Show lock:当鼠标悬停在图形的不可绘制区域上时以直观方式呈现。
- Show patches:预览绘制区域中的粉色可拉伸图块。粉色表示可拉伸图块,如图 2 所示。
- Show content:突出显示预览图像中的内容区域。紫色为允许绘制内容的区域,如图 2 所示。
- Show bad patches:在拉伸时可能会在图形中产生伪影的图块区域周围添加红色边框,如图 2 所示。如果您消除了所有不良图块,则会保持拉伸图像的视觉连贯性。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-27。
[null,null,["最后更新时间 (UTC):2025-07-27。"],[],[],null,["# Create resizable bitmaps (9-patch files)\n\nThe Draw 9-patch tool is a WYSIWYG editor included in Android Studio. The tool lets you create\nbitmap images that automatically resize to accommodate the contents of the view and the size of\nthe screen. You can scale selected parts of the image horizontally or vertically based on indicators\ndrawn within the image.\n\nFor an introduction to NinePatch graphics and how they work, read\n[NinePatch drawables](/guide/topics/graphics/2d-graphics#nine-patch).\n\n**Figure 1.** Android Studio's\nDraw 9-patch tool displaying a NinePatch image.\n\nFollow these steps to create a NinePatch graphic using the Draw 9-patch tool in Android\nStudio. You'll need the PNG image that you'd like to create a NinePatch image from.\n\n1. In Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click **Create 9-patch file**.\n2. Enter a filename for your NinePatch image and click **OK** . Your image will be created with the `.9.png` file extension.\n3. Double-click your new NinePatch file to open it in Android Studio. \n\n In the workspace that opens, the left pane is your drawing area, where you can edit\n the lines for the stretchable patches and content area. The right\n pane is the preview area, where you can preview your graphic when stretched.\n4. Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) the content area. \n\n Right-click to erase\n previously drawn lines (on Mac, hold Shift and click).\n5. When done, click **File** \\\u003e **Save** to save your changes.\n\nTo open an existing NinePatch file in Android\nStudio, double-click the file.\n\nTo make sure that your NinePatch graphics scale down properly, verify that any\nstretchable regions are at least 2x2 pixels in size.\nOtherwise, those regions may disappear when scaled down. To avoid interpolation during scaling\nthat may cause the color at the boundaries to change, provide 1 pixel of extra safe\nspace in the graphics before and after stretchable regions.\n\n**Note:** A normal PNG file (`*.png`) is\nloaded with an empty 1-pixel border added around the image. You can draw\nthe stretchable patches and content area within the border.\nA previously saved NinePatch file (`*.9.png`) is loaded as-is,\nwith no drawing area added because it already exists.\n\n**Figure 2.** A NinePatch image in Android Studio\nshowing content, patches, and bad patches.\n\nOptional controls include:\n\n- **Zoom**: Adjust the zoom level of the graphic in the drawing area.\n- **Patch scale**: Adjust the scale of the images in the preview area.\n- **Show lock**: Visualize the non-drawable area of the graphic on mouse-over.\n- **Show patches**: Preview the pink stretchable patches in the drawing area. Pink indicates a stretchable patch, as shown in figure 2.\n- **Show content**: Highlight the content area in the preview images. Purple indicates the area where content is allowed, as shown in figure 2.\n- **Show bad patches**: Adds a red border around patch areas that may produce artifacts in the graphic when stretched, as shown in figure 2. If you eliminate all bad patches, you will maintain the visual coherence of your stretched image."]]