Taking the custom sliding button as an example, text analysis Android custom view drawing

Custom view has always been a barrier in front of Android developers.

1、 Relationship between view and ViewGroup

From the relationship between view and ViewGroup, ViewGroup inherits view.

The subclasses of view are mostly functional controls that provide drawing styles, such as ImageView and textview. The subclasses of ViewGroup are mostly used to manage the size and location of controls, such as LinearLayout and relativelayout, as can be seen from the following figure

In practical application, they are also combinatorial relationships. In layout, we often nest multiple viewgroups or views in one ViewGroup, and the nested ViewGroup will nest multiple viewgroups or views

as follows

2、 Drawing process of view

From the view source code, there are three main methods:

1. Measure (): measure a final method to control the size of the control. 2. Layout (): the layout is used to control its own layout position. It is relative only to its own parent class layout and does not care about the ancestral layout. 3. Draw (): draw the display style used to control the control

Process: Measure -- > layout -- > Draw

The corresponding method we want to implement is

onMeasure()

onLayout()

onDraw()

In actual drawing, our thinking order is generally as follows:

Whether to control the size of the control -- > yes -- > onmeasure() (1) if the custom view is not a ViewGroup, the onmeasure() method calls setmeasuredefinition (width, height): to set its own size (2) if it is a ViewGroup, the onmeasure() method calls child. Measure() to measure the child's size and give the child's expected size value, and then -- > setmeasuredefinition (width, height) : used to set your own size

Whether to control the placement of controls -- > yes -- > onlayout()

Whether to control the appearance of the control -- > is the drawing of -- > ondraw() -- > canvas

Here is the flow chart I drew:

Next, take the custom slide button as an example to illustrate the drawing process of the custom view

We look forward to this effect:

Drag or click the button, the switch slides to the right and becomes

The switch can slide to the corresponding position with the touch of the finger until it is finally fixed in the switch position

Create a new class that inherits from view and implements its two construction methods

Add these two pictures to the drawable resource

Thus, we can use onmeasure () to determine the size of the control

This control does not need to control its placement. Skip onlayout();

Next, OnDraw () determines its shape.

However, we need to determine the shape according to the different behavior of the control we click, which requires rewriting ontouchevent ()

The logic is:

When pressed, the event motionevent.action is triggered_ Down, if the status is off at this time:

(1) If the finger touch point (obtained through event. Getx()) is on the right side of the center line of the button, the button will slide to the right for a certain distance (see the source code below for the difference between event. Getx() and half the width of the switch control)

(2) If the finger touch point is on the left side of the button center line, the button is still in the leftmost (i.e. "off" state).

If the status is on at this time:

(1) If the finger touch point is on the left side of the button center line, the button slides to the left for a distance

(2) If the finger touch point is on the right side of the button center line, the button is still in the rightmost state (i.e. "on")

When sliding, trigger the time motionevent.action_ Move, the logic is consistent with that when pressed

Note that ontouchevent() needs to set the return value to return true, otherwise it cannot respond to the sliding event

When the finger is retracted, if the center line of the switch is located on the left side of the center line of the whole control, the setting status is off, otherwise, it is on.

The specific source code is as follows: (an interface exposing the switch state is also provided)

Custom view section

DemoActivity：

Layout:

The above is the whole content of this article. I hope it will be helpful to your study.