Android — Kéo và thả

Hôm nay tôi muốn nói về một trong những tính năng yêu thích nhất của tôi trong quá trình phát triển Android, đó là “Kéo và Thả”.

Trong các giao diện người dùng hiện đại, kéo và thả đã trở thành một mẫu tương tác thiết yếu để cho phép người dùng di chuyển các đối tượng xung quanh màn hình bằng cử chỉ chạm.

Khung kéo và thả trong Android Kotlin cung cấp một cách đơn giản và linh hoạt để triển khai chức năng kéo và thả trong ứng dụng của bạn. Nó cho phép người dùng kéo một chế độ xem hoặc mục từ vị trí này sang vị trí khác bằng cách chỉ cần chạm và giữ mục đó, sau đó kéo mục đó đến đích mong muốn. Khung kéo và thả dựa trên ba thành phần chính: DragEvent, the DragShadowvà ClipDatađối tượng.

Sự kiện kéo:

Lớp DragEventchịu trách nhiệm quản lý toàn bộ vòng đời kéo và thả. Nó cung cấp một tập hợp các hằng số đại diện cho các trạng thái khác nhau của thao tác kéo và thả. Những trạng thái này bao gồm ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROPvà ACTION_DRAG_ENDED. Các trạng thái này được sử dụng để xác định khi nào thao tác kéo bắt đầu, khi nào nó đang diễn ra và khi nào nó hoàn thành.

KéoShadow:

Lớp DragShadowchịu trách nhiệm tạo một biểu diễn trực quan của mục được kéo. Đây là một thành phần tùy chọn có thể được sử dụng để cung cấp hình ảnh đại diện tùy chỉnh của mục đang được kéo. Cũng có thể sử dụng bóng kéo mặc định, là hình ảnh mờ đơn giản của chế độ xem đang được kéo.

Dữ liệu clip:

Lớp ClipDatachịu trách nhiệm lưu trữ dữ liệu liên quan đến mục được kéo. Dữ liệu này có thể là bất kỳ thứ gì bạn muốn liên kết với mục, chẳng hạn như văn bản, hình ảnh hoặc các loại dữ liệu khác. Bạn có thể sử dụng ClipData.newPlainText()phương pháp này để tạo một ClipDatađối tượng mới chứa dữ liệu văn bản thuần túy hoặc bạn có thể tạo một ClipDatađối tượng tùy chỉnh chứa bất kỳ loại dữ liệu nào.

Đây là những phần cơ bản. Bây giờ, hãy nghĩ về trò chơi Kéo và Thả mà bạn muốn xây dựng cho trẻ em. Để xây dựng điều này, bạn phải biết về View.setOnTouchListener() và View.OnDragEventListener().

Lưu ý rằng tôi chỉ chia sẻ khái niệm cơ bản. Giả sử tôi muốn khớp một hình dạng. Hãy gọi nó là " Ghép hình ". Tôi ứng dụng này Tôi có một đối tượng hình tam giác và muốn khớp nó với hình dạng đó. Bây giờ hãy tiến hành tạo ứng dụng nhỏ này.

1. Bấm vào Tập tin , sau đó Mới => Dự án mới .
2. Sau đó, bao gồm hỗ trợ Kotlin và nhấp vào tiếp theo.
3. Chọn SDK tối thiểu theo sự thuận tiện và nhấp vào nút tiếp theo .
4. Sau đó chọn Hoạt động trống => tiếp theo => kết thúc .

Tôi đã sử dụng liên kết xem trong dự án này. Để bật liên kết chế độ xem trong một mô-đun, hãy đặt viewBindingtùy chọn bản dựng thành truetrong build.gradletệp cấp mô-đun, như minh họa trong ví dụ sau:

buildFeatures {
    viewBinding = true
}

Trong tệp xml, chúng tôi có hai ImageViewtệp để hiển thị hình dạng ivTrianglevà một tệp khác ivTriangleDragđể kéo nó vào hình dạng.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="Match the Shape"
        android:textAlignment="center"
        android:textSize="24sp" />

    <ImageView
        android:id="@+id/ivTriangle"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="12dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:src="@drawable/ic_triangle" />

    <ImageView
        android:id="@+id/ivTriangleDrag"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="12dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:src="@drawable/ic_triangle_drag" />


</LinearLayout>

Chúng tôi sẽ thực hiện các chức năng onTouchvà của và tương ứng.onDragView.OnTouchListenerView.OnDragListener

class MainActivity : AppCompatActivity(), View.OnTouchListener, View.OnDragListener{

..........
 override fun onTouch(v: View?, event: MotionEvent?): Boolean {
        ........
  }

 override fun onDrag(v: View?, event: DragEvent?): Boolean {
        .........
  }

}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    mViewBinding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(mViewBinding.root)

    mViewBinding.ivTriangleDrag.setOnTouchListener(this)
    mViewBinding.ivTriangle.setOnDragListener(this)

}

override fun onTouch(v: View?, event: MotionEvent?): Boolean {
    return if (event!!.action == MotionEvent.ACTION_DOWN) {
        val data = ClipData.newPlainText("", "")
        val shadowBuilder = DragShadowBuilder(v)
        v?.startDragAndDrop(data, shadowBuilder, v, 0)
        true
    } else {
        false
    }
}

override fun onDrag(v: View?, event: DragEvent?): Boolean {
    when (event?.action) {
        ACTION_DRAG_STARTED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_STARTED");
        }
        ACTION_DRAG_ENTERED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENTERED")
        }
        ACTION_DRAG_EXITED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_EXITED")
        }
        ACTION_DRAG_LOCATION -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_LOCATION")
        }
        ACTION_DRAG_ENDED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENDED")
        }
        ACTION_DROP -> {
            Log.d(msg, "ACTION_DROP event")
            mViewBinding.ivTriangle.setImageResource(R.drawable.ic_triangle_drag)
            mViewBinding.ivTriangleDrag.visibility = INVISIBLE
            Toast.makeText(this@MainActivity,"You have matched the shape!!",Toast.LENGTH_SHORT).show()
        }

    }
    return true
}

Hy vọng bài viết này sẽ giúp bạn. Để kiểm tra Mã đầy đủ, đây là Kho lưu trữ .

Nếu bạn thích bài viết này, hãy theo dõi tôi để biết thêm các chủ đề thú vị về Phát triển Android.

Mã hóa vui vẻ! :)