Recently it is too busy, but approaching the New Year, I still adhere to the calm mood, although the technology blog is now few people see, brainwashing chicken soup text is always so cute, I believe that there are still a part of the same as brother yu, stick to the first post, today the technology continues to wanqi!

preface

The previous sections discussed some common methods for screen sizing. In addition to weight and relative layout, we should also learn how to automatically pull and shrink images.9

What 4.9. PNG image

A.9. PNG image is itself a. PNG image, but it ends with a.9 file name. We can convert a.png image into a.9. PNG image. The.9.

In fact, the production of.9 is to add 1px boundary on the original picture, and then set the corresponding position as black line according to our requirements, and the system will stretch according to our actual requirements.

Why use.9 pictures

Supporting a variety of screen sizes usually means that image resources must also be able to accommodate a variety of sizes. For example, whatever shape a button is to be applied to, the button background must be adaptable.

If you use a simple image on a component that can be resized, you will quickly find that the display is somewhat less than ideal because the system will stretch or contract your image evenly at run time. The solution is to use an autostretch bitmap, a specially formatted PNG file that specifies the areas that can and cannot be stretched.

For example

The figure below is an explanation of the four sides of figure.9. The top left represents the stretch area, and the bottom right represents the paddingbox, which is the spacing area. In the following, we give an example for your understanding.

.9 Patch Usage syntax rule

1. The black line or point above represents the longitudinal stretchable area, usually one point

2. The black line or dot on the left represents the area that can be stretched horizontally

3. The area below where the content is placed vertically is usually a black line

4. The area on the right that represents horizontal filling is usually a black line

The top left represents the stretch area and the bottom right represents the paddingbox

Use the Draw9patch tool to open an image and show the display effect when it is zoomed in width, height and width at the same time without any stretching process, as shown in Figure 1:

1. No processing

2, to make the high stretch, we now dot the top half of the left border arrow

3. Stretch to specify the height of part of the area

4. Horizontal. All attributes stretch

tool

1. If Eclipse is used, the Draw9patch file can be found in the SDK under the Tools folder

2. If you are using AndroidStudio, you can directly rename it and double-click to enter the editing interface to make patch

For more

An introduction to screen Fit Sizes

What are DP, DIP, SP and PX and their relationship ii?

Key points for different sizes of screens

For programmers, did you fall for these tips

NDK project actual combat – high imitation 360 mobile phone assistant uninstall monitoring

Interview Questions for 2017 (Android)

Believe in yourself, there is nothing impossible, only unexpected

Wechat official account: Terminal R&D Department