Example tutorial of customizing view in Android App

1、 Many basic Android entry programs may be afraid of Android custom view, but this is the only way for experts to advance. All are ready to spend some time and write more articles on custom view. First, summarize the steps of customizing the view: 1. Customize the view properties 2. Obtain our customized properties in the view construction method 3. Rewrite onmesure 4. Rewrite OnDraw. I marked 3 with [], so 3 is not necessarily necessary. Of course, it still needs to be rewritten in most cases.

1. To customize the view attributes, first create an attrs.xml under RES / values / to define our attributes and declare our entire style.

We define three attributes: font, font color and font size. Format is the value. The value types of this attribute are: string, color, dimension, integer, enum, reference, float, Boolean, fraction and flag; If you don't know, you can Google. Then declare our custom view in the layout

Be sure to introduce xmlns: custom=“ http://schemas.android.com/apk/res/com.example.customview01 "Our namespace, and the package path behind it refers to the package of the project

2. In the view construction method, get our custom style

We have rewritten three construction methods. The default layout file calls the construction method of two parameters, so remember to let all constructions call our construction of three parameters, and we get custom properties in the construction of three parameters. 3. We rewrite OnDraw and onmesure to call the system provided:

The effect is:

Do you think it's pretty good? You've basically implemented a custom view. But at this time, if we write the width and height of the layout file as wrap_ Content, we will find that the effect is not what we expected:

The height and width measured by the system are match_ Parnet, when we set a clear width and height, the measurement result of the system is the result we set when we set wrap_ Content, or match_ Match is the measurement result of parent system_ Length of parent. So, when wrap is set_ During content, we need to measure by ourselves, that is, rewrite the onmeasure method ": before rewriting, we need to understand the specmode of measurespec. There are three types: actual: it usually sets a clear value or match_ PARENT AT_ Most: indicates that the sub layout is limited to a maximum value, usually warp_ Content unspecified: indicates that the sub layout can be as large as it wants. It is rarely used. Here is the code we rewrite onmeasure:

Now let's modify the following layout file:

The effect now is:

Completely compound our expectations. Now we can set the height and width casually, which can basically meet our needs. Of course, in this way, our custom view has no advantages over textview. Therefore, we think that adding an event to the custom view: adding:

Let's run again:

We added a click event to randomly generate a 4-bit random number each time. If you are interested, you can add a little noise in OnDraw and rewrite it into a verification code. Does it feel good.

Advanced

A basic example of custom view has been introduced earlier. Here is a slightly more complex example. The custom view displays a picture. The following contains the text introduction of the picture, similar to the photo introduction, but it's not important. It's mainly to learn the usage of the custom view. Get to the point directly: 1. In RES / values / attr.xml

2. Get our custom properties in the construct:

3. Override onmeasure

4. Override OnDraw

Code, combined with comments and the use of the basic part of view, should be able to understand, do not understand the message. Let's introduce our custom view:

I deliberately let the display show three situations: 1. The width of the font is larger than the picture, and the view width is set to wrap_ Content 2. Set the view width to the exact value, and the length of the font is greater than this width. 3. The width of the picture is greater than the font, and the view width is set to wrap_ Content to see the display effect:

Well, the results are good for these three cases.