This article begins with a custom View drag-and-drop implementation

Let’s start with the renderings

The principle of

View.layout (left, top, right, bottom) is the core method for implementing drag-and-drop effects. The principle is as follows:

  1. We first get the coordinates of the touch points on the screen, and then we need to get the distance of the control’s four borders from the coordinate origin (0,0).

  2. After obtaining these data, we then obtain the coordinates of the touch points after the move, and make the difference between the coordinates of the two groups of touch points to obtain the x and y values of the move.

  3. Finally, we add the touch point difference to the distance between the four edges and the origin to get the position of the four vertices of the moved control.

Coordinate system

I’ll show you the coordinate system. I’ll borrow the picture from the reference document

Among them the getLeft (), the getTop (), the getRight (), the getBottom (). It’s the distance between the edges and the origin, which is in the upper left corner.



Then the MotionEvent getRawX(), getRawY() and getX(), getY()

GetRawX () and getRawY() : is the distance between the touch point and the origin

GetX (), getY() : is the distance between the touch point and the origin of the control (that is, the distance between the touch point and the upper left corner of the control)

The specific implementation

In accordance with the principle described above, the following is the concrete code implementation

  1. Gets the coordinates of the touch point
		x = (int) event.getRawX();
        y = (int) event.getRawY();

Copy the code
  1. Get the coordinates after the move, and do the difference to get the difference before and after the move
		int dx = (int) (event.getRawX() - x);
        int dy = (int) (event.getRawY() - y);

Copy the code
  1. The new position of the control after it has moved
V.layout (v.geleft () + dx, v.getop () + dy, v.geight () + dx, v.gebottom () + dy);Copy the code
  1. Assigns the moved position to the variable that recorded the margin before
X = (int) event.getrawx (); y = (int) event.getRawY();Copy the code

The above code is the entire process. Here is the overall code, the layout is not pasted, just a TextView.

public class DragTestActivity extends AppCompatActivity { private TextView textView; /** * private int x; private int y; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_drag_test); textView = findViewById(R.id.iv_test); textView.setOnTouchListener((v, event) -> { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_UP: x = (int) event.getRawX(); y = (int) event.getRawY(); break; case MotionEvent.ACTION_MOVE: int dx = (int) (event.getRawX() - x); int dy = (int) (event.getRawY() - y); V.layout (v.geleft () + dx, v.getop () + dy, v.geight () + dx, v.gebottom () + dy); X = (int) event.getrawx (); y = (int) event.getRawY(); break; default: break; } return true; }); }}Copy the code

After that, I will continue to learn and update the fully customized View. If you think this article is helpful to you, please give it a thumbs up.