Simulated QQ message drag and drop deletion effect of Android custom view

The realization of this simulation function mainly depends on path and second-order Bessel curve. First, let's take a brief look at the previous figure:

This simulation function has the following characteristics:

After introducing so much, friends who have read my previous article should have a basic idea.

Exposed interface

This simulation function is divided into three parts: one is the small circle, fixed position, the other is the big circle, which can be moved, and the other part is the connecting part in the middle, which will extend with the big circle.

First, let's see which interfaces can be called:

The first setminr is to set the radius of the small circle, the second setmaxr is to set the radius of the large circle, and the third setbrokedeistance is to set the disconnection distance, that is, the maximum connection distance between the centers of the small circle and the large circle.

initialization

Take a brief look at the initialization method.

In fact, there is only one brush. You can set the brush for each area.

Drawing graphics

These three methods are relatively simple. Draworiginalcircle is to draw a small circle in the center, and then canbreak is a switch to control whether to draw a moving circle and draw an arc.

Note that MOVEX, movey and path all change, so don't forget to invalidate after their values change.

Path connection

There are a lot of articles about path on the Internet.

The difficulty here is mainly the connection between large circles and small circles. Simply show it with a diagram:

It's basically like this. The path of path is a black funnel like thing. The angle to be calculated here needs to use the trigonometric function relationship, which is briefly expressed as follows:

The two angles marked in the figure are equal

Find this angle (offsetx is the coordinate of moving the center of the circle).

In this way, the coordinates of the four points can be calculated.

Notice the meaning of the four parameters of quadto. The first two are the coordinates of your anchor point, and the last two are the coordinates of the position you want to move to that point.

Touch event

This idea is implemented directly on the code. There's nothing to say.

Here we mainly explain the setcanbreak:

This indicates whether the maximum moving distance is exceeded. If it is exceeded, it returns true, and if it is not exceeded, it returns false. At the same time, it is also used in the setting of toucharea, mainly to judge whether the click area is on the circle.

Finally, let's talk about the resetcircle, which is an attribute animation to control the elastic animation returning to the origin:

The interpolator is bounce interpolator, which is similar to the animation of small ball bouncing, which is introduced in my previous article.

Finally, let's take a look at the effect of not disconnecting. It's quite interesting:

The article on customizing the view will be here for the time being. Next, we are going to update the article on customizing the ViewGroup. It is a little simpler than customizing the view.

Demo download address: pathapplication_ jb51.rar

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.