17_android_. Creation and use of 9.PNG images

. 9.png Introduction Instructions

The. 9.PNG is a special kind of image in Android development, this format picture is generated by ADT's own editing tools, using nine Gongce method, so that the image supports the adaptive display in the Android environment.

1. allows developers to define scalable areas where the content of the expandable area is extended when the image needs to be stretched to fill larger areas than the picture itself

2. allows developers to define the content display area for displaying text or other content

In a word:. 9.PNG is a useful PNG image format that can be scaled with text size in a specific area.

. 9.png Production Introduction

The. 9.png image can be made using the Draw9patch tool that comes with Android, which is in the tools directory of the SDK installation path.

1. Open the Command Window

2. Go to the tools directory in the SDK installation path

3. Execute Draw9patch command

Note: You can also directly double-click the Draw9patch under the Tools directory

4. Wait for the interface that will open the Draw9patch operation as follows:

5. Select File->open 9-patch.

6. Select the pictures you want to work with

7. Click to open (0)

Tool operating Instructions:

1. add a red border for four weeks in the Gongge area, which may produce artificial traces when the image is extended. If you eliminate all bad Gongge, visual consistency of the extended view will be maintained

2. The area is the imported picture, as well as the operable area

3. field here from top to bottom, in order: Effect preview for portrait stretching, preview of effect for transverse stretching, and preview of effect of the overall stretch

Other:

Zoom: The bar is the import of the map to zoom out operation, where the magnification is only to allow users to operate easily;

Patch Scale is a preview operation after stretching of three shapes in the (3) area, and you can see the effect after the picture is stretched after the operation

Show Lock: Displays non-editable regions when the mouse is in the picture area

Show patches: In the editing area (2) the area where the picture is stretched (marked with pink)

Show content: Displays the contents area of the picture in the preview area (3) (marked with light purple )

8 Production Instructions

As shown, the black line on the left side of the editing area (2) represents the area where the picture is stretched vertically, the black line on the top represents the horizontal stretch area, the black line on the right represents the vertical area where the content is drawn, the black line below represents the horizontal area where the content is drawn, the right and bottom lines are optional, The left and top lines cannot be omitted (otherwise no effect is made).

Note: During the production process, drag the horizontal and vertical lines to set the horizontal and vertical stretches of the area (move the mouse over the picture area to see the solid thin line).

9. Save the created picture

9.1 Views File->save 9-patch

9.2 Select the saved path and set the saved file name

Click the Save button

. Use of 9.png

The image is introduced in the res/drawable corresponding resolution in the Android project, for example:

Use this icon in the res/layout layout file: For example, in Activity_main.xml, use the icon by android:background= "@drawable/send"

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Tools:context = "${relativepackage}.${activityclass}" > <textview android:id= "@+id/tv1" android:layout_width= "wrap _content "android:layout_height=" wrap_content "android:background=" @drawable/send "android:textsize=" 30sp "android:text=" Hello "/> <textview android:layout_margintop=" 20DP "Android: Id= "@+id/tv2" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:backgr ound= "@drawable/send" android:layout_below= "@+id/tv1" android:textsize= "12SP" android:text= "Study har D, make progress every day! "/> <textview android:layout_margintop=" 40DP "Android: Id= "@+id/tv3" android:layout_width= "WRAp_content "android:layout_height=" wrap_content "android:background=" @drawable/send "android:textsize = "70SP" android:layout_below= "@+id/tv2" android:text= "Hello chj"/></relativelayout>

Run the project to observe the following results:

17_android_. Creation and use of 9.PNG images