Android design in the. 9.png image

.9.png is a picture format that can define its own stretch of a specific area.

Pinterest: the. 9.png image in Android design

In the development of Android UI design, a very large number of controls need to be adapted to different phone resolutions for stretching or compressing, so there is a kind of image format that can be arbitrarily resized ". 9.png". Such images are a special image format for Android development that can specify specific areas for stretching without losing the truth. You can specify the display area of the foreground content at the same time. That is, the usefulness of the 9.png image can be summed up in the following two points:
-. 9.png pictures When the picture is stretched, the image will not distort in a particular area.
-The 9.png image can be used as a background map to specify the content display area;

I.. 9.png picture compared with normal picture

imagemogr2/auto-orient/strip%7cimageview2/2/w/1240 "alt=" compare.jpg "title=" ">

Through the above control, we can find that. 9.png there will be a black line around the picture, what is the effect of these black lines? Is the display area that specifies the stretch area or foreground content of our background.

imagemogr2/auto-orient/strip%7cimageview2/2/w/1240 "alt=" Png9.png "title=" ">
-Left black line: Vertical stretch area, must be drawn, control the longitudinal stretching, such as the first small image on the right side.

-Upper black line: Transverse stretching area, must be drawn. Controls horizontal stretching, such as the second small image on the right side.
-Right black line: optional, vertical content display area
-Black line below: Optional. Landscape Content Display Area

Through the introduction above. We know what is the use of black lines on the four sides of the 9.png. Then we will introduce the definition of the stretching area.

Stretch area

imagemogr2/auto-orient/strip%7cimageview2/2/w/1240 "alt=" Stretch area. png "title=" ">

• Red Box area: Represents the longitudinal stretch area, which stretches only the red area when the background picture of the control needs to be stretched vertically, and the other areas do not stretch.
• Green Box Area: Represents the transverse stretch area. When the background picture of the control needs to be stretched horizontally. It only stretches the green area, and the other areas do not stretch.

• Red and green areas: The area is stretched both horizontally and vertically.

Foreground content display Area

imagemogr2/auto-orient/strip%7cimageview2/2/w/1240 "title=" >

• Red Box Area: Specifies the area for horizontal text display. Limits the bounds to which text can be displayed around.
• Blue Box Area: Specifies a fetch for portrait text display. Limits the bounds at which text can be displayed up or down.

Second, the production of 9.png pictures

Such a powerful picture, in our Android development in the adaptation link. Played a very big role. So how do you make such a. 9.png picture? The Draw9patch.bat tool is provided in the Android tool to make the. 9 file. The tool folder is in \android-sdk-windows\tools\draw9patch.bat.
We directly open the Draw9path.bat binary program and import the images we need to make. Then press and hold the left mouse button to draw the black edge. Suppose the picture is wrong. Drag to cancel by shift+ the left mouse button.

Three, simple experience

First, we have a simple layout file to see how the normal picture works.

<?
XML version= "1.0" encoding= "Utf-8"?><relativelayout  xmlns: Android  = "http://schemas.android.com/apk/res/android"  xmlns:tools  =" Http://schemas.android.com/tools " android:id  = "@+id/activity_main"  android:layout_width  =" match_parent " android:layout_height  = "match_parent"  tools:context  = "dsw.iflytek.com.pngdemo.MainActivity" ;  <TextViewandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" android:background= "@mipmap/back"android:layout_centerinparent="true"  Android:text="Hello world!" /> </relativelayout>

The above is not self-adapting. Both sides of the border have been embedded in the text. So we have to make the following changes to the image:

imagemogr2/auto-orient/strip%7cimageview2/2/w/1240 "alt=" for stretch processing. 9 resources. png "title=" ">

In our handling. Keep the background adaptive by adding longitudinal and transverse stretches to the picture.

Here we need to pay attention to the specified stretch area. We need to understand carefully.

imagemogr2/auto-orient/strip%7cimageview2/2/w/1240 "alt=" multi-line display effect. png "title=" >

In the above we have a certain understanding of the transverse stretching area.

Here's a look at the content stretch area:

imagemogr2/auto-orient/strip%7cimageview2/2/w/1240 "alt=" vertical display area. png "title=" ">

In the. 9 diagram above. Let's look at the entire right-hand line as a vertical area of content:

We can see that the content of the display is tightly filled up and down between.

No clearance.

Take a look at:

By the above control. We can see that the right side is controlling the pattern of the display area of the content view.

The same bottom is the same. In the process of development. Reasonable use of the. 9.png file can optimize our resource files and reduce the size of the APK package.

can also perform very good adaptation effects.

Android design in the. 9.png image