Android: trascina e rilascia

Oggi voglio parlare della mia una delle funzionalità preferite nello sviluppo di Android che è "Drag and Drop".

Nelle moderne interfacce utente, il trascinamento della selezione è diventato un modello di interazione essenziale per consentire agli utenti di spostare gli oggetti sullo schermo con un tocco.

Il framework di trascinamento della selezione in Android Kotlin fornisce un modo semplice e flessibile per implementare la funzionalità di trascinamento della selezione nella tua app. Consente agli utenti di trascinare una vista o un elemento da una posizione all'altra semplicemente toccando e tenendo premuto l'elemento, quindi trascinandolo nella destinazione desiderata. Il framework di trascinamento della selezione si basa su tre componenti chiave: il DragEvent, il DragShadowe l' ClipDataoggetto.

Evento di trascinamento:

La DragEventclasse è responsabile della gestione dell'intero ciclo di vita del drag and drop. Fornisce una serie di costanti che rappresentano diversi stati dell'operazione di trascinamento della selezione. Questi stati includono ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROPe ACTION_DRAG_ENDED. Questi stati vengono usati per identificare quando un'operazione di trascinamento sta iniziando, quando è in corso e quando è stata completata.

Trascina ombra:

La DragShadowclasse è responsabile della creazione di una rappresentazione visiva dell'elemento che viene trascinato. È un componente facoltativo che può essere utilizzato per fornire una rappresentazione visiva personalizzata dell'elemento trascinato. È anche possibile utilizzare l'ombra di trascinamento predefinita, che è una semplice immagine opaca della vista che viene trascinata.

ClipData:

La ClipDataclasse è responsabile della memorizzazione dei dati associati all'elemento trascinato. Questi dati possono essere qualsiasi cosa tu voglia associare all'elemento, come testo, immagini o altri tipi di dati. È possibile utilizzare il ClipData.newPlainText()metodo per creare un nuovo ClipDataoggetto contenente dati di testo normale oppure è possibile creare un ClipDataoggetto personalizzato contenente qualsiasi tipo di dati.

Queste erano le parti fondamentali. Ora pensiamo a un gioco Drag and Drop che vuoi creare per i bambini. Per creare questo devi conoscere View.setOnTouchListener() e View.OnDragEventListener().

Nota che sto solo condividendo il concetto di base. Supponiamo che io voglia abbinare una forma. Chiamiamolo " Abbina la forma ". In questa applicazione ho un oggetto a forma di triangolo e voglio abbinarlo alla forma. Ora procedi con questa piccola applicazione.

1. Fare clic su File , quindi su Nuovo => Nuovo progetto .
2. Successivamente includi il supporto Kotlin e fai clic su Avanti.
3. Seleziona l'SDK minimo per comodità e fai clic sul pulsante successivo .
4. Quindi selezionare l' attività Vuota => next => finish .

Ho utilizzato l'associazione di visualizzazione in questo progetto. Per abilitare l'associazione di visualizzazione in un modulo, imposta l' viewBindingopzione build su truenel build.gradlefile a livello di modulo, come mostrato nell'esempio seguente:

buildFeatures {
    viewBinding = true
}

Nel file xml ne abbiamo due ImageViewuno per mostrare la forma ivTrianglee un altro ivTriangleDragper trascinarla sulla forma.

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

Implementeremo le funzioni onTouche di e di conseguenza.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
}

Spero che questo articolo ti aiuti. Per controllare il codice completo, ecco il Repository .

Se ti piace l'articolo, seguimi per argomenti più interessanti sullo sviluppo di Android.

Buona codifica! :)