Android — Seret dan Lepas

Hari ini saya ingin berbicara tentang salah satu fitur favorit saya dalam pengembangan android yaitu “Drag and Drop”.

Dalam antarmuka pengguna modern, seret dan lepas telah menjadi pola interaksi penting untuk memungkinkan pengguna memindahkan objek di sekitar layar dengan gerakan sentuh.

Framework drag and drop di Android Kotlin menyediakan cara sederhana dan fleksibel untuk mengimplementasikan fungsionalitas drag and drop di aplikasi Anda. Ini memungkinkan pengguna untuk menyeret tampilan atau item dari satu lokasi ke lokasi lain hanya dengan mengetuk dan menahan item, lalu menyeretnya ke tujuan yang diinginkan. Framework seret dan lepas didasarkan pada tiga komponen utama: DragEvent, DragShadow, dan ClipDataobjek.

SeretAcara:

Kelas DragEventbertanggung jawab untuk mengelola seluruh siklus proses seret dan lepas. Ini menyediakan satu set konstanta yang mewakili berbagai keadaan operasi seret dan lepas. Status tersebut meliputi ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, dan ACTION_DRAG_ENDED. Status ini digunakan untuk mengidentifikasi kapan operasi seret dimulai, saat sedang berlangsung, dan saat selesai.

Seret Bayangan:

Kelas DragShadowbertanggung jawab untuk membuat representasi visual dari item yang diseret. Ini adalah komponen opsional yang dapat digunakan untuk menyediakan representasi visual khusus dari item yang diseret. Ini juga memungkinkan untuk menggunakan bayangan seret default, yang merupakan gambar buram sederhana dari tampilan yang diseret.

DataKlip:

Kelas ClipDatabertanggung jawab untuk menyimpan data yang terkait dengan item yang diseret. Data ini bisa berupa apa saja yang ingin Anda kaitkan dengan item, seperti teks, gambar, atau tipe data lainnya. Anda bisa menggunakan ClipData.newPlainText()metode ini untuk membuat objek baru ClipDatayang berisi data teks biasa, atau Anda bisa membuat ClipDataobjek kustom yang berisi tipe data apa pun.

Ini adalah bagian fundamental. Sekarang mari pikirkan tentang game Seret dan Lepas yang ingin Anda buat untuk anak-anak. Untuk membuat ini, Anda harus mengetahui tentang View.setOnTouchListener() dan View.OnDragEventListener().

Perhatikan bahwa saya hanya berbagi konsep dasar. Asumsikan saya ingin mencocokkan bentuk. Sebut saja “ Cocokkan Bentuknya ”. Dalam aplikasi ini saya memiliki objek berbentuk segitiga dan ingin mencocokkannya dengan bentuknya. Sekarang lanjutkan membuat aplikasi kecil ini.

1. Klik File , lalu New => New Project .
2. Setelah itu sertakan dukungan Kotlin dan klik berikutnya.
3. Pilih SDK minimum sesuai kenyamanan dan klik tombol berikutnya .
4. Kemudian pilih Empty activity => next => finish .

Saya telah menggunakan view binding dalam proyek ini. Untuk mengaktifkan pengikatan tampilan dalam modul, setel viewBindingopsi build ke truedalam file level modul build.gradle, seperti yang ditampilkan dalam contoh berikut:

buildFeatures {
    viewBinding = true
}

Dalam file xml kami memiliki dua ImageViewsatu untuk menampilkan bentuk ivTriangledan satu lagi ivTriangleDraguntuk menyeretnya ke bentuk.

<?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>

Kami akan mengimplementasikan onTouchdan onDragfungsi dari View.OnTouchListenerdan View.OnDragListenerSejalan dengan itu.

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
}

Semoga artikel ini membantu Anda. Untuk memeriksa Kode Lengkap, ini Repositorinya .

Jika Anda menyukai artikel ini, ikuti saya untuk topik yang lebih menarik tentang Pengembangan Android.

Selamat Coding! :)