Cách sử dụng Drag and Drop trong Android

Giới thiệu

Ví dụ này minh họa cách triển khai chức năng kéo thả (drag and drop) giữa hai vùng trong Android sử dụng OnTouchListener và OnDragListener.

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Thiết kế giao diện (res/layout/activity_main.xml)

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="MainActivity">

    <LinearLayout
        android:id="@+id/leftView"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="@android:color/darker_gray"
        android:gravity="center_vertical"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/boxView"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_margin="10dp"
            android:src="@drawable/one" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/rightView"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="@android:color/darker_gray"
        android:gravity="center_vertical"
        android:orientation="vertical">
    </LinearLayout>

</LinearLayout>

Bước 3: Viết code MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.DragEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity 
        implements View.OnTouchListener, View.OnDragListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        findViewById(R.id.boxView).setOnTouchListener(this);
        findViewById(R.id.leftView).setOnDragListener(this);
        findViewById(R.id.rightView).setOnDragListener(this);
    }

    @Override
    public boolean onDrag(View view, DragEvent event) {
        int action = event.getAction();
        
        switch (action) {
            case DragEvent.ACTION_DRAG_STARTED:
                return true; // Nhận drag event

            case DragEvent.ACTION_DRAG_ENTERED:
                view.setBackgroundColor(0xFFDDDDDD); // Highlight khi drag vào
                return true;

            case DragEvent.ACTION_DRAG_EXITED:
                view.setBackgroundColor(0xFFCCCCCC); // Trả lại màu gốc
                return true;

            case DragEvent.ACTION_DROP:
                // Xử lý thả
                View draggedView = (View) event.getLocalState();
                ViewGroup source = (ViewGroup) draggedView.getParent();
                
                if (source != null) {
                    source.removeView(draggedView); // Xóa khỏi view cũ
                }
                
                LinearLayout target = (LinearLayout) view;
                target.addView(draggedView); // Thêm vào view mới
                draggedView.setVisibility(View.VISIBLE);
                
                view.setBackgroundColor(0xFFCCCCCC);
                return true;

            case DragEvent.ACTION_DRAG_ENDED:
                view.setBackgroundColor(0xFFCCCCCC);
                return true;
        }
        return false;
    }

    @Override
    public boolean onTouch(View view, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
            view.startDragAndDrop(null, shadowBuilder, view, 0); // API 24+
            // view.startDrag(null, shadowBuilder, view, 0); // API cũ
            view.setVisibility(View.INVISIBLE);
            return true;
        }
        return false;
    }
}

Giải thích luồng Drag & Drop:

1. ACTION_DOWN (onTouch): Bắt đầu drag, tạo DragShadowBuilder
2. ACTION_DRAG_STARTED: Target view quyết định có nhận drop không
3. ACTION_DRAG_ENTERED/EXITED: Visual feedback khi drag qua view
4. ACTION_DROP: Xử lý logic di chuyển view
5. ACTION_DRAG_ENDED: Dọn dẹp

Bước 4: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Chạy ứng dụng

Đặt hình ảnh one.png vào drawable. Kết nối thiết bị, nhấn Run. Kéo hình vuông từ vùng trái sang phải.