Draw 9-patch

Nine-patch

A NinePatchDrawable graphic is a stretchable bitmap
image, which Android will automatically resize to accommodate the contents of
the View in which you have placed it as the background. An example use of a
NinePatch is the backgrounds used by standard Android buttons — buttons must
stretch to accommodate strings of various lengths. A NinePatch drawable is a
standard PNG image that includes an extra 1-pixel-wide border. It must be saved
with the extension .9.png, and saved into the res/drawable/ directory of your
project. 
The
border is used to define the stretchable and static areas of the image. You
indicate a stretchable section by drawing one (or more) 1-pixel-wide black
line(s) in the left and top part of the border (the other border pixels should
be fully transparent or white). You can have as many stretchable sections as you
want: their relative size stays the same, so the largest sections always remain
the largest. 
You
can also define an optional drawable section of the image (effectively, the
padding lines) by drawing a line on the right and bottom lines. If a View object
sets the NinePatch as its background and then specifies the View’s text, it will
stretch itself so that all the text fits inside only the area designated by the
right and bottom lines (if included). If the padding lines are not included,
Android uses the left and top lines to define this drawable area. 
To clarify the difference between the different
lines, the left and top lines define which pixels of the image are allowed to be
replicated in order to stretch the image. The bottom and right lines define the
relative area within the image that the contents of the View are allowed to lie
within. 
Here
is a sample NinePatch file used to define a button: 
这里写图片描述 
This NinePatch defines one stretchable area with
the left and top lines and the drawable area with the bottom and right lines. In
the top image, the dotted grey lines identify the regions of the image that will
be replicated in order to stretch the image. The pink rectangle in the bottom
image identifies the region in which the contents of the View are allowed. If
the contents don’t fit in this region, then the image will be stretched so that
they do. 
The
Draw 9-patch tool offers an extremely handy way to create your NinePatch images,
using a WYSIWYG graphics editor. It even raises warnings if the region you’ve
defined for the stretchable area is at risk of producing drawing artifacts as a
result of the pixel replication. 
Example XML

Here’s some sample layout XML that demonstrates how to
add a NinePatch image to a couple of buttons. (The NinePatch image is saved
as
 res/drawable/my_button_background.9.png

<Button id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Biiiiiiig text!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

Note that the width and height are set to
“wrap_content” to make the button fit neatly around the text. 
Below are the two buttons rendered from the XML
and NinePatch image shown above. Notice how the width and height of the button
varies with the text, and the background image stretches to accommodate
it.

这里写图片描述

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇