Mobile phone QQ5.0 The implementation of the red dot drag and drop removal

The new version of the mobile phone qq5.+ a new "one-key fallback" function, that is, the red dots on the page can be dragged and removed. You can refer to the design process of the red dot on [know] (http://www.zhihu.com/question/26382740). Follow the design ideas on Android to imitate the hand Q implementation of the drag and drop process.

Code Address: Https://github.com/chenupt/BezierDemo

：

The whole idea, encapsulated good one view. Find four points on the interface, that is, the range between the frame out gesture drag point and the red point, using the Bezier curve to decorate the border, calculate the distance between the red dot and the gesture drag point, and judge the elimination and rebound of the red dot.
Borrow the following design:


First of all to determine the red dot as the coordinate origin, in the coordinates to calculate is P1, p2, P3, p4 four points, wherein. For Bezier curves, circles with a radius of R and R need to be drawn between P1p2 and P3P4.

The next step is to calculate the distance between the two points (0,0) and (x0, y0) during the drag process, and to simulate the elastic effect in real life by controlling the radian and circle size of the Bezier curve by distance.

In the code through path to control P1, P2, P3, p4 four points surrounded by the range, and fill the corresponding color values:

1. Determine four points, which simply set the starting radius of two circles equal

        float x1 = startx-offsetx;        Float y1 = starty + OffsetY;        float x2 = x-offsetx;        float y2 = y + OffsetY;        Float x3 = x + OffsetX;        float y3 = y-offsety;        Float x4 = StartX + OffsetX;        float y4 = starty-offsety;        Path.reset ();        Path.moveto (x1, y1);        Path.quadto (Anchorx, anchory, x2, y2);        Path.lineto (x3, y3);        Path.quadto (Anchorx, Anchory, X4, y4);        Path.lineto (x1, y1);

2. Fill the range and draw the circle:

Canvas.drawcolor (Color.transparent, PorterDuff.Mode.MULTIPLY); Canvas.drawpath (path, paint); Canvas.drawcircle ( StartX, Starty, radius, paint); canvas.drawcircle (x, y, radius, paint);

3. On the call Super.ondraw (canvas), method draws the message point icon above the canvas layer ImageView
The effect of dragging is achieved by controlling the corresponding position of the touch point in the code by the Ontouchevent method.

@Override public boolean ontouchevent (Motionevent event) {if (event.getaction () = = Motionevent.action_down) {            Determines whether the touch point is in tipimageview rect rect = new rect ();            int[] location = new INT[2];            Tipimageview.getdrawingrect (rect);            Tipimageview.getlocationonscreen (location);            Rect.left = location[0];            Rect.top = location[1];            Rect.right = Rect.right + location[0];            Rect.bottom = Rect.bottom + location[1];            if (rect.contains (int) event.getrawx (), (int) Event.getrawy ())) {Istouch = true;            }}else if (event.getaction () = = Motionevent.action_up | | event.getaction () = = Motionevent.action_cancel) {            Istouch = false;            Tipimageview.setx (Startx-tipimageview.getwidth ()/2);        Tipimageview.sety (Starty-tipimageview.getheight ()/2);        } invalidate ();       if (Isanimstart) {return super.ontouchevent (event); } Anchorx = (Event.getx () + StartX)/2;        Anchory = (event.gety () + starty)/2;        x = Event.getx ();        y = event.gety ();    return true; }

4. The distance between the two centers is calculated during the drag process, and the radius of the circle (0, 0) is adjusted by the distance between the centers.

float distance = (float) math.sqrt (Math.pow (Y-starty, 2) + Math.pow (X-STARTX, 2)); radius =-distance/15+default_radius;

With a new radius to draw (0, 0) of the circle, so with the increase in distance, the circle corresponding to the smaller will give people as if the feeling of sticky.

5. The distance exceeds the set maximum range, then set to the red point to break Free State, if the finger is lifted, the corresponding explosion animation begins to play.

Exploredimageview.setvisibility (view.visible); Exploredimageview.setimageresource (R.drawable.tip_anim);(( animationdrawable) exploredimageview.getdrawable ()). Stop ();((animationdrawable) exploredimageview.getdrawable ()) . Start ();

6. Refer to the corresponding packaged view in the activity layout.

<github.chenupt.bezier.bezierview        android:layout_width= "match_parent"        android:layout_height= "Match_ Parent "        android:background=" @android: Color/transparent "/>

Initially conceived view is a control similar to the red dot range, but this implementation does not reach beyond the bounds of the parent class control, such as when dragging a red dot beyond the tab layout range, the red dot cannot be drawn. So in the QQ message list is to set its corresponding full screen of a view. Background for the last background, so that in the top layer is actually only the red dot control. This allows you to drag the red dots to each position of the screen accordingly. That's why the list is not clickable until the end of the red dot pop-up animation, and the list data is not refreshed when you drag the red dot.

Perhaps there is a better way to achieve, welcome to exchange.

Code Address: Https://github.com/chenupt/BezierDemo

qq:753785666

Email:[email protected]

Mobile phone QQ5.0 The implementation of the red dot drag and drop removal