[Android design things] 9-patch applications

In the previous blog, we talked about the problem of device size, resolution, and software version fragmentation when designing Android applications, this article introduces how to create multiple sets of resources (ldpi, mdpi, hdpi, and xhdpi) and how to layout them. Today, let's talk about 9-patch, which is also used to help us solve this problem.

 

First, let's take a look at the functions of the 9-patch. The bubble box is very common in map applications. The bubble box on the left has only two Chinese characters, and the right has eight Chinese characters. Both bubble boxes have four rounded corners, there is a sharp angle below, and the bubble box on the right is stretched out from the left.

 

How is Android stretched? If it is directly stretched, the rounded corner and the sharp corner will be stretched, so it looks not very beautiful. Here we need to apply 9-patch to control the stretch area. 9-patch: It can stretch the area except the tip and rounded corner of the bubble box, stretch the same length between left and right, and control the area where the text appears in the bubble box.

 

9-patch is actually a special png Format Image, draw a black line with pixel width on the top and right of the image to mark the stretch area (other pixels on the edge line are white or transparent ). If you also need to mark the area where the text is displayed in the image, draw a black line on the left and bottom of the image. See.

A 9-patch can specify multiple stretch areas. After the created 9-patch file is named correctly, it can be effective in a specific folder. The internal rendering mechanism of Android will be reasonably stretched according to the labels in the 9-patch image according to different situations.

 

9-patch can be applied to many places, such as the background of the application. If 9-patch is used, you only need to draw one pixel, which can reduce the size of image resources. In addition, if you want to automatically stretch a button or text box based on the screen resolution (for example, an application running on a mobile phone with a resolution of 800x480, some images may need to be stretched on 854 × 480), so it is very convenient to use 9-patch. Even some simple images can be made into 9-patch files, such as "+ ". 9-patch should be used whenever possible during application design, which not only reduces the application size, enhances the application adaptation capability, and improves the application performance, it can also reduce the workload of plotting to a certain extent.