Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

am 6bb23d62: am 29936684: am 0a504745: Merge "docs: 9patch tool update" into lmp-docs

Browse Source 
* commit '6bb23d627f608461f6dd5f40308ac176a327d99b':
  docs: 9patch tool update
This commit is contained in:
Rich Slogar
2015-02-26 18:22:34 +00:00
committed by Android Git Automerger
parent bd409177ec 6bb23d627f
commit 328dc4288b
1 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/html/tools/help/draw9patch.jd
View File

@@ -2,42 +2,50 @@ page.title=Draw 9-patch
page.tags=NinePatch page.tags=NinePatch
@jd:body @jd:body
<p>The Draw 9-patch tool allows you to easily create a <p>The Draw 9-patch tool is a WYSIWYG editor that allows you to create bitmap images that
{@link android.graphics.NinePatch} graphic using a WYSIWYG editor.</p> automatically resize to accommodate the contents of the view and the size of the screen. Selected
<p>For an introduction to Nine-patch graphics and how they work, please read parts of the image are scaled horizontally or vertically based indicators drawn within the image. </p>
the section about Nine-patch in the <p>For an introduction to NinePatch graphics and how they work, please read
<a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">2D Graphics</a> the section about NinePatch Drawables in the
<a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">Canvas and Drawables</a>
document.</p> document.</p>
<img src="{@docRoot}images/draw9patch-norm.png" style="float:right" alt="" height="300" width="341" <img src="{@docRoot}images/draw9patch-norm.png" style="float:right" alt="" height="300" width="341"
/> />
<p>Here's a quick guide to create a Nine-patch graphic using the Draw 9-patch tool. <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.</p> You'll need the PNG image with which you'd like to create a NinePatch image.</p>
<ol> <ol>
<li>From a terminal, launch the <code>draw9patch</code> application from your SDK <li>From a terminal, run the <code>draw9patch</code> command from your SDK
<code>/tools</code> directory. <code>sdk/tools</code> directory to launch the Draw 9-patch tool.
</li> </li>
<li>Drag your PNG image into the Draw 9-patch window <li>Drag your PNG image into the Draw 9-patch window
(or <strong>File</strong> > <strong>Open 9-patch...</strong> to locate the file). (or <strong>File</strong> > <strong>Open 9-patch...</strong> to locate the file).
Your workspace will now open. Your workspace will now open.
<p>The left pane is your drawing area, in which you can edit the lines for the <p>The left pane is your drawing area, in which you can edit the lines for the
stretchable patches and content area. The right stretchable patches and content area. The right
pane is the preview area, where you can preview your graphic when stretched.</p> pane is the preview area, where you can preview your graphic when stretched.</p>
</li> </li>
<li>Click within the 1-pixel perimeter to draw the lines that define the stretchable <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 patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase
previously drawn lines. previously drawn lines.
</li> </li>
<li>When done, select <strong>File</strong> > <strong>Save 9-patch...</strong> <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> <p>Your image will be saved with the <code>.9.png</code> file name.</p>
</li> </li>
</ol> </ol>
<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 <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. the stretchable patches and content area.
A previously saved 9-patch file (<code>*.9.png</code>) will be loaded as-is, A previously saved NinePatch file (<code>*.9.png</code>) will be loaded as-is,
with no drawing area added, because it already exists.</p> 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" <img src="{@docRoot}images/draw9patch-bad.png" style="float:right;clear:both" alt="" height="300" width="341"