Android 9patch ultra-detailed tutorial

This article is a must-have knowledge for Android Developers. The content is excerpted from the network and is not perfect but useful.

1. The problem of Adaptive Background and non-Distortion
  Making Adaptive Background images is a wide range of issues in UI development and also a problem that the interface designer is eager to solve. I believe we have a deep understanding of each other.
  For example, the background image of the list must be set, but the height of the list changes with the list of data items. The background of the title bar can be automatically filled with either the landscape screen or the portrait screen with high or low resolution, and no distortion.
  Based on past experience, we generally adopt the practice of cutting the graph first and then piecing it together. I would like to introduce this practice here. In fact, it is useful sometimes, but it will be difficult to say, so we will not mention this non-focus.
   Android has made a special. 9. PNG format to solve this problem.

2.9.png format.
  *. 9. PNG is in the standard PNG format. It only adds an additional 1px border in the outermost circle. This 1px border is used to define the scalable and static areas of the image. In particular, the cross section of the Left and top borders is the Extensible part, and the unselected part is the static area part. The cross section of the right and bottom (bottom and right) borders is the content section.
 
For example, "that is, on the mobile phone. No matter how the above image is enlarged, the rounded corners around it will not be enlarged! Only the left and top borders can be scaled!

In Android, images in the 9. PNG format have no background, and therefore can be stretched without distortion. For example, the system button is a typical example.
   In fact, both left and top, right and bottom divide the image into nine blocks (the four corners cannot be scaled, and the other four blocks can be scaled ), so it is called 9.png.

3.
Use draw9patch. jar to create a 9. PNG Image to define the stretch area.

  We have learned how to use the 9. PNG format. Below we use the draw9patch tool (which comes with adk) to create. 9. PNG images.
  
Step 1: Prepare the image to be stretched.

The default stretch is the overall stretch. In fact, we don't want to stretch the border part. Well, Let's define the stretch area by ourselves, as shown in

 

Click the filepath to export content.9.png.

Look at the results! It can be seen that the border is very clear. The comparison chart of. 9. PNG is not used on the bottom right, and it is not our result:

 

So far, we have basically made. 9. PNG images. For the comprehensiveness and depth of the knowledge system, we will continue.

4.Use draw9patch. jar to create the definition content area of the 9. PNG image.
  Do you think the text and margin of the above figure are too close? Well, we use the line of right and bottom to define the content area to increase the padding.

We define a very small content area, and other places will automatically act as borders, so that the padding is very large, such,
 

Haha! OK!

5. Advanced Techniques for creating. 9. PNG.
  For beginners of draw9patch, this is an advanced technique, that is:Stretch area, which can be non-consecutive, with more than one piece, and is proportional to the length of the custom border line.
  Description:

........