咨询9-Patch图像的作用、原理及颜色含义与使用方法

Hey there! Let's dive into all things 9-Patch, since you're asking about their color markers, core purpose, how they work, and that color change you saw after renaming your PNG to .9.png.

一、9-Patch到底用来干嘛？ #

Think of 9-Patch as Android's secret weapon for adaptive UI elements. It's a special type of PNG that lets you create UI components (like buttons, dialog backgrounds, or input fields) that stretch without distorting their critical parts. For example, a rounded button can stretch horizontally or vertically without making the rounded corners look stretched or pixelated—total game-changer for consistent UIs across different screen sizes.

二、9-Patch的工作原理 #

At its core, 9-Patch uses a 1-pixel border around your original PNG to add "instructions" for the Android system. These instructions tell the system two key things:

• Which parts of the image can be stretched (so the important bits stay intact)
• Where content (like text or icons) should be placed inside the image

The system reads these 1-pixel markers and automatically scales the image correctly when it's used in layouts.

三、那些颜色到底代表什么？ #

When you rename a regular PNG to .9.png and open it in a tool like Android Studio's 9-Patch Editor, you'll see colored lines—these are the editor's way of showing you the markers and guides. Here's what each color means:

• Black (#000000)：This is the only color the Android system actually recognizes as a valid marker. It has specific roles based on where it's drawn:
  • Top edge: Marks horizontal stretchable areas (the parts that can grow/shrink left-right)
  • Left edge: Marks vertical stretchable areas (the parts that can grow/shrink top-bottom)
  • Right edge: Defines the horizontal bounds where content (like text) should sit inside the image
  • Bottom edge: Defines the vertical bounds for content placement
• Red (#FF0000)：This is an editor-only helper color. It's used when you want to erase existing black markers—think of it as a "delete" tool for your stretch/content lines. If you see red in the preview, it might also indicate invalid markers (like lines thicker than 1 pixel, which the system will ignore).
• Transparent areas：Any part of the 1-pixel border that's transparent tells the system "ignore this section"—it doesn't count as a stretch or content marker.

That color change you noticed? It's just the editor visualizing the editable border for you—your original image content isn't actually being altered.

四、怎么正确使用9-Patch？ #

Here's a quick step-by-step to get you started:

1. Start with a regular PNG: Make sure it has at least 1 pixel of blank space around all edges (this is where you'll draw your markers).
2. Rename it: Change the filename to your_image.9.png (the .9 suffix tells Android it's a 9-Patch file).
3. Open in Android Studio's 9-Patch Editor: Double-click the file in your project to launch it.
4. Draw your markers:
   • Use the black pencil tool to draw horizontal stretch lines on the top edge, vertical stretch lines on the left edge.
   • Draw content bounds on the right (horizontal) and bottom (vertical) edges to define where text/icons should go.
   • Use the red eraser tool to fix any mistakes or remove unwanted markers.
5. Preview: Use the editor's preview pane to test how the image stretches—make sure corners or key design elements don't get distorted.
6. Use it in your layout: Just reference the drawable like any other resource (e.g., @drawable/your_image) and Android will handle the rest!

内容的提问来源于stack exchange，提问作者BiRjU