Android development Getting Started Guide-Android mobile self-adaptive draw9patch without distortion background setting steps, Getting Started Guide draw9patch

Android development Getting Started Guide-Android mobile self-adaptive draw9patch without distortion background setting steps, Getting Started Guide draw9patch

1. [Android mobile self-adaptive draw9patch without distortion background] actual problems

Some time ago, I went to the Yangtze river for a tour and took a lot of photos, but all of them were taken on mobile phones. The normal size was not clear about my wife's face, so I began to zoom in and put it up, however, the image is distorted to some extent. I wonder if you have ever met such a situation? In fact, as a program developer, I know that the background of the Self-Adaptive draw9patch on this mobile phone is not very good. Today I may wish to solve the actual problem for you.

First of all, the problem of Adaptive Background and non-distortion has already been brought together for example. I hope you will observe it in your life. If you encounter any Android app problems, you can add the QQ group: 175229978 for communication. Making an adaptive background image is a wide problem in UI development. For example, the background image of the List is fixed, but the height of the list changes with the List data items. The background of the title bar, whether landscape screen or landscape screen, high resolution or low resolution, can be automatically filled with full and non-distorted background issues.

In response to this situation, the Android R & D department of Tanzhou specially developed a set of convenient Methods ---. 9. PNG format to solve this problem.The definition of PNG format is not discussed here. However. 9. PNG is indeed a standard PNG format, but an additional 1px border is added in the outermost circle. This 1px border is used to define the scalable and static areas of the image. In particular, the cross part of the left and top borders is the Extensible part, and the unselected part is the static area part. The cross part of the right and bottom borders is the content part (in disguise, it is equivalent to defining an padding, which is similar to the padding function, which will be introduced separately later). This parameter is optional.

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.

 

2. [detailed steps for setting the background of Android mobile self-adaptive draw9patch without distortion] key knowledge:

9. PNG format. Below we use the Draw9Patch provided by Google (run the Draw9Patch under the android-sdk-windows \ tools directory. bat. 9. PNG image.
1: Prepare the image to be stretched.
A very small image. I want to fill in the content of the article in the middle of the background.
2: Create a. 9. PNG image.
Open Draw9Patch and drag the image into it, as shown below:

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, for example:

Click the filepath to export content.9.png.
3: Use the. 9. PNG Image in the layout file.
Create a project Draw9Patch. The default main Activity is Draw9PatchActivity. java:

?

123456

@ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main );}

Copy the content.9.png file to the/res/drawable folder and Open main. xml in the/res/layout directory. The declaration is as follows:

?

12345678910111213141516

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: orientation = "vertical" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: background = "#777" android: padding = "8dip"> <TextViewandroid: layout_width = "fill_parent" android: layout_height = "wrap_content" android: text = "Body: A NinePatchDrawable graphic is a stretchable bitmap image. "android: background =" @ drawable/content "android: textColor =" #000 "/> </LinearLayout>

,

We modify text,

?

12345678910111213141516

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: orientation = "vertical" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: background = "#777" android: padding = "8dip"> <TextViewandroid: layout_width = "fill_parent" android: layout_height = "wrap_content" android: text = "Body: A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. A NinePatch drawable is a standard PNG image that includes des an extra 1-pixel-wide border. "android: background =" @ drawable/content "android: textColor =" #000 "/> </LinearLayout>

,

It can be seen that the border is very clear. The comparison graph of. 9. PNG is not used, and it is not the effect we want:

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 are too close? Well, we use the line of right and bottom to define the content area to increase the padding.

We have defined a very small content area, and other places will automatically act as borders, so that the inner margin is very large. At first, in order to increase the inner margin, it is easy to think about inertia, declare android: padding = "10dip" in <TextView>. I advise my friends not to do this. First, you will not be able to predict your display, second, this is obfuscation, because the content area is to determine the padding. (Setting padding through content area is more elegant and concise than defining padding in layout xml !)

5. Advanced Techniques for creating. 9. PNG.
For beginners of Draw9Patch, this is an advanced technique, that is: stretch the area, can be not consecutive, can be more than one, and is proportional to the length of the custom border line.
Description:

6. how to process the 9. PNG Image in the SDK.
SDK specifically for 9. PNG has been defined and processed. Here we just make a simple process analysis. When Bitmap reads the image stream data, it will determine the NinePatchChunk (9Patch data block) of the image ), if NinePatchChunk is not empty, it is NinePatchDrawable, and NinePatchDrawable will be handed over to NinePatch for processing:

?

123	SetNinePatchState (new NinePatchState (new NinePatch (bitmap, bitmap. getNinePatchChunk (), "XML 9-patch"), padding, dither), r );

If the NinePatch check succeeds, the local method is called to draw the final image:

?

123	NativeDraw (canvas. mNativeCanvas, location, mBitmap. ni (), mChunk, paint! = Null? Paint. mNativePaint: 0, canvas. mDensity, mBitmap. mDensity );

7. A large number of 9. PNG images are applied in the android system.
You can find the framework_res.apk in a large number of 9. PNG files, which are widely used. For example, common examples include:
Button:
Unlock:
Drop-down box:
Title bar:
Toast:
There are also search, keyboard, zoom-in and zoom-in controls, time addition and subtraction, and so on. I will not list them one by one.

8. In the last few cases, I hope you will not be familiar with it in the future:
The drop-down button, article header background, and system header background are all used. In fact, Android development is a good thing and we often see it, you can also brag when looking for a girlfriend, haha...

In fact, there are many cases similar to this in the introduction to Tanzhou Android development. I hope you can join the study and learn more from the QQ group: 175229978 download.