Application of Android Dot 9 graph

In the development of Android UI design, we often use some icons, pictures to do the background and so on.

Believe that a lot of students will encounter a problem, that is, we let the artist do a picture, an icon, uh, looks pretty good, but put into the app, expand or shrink, in different resolutions of the phone, the display of the picture will be distorted, blurred. This is not an ideal interface.

Perhaps, we have a way to do is to do a few pictures. Android development students must have seen the project in the Res directory will have drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi these several folders, And there will be an icon for the same Android robot in each folder. So, what exactly are these folders for? Let's take a look at the picture.

LDPI corresponds to the resolution of the

MDPI corresponds to the 480x320 resolution,

。。。

That is, the file folder is placed in the corresponding resolution of the picture, the phone, Android will choose a more appropriate resolution of the image according to the current resolution, so that we know the ratio of each resolution slice, you can do a few different resolutions of the picture, placed in the corresponding folder, this may be able to avoid image deformation. This is not a sensible choice, and in some cases it is useless to write this method.

such as chat bubbles, its size is based on the length of the text depends on how much, you have to test each additional text length will change how much and then do the corresponding size of the background picture? That's impossible!

What about that? Don't worry, I'll teach you to use point 9 to solve these problems.

First, let's take a look at what is a point 9 chart?

Point 9 is an image that can be stretched and not distorted in an Android or iOS system,

Point 9 is to stretch some parts of the diagram, rather than the parts that do not want to be stretched, such as rounded corners.

Let me just take a chat bubble for example:

Let's take a look at a good general bubble background and display

The above is my bubble background, and the following two is the effect of transverse stretching and longitudinal stretching, it can be seen that this effect is very bad, not what we want, the background deformation, the text is not in the middle, although you can adjust the margin to make text center, but then I will teach you better ways to use, Also use Point 9 figure.

Now look at the effect of the background using the DOT 9 chart

It is obvious that this stretch is the effect we want, four corners are not deformed, and the text is displayed in the middle.

Here's a little bit about the principle of 9 graphs:

This is a point 9 graph, I divided into 1,2,3,4 four parts, of which 1 and 2 parts represent the position of the stretching, 3 and 4 parts represent the content display part

Draw four black edges according to your own needs (one will teach you to use tools), 1, 2 of the black edge of the range will be stretched, that is, the outside of the four fillet with the protruding triangle will not deform. This makes it possible to keep the picture from stretching without distortion.

Let's make a point 9 diagram, first find the SDK Tools directory under the Draw9patch.bat

Double-click Open

Then click on the file import at the top left to start with the image

The left side is the picture with the image, the right is the effect preview

Those black edges just move the mouse at the edge of the picture to the middle of the movement can be made out, as for that point, I am accustomed to stretch the area with a mouse click Can, of course, as you like can be stretched, like a picture above.

Click the Show content check box

You can preview the effect on the right, the gray area is the content display area, so that you do not have to adjust the margin so that the text center, a lot of convenience.

When done, then click on the file in the upper left corner, click Save 9-patch, saved as a PNG image, it will automatically add. 9 suffix, this suffix can not be deleted, delete it is not the same as ordinary pictures, (no, it should be said that more than ordinary pictures of four black edges.) This completes the production of point 9 graphs.

The next use in Android, with ordinary pictures, icons using the same method, although the suffix more. 9, but use is not added. 9.

For example: Chatbackground.9.png,

Only android:background= "@drawable/chatbackground" is required for use.

Here are some tips to share your development using Point 9:

1, as a developer, to understand the point 9 diagram of the implementation of the principle of UI development has a great help, will make development more smoothly.

For example, using a dot 9 chart to limit the area where content is displayed, we don't have to write more code to center the content in development.

2, in fact, point 9 is not just this cut method, there are other more complex cutting method, of course, it is the complexity of the picture, the effect of the implementation of the determined,

For example, a picture, we want to divide the display into two halves, we can divide a picture into two halves (such as), and then in the code together, it can achieve a good effect, this method two images of the content area to be the same size, stretching the area of the same range, otherwise it may cause asymmetric effect on both sides

3, with a point 9 diagram, we can reduce the size of resources as far as possible, reasonable transduction method can reduce the picture resources, there are some solid color background, we do not have to do so large, with a point 9 drawing can be, this can be for our installation package "thin body."

Finally, I think point 9 is not just developers should learn, art should learn, because the interface design is mainly rely on art, but the design to discuss with the developer, to see the various cut chart effect and display effect in Android can be achieved, whether complex, so as to improve the efficiency of development.

The above is a bit of experience in my development, there is a wrong place to hope that everyone to correct ^_^.

Application of Android Dot 9 graph