Draw 9-patch
2016-03-01 23:20
393 查看
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"/>
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.
相关文章推荐
- 获取节点、父节点、兄弟节点
- 4.5.3 Go Android 下拉刷新的整理:SwipeRefreshLayout,android-Ultra-Pull-To-Refresh(ptr),PullToRefreshListView
- 第一篇blog
- POJ 1740 A New Stone Game(多堆博弈找规律)
- Linux驱动学习笔记(1)----模块
- 边看书边做边发挥-图书软件-1
- Java排序六:堆排序
- 紫书 p108 例题5-1
- Xcode 报错clang- error- linker command failed with exit code 1 (use -v to see invocation)总结
- 在 Mac 中开启自带的 Apache
- 老男孩28期运维张帅学习Linux决心书
- nginx命令:启动,停止及改变配置重启
- android docs 打开提速
- java菜鸟须知
- java httpclient 抓取网页 POST GET
- solr5.5配置IKAnalyzer分词器
- Mat简介 1
- HDU 2509 Be the Winner(取火柴博弈2)
- [转]理解$watch ,$apply 和 $digest --- 理解数据绑定过程
- 发送NOTIFY