Android canvas and drawing-canvas and drawables (5)

Nine-patch

Ninepatchdrawable is an extensible bitmap image. The Android system automatically adjusts the background image based on the content of the view object. An example of using ninepatch is the background image of the standard Android button-The button must be stretched based on the length of the string. The ninepathc graph draws a standard PNG image that contains a pixel-wide border. The extension name of the image file is .9.png and must be saved to the res/drawable/directory of the project.

The border is used to define the stretch and static areas of an image. Draw one or more black lines with 1 pixel width on the left and top of the border (the pixels of other borders should be transparent or white) to specify an area that can be stretched. You can have multiple areas that can be stretched, but their relative sizes are the same. The largest area must always be the largest area.

You can also define an optional draw area (valid Fill Line) for an image by drawing the right and bottom lines ). If a view object sets a ninepatch image as its background and specifies text for the view object, it will stretch itself, so that all text can be filled in the internal area designed by the right and bottom sides (if included), if not, the Android system uses the left and top lines to define the painting area.

To clarify the differences between different edges, to stretch an image, pixels of the image defined on the left and top are allowed to be copied. The bottom line and the right line define the relative area of the image. The content of the view object is allowed to be placed in this area.

Is a ninepatch image file used to define buttons:

The ninepatch image defines a stretch area with the left and top lines, and defines a plotting area with the right and bottom lines. In order to stretch the image, in the above image, the gray dashes specify the area where the image will be repeated. In the image below, the pink rectangle specifies the area where the view content is allowed to be placed. If the content of the view object is completely filled in different regions, the image will be stretched until the content is fully filled.

The draw 9-patch tool uses the WYSIWYG graphic editor to conveniently create ninepatch images. If a defined stretch area has the risk of copying pixels during component drawing, it may even generate a warning.

Example XML

This layout XML demonstrates how to add a ninepatch image to a pair of buttons (ninepatch images are saved in RES/drawable/my_button_background.9.png ):

<Buttonid = "@ + 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"/>

<Buttonid = "@ + 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 attributes are set to "wrap_content" so that the buttons can be adjusted based on the text size.

The following two buttons are displayed using the image and XML definition shown above. Note that how the width and height of the button stretch the background image based on the size of the text.