Android: Making Nine-patch pictures

It is a specially processed PNG image that can specify which areas can be stretched and which areas are not.

So what is the actual effect of the Nine-patch picture? Let's take a look at it with an example. For example, there is a picture of a bubble pattern in the project Message_left.png, 3.38.

Figure 3.38

We set this image to a linearlayout background image and modify the code in the Activity_main.xml as follows:

<relativelayout xmlns:android= " HT tp://schemas.android.com/apk/res/android "android:layout_width=" match_parent "android:layout_height=" match_parent ">

<linearlayout android:layout_width= "match_parent" android:layout_height= "wrap_content" android:background= "@ Drawable/message_left ">

</LinearLayout>

</RelativeLayout>

Specify the width of the linearlayout as Match_parent, then set its background to Message_left, and now run the program, as shown in effect 3.39.

As you can see, because the width of the message_left is not enough to fill the width of the entire screen, the entire picture is stretched evenly! This effect is very poor, the user is certainly not tolerated, then we can use the Nine-patch image to improve. In the Android SDK directory there is a tools folder, in this folder to find the Draw9patch.bat file, we use it to make nine-patch pictures. After double tapping, click File→open 9-patch in the navigation bar to load the message_left.png, as shown in 3.40.

Figure 3.40

We can draw a small black dot in the four borders of the picture, and the portion drawn on the top and left borders represents the area where the black mark is stretched when the picture needs to be stretched, and the portion drawn in the bottom and right boxes represents the area where the content will be placed. After the drawing is finished, effect 3.41 is shown.

Figure 3.41

Finally click on the navigation bar File→save 9-patch the picture to save, at this time the filename is message_left.9.png. Use this image to replace the previous message_left.png image and rerun the program, as shown in effect 3.42.

So when the picture needs to be stretched, it can only stretch the specified area, the program is also a great improvement in appearance .

Android: Making Nine-patch pictures