En la mayoría de las aplicaciones de Android donde los datos se muestran en forma de formato de lista, existe una funcionalidad con la ayuda de la cual podemos simplemente arrastrar y soltar cualquier elemento de esa lista a cualquier posición específica dentro de la lista. Para implementar este tipo de funcionalidad de arrastrar y soltar, tenemos que usar un diseño de arrastrar lineal para que podamos arrastrar y soltar elementos dentro de nuestro diseño lineal. En este artículo, crearemos una aplicación simple para la demostración del diseño Drag Linear dentro de nuestra aplicación de Android usando Kotlin.
Nota : si está buscando implementar Drag Linear Layout en Android usando Java. Arrastrar y soltar usando Arrastrar diseño lineal en Android usando Java
Implementación paso a paso
Paso 1: crea un nuevo proyecto en Android Studio
Cómo crear/iniciar un nuevo proyecto en Android Studio
Paso 2: Agregar dependencia a build.gradle (Módulo: aplicación)
Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.
implementation ‘com.jmedeisis:draglinearlayout:1.1.0’
Después de agregar la dependencia, simplemente sincronice su proyecto para instalar la dependencia.
Paso 3: agregar imágenes a la carpeta dibujable
Copie las imágenes que desee agregar. Navegue a aplicación> res> carpeta dibujable> Haga clic con el botón derecho en él> y simplemente haga clic en pegar para agregarlo.
Paso 4: trabajar con el archivo activity_main.xml
Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <com.jmedeisis.draglinearlayout.DragLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <!--on below line we are creating a simple card view for our item --> <androidx.cardview.widget.CardView android:id="@+id/idCardOne" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="4dp" android:padding="4dp" app:cardCornerRadius="5dp" app:cardElevation="8dp"> <!--on below line we are creating a linear layout for each item in horizontal format--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="5dp"> <!--inside linear layout we are creating an image view--> <ImageView android:layout_width="80dp" android:layout_height="80dp" android:layout_margin="5dp" android:src="@drawable/android" /> <!--inside this linear layout we are creating a simple text view--> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Android" android:textAlignment="center" android:textColor="@color/purple_200" android:textSize="20sp" android:textStyle="bold" /> </LinearLayout> </androidx.cardview.widget.CardView> <!--on below line we are creating a simple card view for our item --> <androidx.cardview.widget.CardView android:id="@+id/idCardTwo" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="4dp" android:padding="4dp" app:cardCornerRadius="5dp" app:cardElevation="8dp"> <!--on below line we are creating a linear layout for each item in horizontal format--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="5dp"> <!--inside linear layout we are creating an image view--> <ImageView android:layout_width="80dp" android:layout_height="80dp" android:layout_margin="5dp" android:src="@drawable/c" /> <!--inside this linear layout we are creating a simple text view--> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="C++" android:textAlignment="center" android:textColor="@color/purple_200" android:textSize="20sp" android:textStyle="bold" /> </LinearLayout> </androidx.cardview.widget.CardView> <!--on below line we are creating a simple card view for our item --> <androidx.cardview.widget.CardView android:id="@+id/idCardThree" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="4dp" android:padding="4dp" app:cardCornerRadius="5dp" app:cardElevation="8dp"> <!--on below line we are creating a linear layout for each item in horizontal format--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="5dp"> <!--inside linear layout we are creating an image view--> <ImageView android:layout_width="80dp" android:layout_height="80dp" android:layout_margin="5dp" android:src="@drawable/java" /> <!--inside this linear layout we are creating a simple text view--> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Java" android:textAlignment="center" android:textColor="@color/purple_200" android:textSize="20sp" android:textStyle="bold" /> </LinearLayout> </androidx.cardview.widget.CardView> <!--on below line we are creating a simple card view for our item --> <androidx.cardview.widget.CardView android:id="@+id/idCardFour" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="4dp" android:padding="4dp" app:cardCornerRadius="5dp" app:cardElevation="8dp"> <!--on below line we are creating a linear layout for each item in horizontal format--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="5dp"> <!--inside linear layout we are creating an image view--> <ImageView android:layout_width="80dp" android:layout_height="80dp" android:layout_margin="5dp" android:src="@drawable/js" /> <!--inside this linear layout we are creating a simple text view--> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="JavaScript" android:textAlignment="center" android:textColor="@color/purple_200" android:textSize="20sp" android:textStyle="bold" /> </LinearLayout> </androidx.cardview.widget.CardView> </com.jmedeisis.draglinearlayout.DragLinearLayout>
Paso 5: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
package com.gtappdevelopers.kotlingfgproject
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import com.jmedeisis.draglinearlayout.DragLinearLayout
class MainActivity : AppCompatActivity() {
// on below line we are creating
// a variable for our drag linear layout
lateinit var dragLinearLayout: DragLinearLayout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// on below line we are initializing
// our drag linear layout with its id.
dragLinearLayout = findViewById(R.id.container)
// on below line we are running a for loop.
for (i in 0 until dragLinearLayout.getChildCount()) {
// below is the child inside dragger layout
val child: View = dragLinearLayout.getChildAt(i)
// below line will set all children draggable
// except the header layout.
// the child is its own drag handle.
dragLinearLayout.setViewDraggable(child, child)
}
}
}
Ahora ejecute su aplicación para ver el resultado.
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA