Android. 9 Figure explanation

Part I: Let's take a look at the experience of Androchetu predecessors:

1. Consider adapting Android to a variety of complex resolutions, such as the mainstream 1280x720, 800X480, 640x480,480x320, and various non-mainstream resolutions.
2,. 9 Artifact

3, Png24+jpg

4, interactive control as far as possible than the minimum operating size: Android specification is 48DP
5, the visual elements in the picture as far as possible in the file center, easy to align and label
6, can use the code to achieve as far as possible to avoid using diagrams, such as monochrome color values, gradients, text, split lines, etc.
7, consider the universality of the control.

Part II: Stand on the developer's point of view to carry out Androchetu

Before Androchetu, the APPUI designer must communicate with the Android programmer as necessary. Find a convenient Androchetu rule. When we can not use the. 9png tool transduction, try not to use it. Because "point nine" of the production tool for "draw9patch" used to be more cumbersome. Beginners may not be able to cut well.

So, we try to understand the. 9png principle, after the PS inside directly cut on the line. Then cut a page directly to the programmer implementation. If the programmer sets transduction, find out the wrong place also has the timely feedback to you, or the app designer to consult in time.

app design element cut diagram example diagram:

In the process of transduction, you will find different scenarios, always think about the results you want, through the careful treatment of this area, you can better for the content of the image to do the layout. So the development of students as long as through some simple property settings, you can achieve the precise layout. At the same time, reduce unnecessary development, streamline code, improve product performance, make up a few, give users a better experience feel.

The third part: The app designer should learn to think, choose the better Androchetu way

This can only be concrete case specific analysis. Do it more!

Here are 3 points of the Android app transduction specification for Android.

Reduce the size of the resource as much as possible, reduce the size of the resource as much as possible, and slim down the product installation package.

1. "Point Nine" image stretching 1 pixels and stretching 10 pixel effect is no difference, so as far as possible to reduce the size of the picture.

2. When we encounter textured backgrounds or textured buttons, the principle of the tangent chart is: to find the rules of the texture, with the smallest transduction to tile, you can imagine the principle of the superposition of patterns.

3, the appropriate compression picture quality, in monochrome or not too much effect can be stored as PNG8 bit or index mode.

Part IV: Androchetu Advanced section (. 9png production tutorial)

1, download the installation tool : Draw9patch.zip The tool SDK comes with.

First you need to install Java in the system's default directory for your computer. Do not install Java classmate can search in Baidu: jdk-6u20-windows-i586, installation package size of about 80M. Draw9patch

Then, using the Andriod simulator-android-sdk-windows, open the "Draw9patch.bat" file in the Sdk/tools directory, and the loading window appears:

2. Import and edit

Drag the PNG picture into the window. For example, automatically enter the editing interface. The content and function notes for each area are described in the figure.

The view on the right side of the preview finds that the edge of the picture is in normal stretch state.

3. Now we click the left button on the edge of the picture to draw a black line, that is, the part that the picture needs to be stretched. For example, 4 black lines are commented.

If the error is a multi-painted part, you can press and hold the SHIFT key while clicking the left mouse button to erase.

4, see, three kinds of tensile results have been perfect display, has achieved the tensile effect we want, if this is a display text form, then the text display area, the program will also be controlled in the black line corresponding range.

Explanation: The area covered by the black bar position 1th indicates that the area is stretched only when the picture is stretched horizontally
Number 2nd black bar position to the right covers the area when the picture is stretched vertically.
Number 3rd black bar position to the left covers the area where the picture is displayed vertically
Number 4th black bar position up-covered area indicates the area where the picture is displayed horizontally
Where there is no black bar, the area covered is the same as when the picture is stretched (for example, if the corners of the picture are curved, the arcs in the corners do not change when the picture is stretched arbitrarily)
5, if the error is more select part, you can hold down the SHIFT key, click the left mouse button to remove the black bar

6, right 3 black graphics area to show the current stretch effect

7, select a good area, click on the left file-"save 9-path, save the picture, suffix named Xxx.9.png."

8, explanation: we can see the picture around more than 4 black bars, do not worry about this picture is not available, this is the original 9.png picture, when we proceed to the next step, the picture becomes normal.

More detailed ways to click: http://blog.csdn.net/pugongying1988/article/details/6938972

Android. 9 Figure explanation