Android custom view implementation switch button

Preface: Android custom view is very frightening for programmers who have just started and even worked for several years, but it is also the only way for Android advanced learning. Usually, there are some harsh requirements in projects. We can find all kinds of effects on GitHub. We can use it if we can use it. We can't change it with our own efforts. However, with the work experience and nature of the work, more and more people feel that it is time to study the custom view.

1、 After these two days of efforts, I also tried to write a demo. The effect is very simple, that is, the realization of the switch button.

Some people may say that the effect is so easy. You can cut three pictures from the UI. Why bother to customize it. You're right, but this is just for learning custom view to show such a common case.

Custom control

1. Why customize the view?

Android's own controls can't meet the needs. You need to define controls according to your own needs

2. Android interface drawing process?

Onmeasure() -- onlayout() -- ondraw() methods are executed after the onresume() method of the activity lifecycle.

3. How does Android customize the view?

Integrated view: view process

Onmeasure() (specify your own width and height in this method) - > ondraw() (draw your own content)

Integrated ViewGroup: ViewGroup process

Onmeasure() (specify your own width and height, and the width and height of all sub views) - > onlayout() (place all sub views) - > ondraw() (draw content)

Steps to customize the switch button of view:

Write a class to inherit view,

Copy the full path containing the package name into XML,

Find the control in the interface and set the initial information,

Draw the interface content according to the requirements,

In response to the user's touch event,

Create a status update listener

1. Customize toggleview, integrate view, and reconstruct three construction methods.

Note: why should the constructor override three?

The construction method of a parameter of toggleview (context) is called when the code creates the control

Toggleview (context, attributeset, attrs) is used in XML and can specify custom attributes

Toggleview (context, attributeset, attrs, int defstyle) is used in XML to specify custom attributes. If a style is specified, this constructor is used

We define the background picture, switch button picture and switch default state in XML. To obtain the attributes defined in XML file, we use typedarray class in the constructor containing three parameters.

At attrs XML declaration node declare styleable

2. After customizing the toggleview and integrating the view, don't forget to add the namespace in the XML file

Then paste the full path of the custom view into the XML, which is similar to the viewpager control under the Android V4 package

The following is the XML file code in the demo:

Set switch background picture

Set switch button picture

Set switch default state

3. Find the control in the interface and set the initial information

Find a custom view control in the activity through the findviewbyid method, which is no different from the component operation of the system.

4. Draw the interface content according to the requirements

The width and height of the view have been set through the onmeasure () method. The following operations to start painting are all carried out in the OnDraw () method. The canvas parameters in the OnDraw (canvas) method: canvas and sketchpad The contents drawn above will be displayed on the interface

When the switch is on, the position of the switch button in the switch background is calculated:

slideButtonBitmap. getWidth(); Width of background - the width of the button is the position point on the X axis where the current switch button is located

When the switch is closed, the position point on the X axis where the current switch button is located = 0

5. Respond to user touch events

After completing the above three steps, you will find that the Boolean value of XML initialization default switch state will change only after entering for the first time. After that, clicking will have no effect. At this time, we have to find a way to monitor gesture events and rewrite the ontouchevent (motionevent event) method. I believe most friends are not unfamiliar with this method.

Motionevent has three states:

MotionEvent. ACTION_ Down: / / press motionevent on the screen ACTION_ Move: / / move motionevent on the screen with your finger ACTION_ Up / / leave the screen

The current issues to be considered are:

When the finger presses the screen, motionevent ACTION_ The x-axis position of the down (in the current switch background view) switch should be moved to the position pressed by the finger;

When the finger moves motionevent on the screen ACTION_ Move (in the current switch background view) the X axis of the switch button should change with the position of the finger;

When the finger leaves the screen, motionevent ACTION_ The up (in the current switch background view) switch button should judge whether the position where the finger leaves is half of the current background. If the x-axis position is greater than 1 / 2 of the view background width, it should be in the open state. If the x-axis position is less than 1 / 2 of the view background width, it should be in the closed state.

As shown in the figure:

be careful:

Monitor ontouchevent (motionevent) above

There is still a problem after the event) method. I wonder if you have found that we have not set the boundary value of the switch button. What does it mean? When the finger slides, the left and right can draw outside the current background.

Therefore, the x-axis positions on the left and right sides need to be processed here:

6. Create a status update listener

Basically, the work has been completed. In this way, our custom view has been completed. After you complete this effect, you may find that it is a little similar to Check@R_819_2419 @。 Since it is similar to Check@R_819_2419 @, we know when Check@R_819_2419 @There will be ischecked () method to obtain the selected status when clicking select and uncheck. Therefore, this function must be included in our user-defined switch button. Otherwise, we only have effect display on the interface, but there is no place for logical processing.

The code is very simple. Write an interface, and then define a callback method to return to the switch state. It should be noted that when the finger leaves the screen, we need to judge whether the switch state has been changed in this operation. If there is no change, we will not operate. If the previous state is different, we will notify the activity of the state change!

The callback in the activity is also very simple, similar to the setonclicklistener callback interface provided by the Android system. Previously, the system defined listening interface has been used. This time, we can also write a callback interface for our own view through a simple custom view. Do you think it's a very happy thing?

The above is the switch button of Android custom view introduced by Xiaobian. I hope it will help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!