67 lines
3.5 KiB
Plaintext
67 lines
3.5 KiB
Plaintext
page.title=Draw 9-patch
|
|
page.tags=NinePatch
|
|
@jd:body
|
|
|
|
<p>The Draw 9-patch tool is a WYSIWYG editor that allows you to create bitmap images that
|
|
automatically resize to accommodate the contents of the view and the size of the screen. Selected
|
|
parts of the image are scaled horizontally or vertically based indicators drawn within the image. </p>
|
|
<p>For an introduction to NinePatch graphics and how they work, please read
|
|
the section about NinePatch Drawables in the
|
|
<a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">Canvas and Drawables</a>
|
|
document.</p>
|
|
|
|
<img src="{@docRoot}images/draw9patch-norm.png" style="float:right" alt="" height="300" width="341"
|
|
/>
|
|
|
|
<p>Here's a quick guide to create a NinePatch graphic using the Draw 9-patch tool.
|
|
You'll need the PNG image with which you'd like to create a NinePatch image.</p>
|
|
|
|
<ol>
|
|
<li>From a terminal, run the <code>draw9patch</code> command from your SDK
|
|
<code>sdk/tools</code> directory to launch the Draw 9-patch tool.
|
|
</li>
|
|
<li>Drag your PNG image into the Draw 9-patch window
|
|
(or <strong>File</strong> > <strong>Open 9-patch...</strong> to locate the file).
|
|
Your workspace will now open.
|
|
<p>The left pane is your drawing area, in which you can edit the lines for the
|
|
stretchable patches and content area. The right
|
|
pane is the preview area, where you can preview your graphic when stretched.</p>
|
|
</li>
|
|
<li>Click within the 1-pixel perimeter to draw the lines that define the stretchable
|
|
patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase
|
|
previously drawn lines.
|
|
</li>
|
|
<li>When done, select <strong>File</strong> > <strong>Save 9-patch...</strong>
|
|
<p>Your image will be saved with the <code>.9.png</code> file name.</p>
|
|
</li>
|
|
</ol>
|
|
|
|
<p>To make sure that your NinePatch graphics scale down properly, verify that any
|
|
stretchable regions are at least 2x2 pixels in size.
|
|
Otherwise, they may disappear when scaled down. Also, provide one pixel of extra safe space in
|
|
the graphics before and after stretchable regions to avoid interpolation during scaling that may
|
|
cause the color at the boundaries to change. </p>
|
|
|
|
<p class="note"><strong>Note:</strong> A normal PNG file (<code>*.png</code>) will be
|
|
loaded with an empty one-pixel border added around the image, in which you can draw
|
|
the stretchable patches and content area.
|
|
A previously saved NinePatch file (<code>*.9.png</code>) will be loaded as-is,
|
|
with no drawing area added, because it already exists.</p>
|
|
|
|
<img src="{@docRoot}images/draw9patch-bad.png" style="float:right;clear:both" alt="" height="300" width="341"
|
|
/>
|
|
|
|
<p>Optional controls include:</p>
|
|
<ul>
|
|
<li><strong>Zoom</strong>: Adjust the zoom level of the graphic in the drawing area.</li>
|
|
<li><strong>Patch scale</strong>: Adjust the scale of the images in the preview area.</li>
|
|
<li><strong>Show lock</strong>: Visualize the non-drawable area of the graphic on mouse-over.</li>
|
|
<li><strong>Show patches</strong>: Preview the stretchable patches in the drawing area (pink is a
|
|
stretchable patch).</li>
|
|
<li><strong>Show content</strong>: Highlight the content area in the preview images
|
|
(purple is the area in which content is allowed).</li>
|
|
<li><strong>Show bad patches</strong>: Adds a red border around patch areas that may
|
|
produce artifacts in the graphic when stretched. Visual coherence of your stretched
|
|
image will be maintained if you eliminate all bad patches.</li>
|
|
<ul>
|