Tinder Swipe View con ejemplo en Android

Tinder Swipe View es uno de los componentes de interfaz de usuario más utilizados en muchas aplicaciones de Android. Esta característica nos permite representar fácilmente los datos en una forma de lista enorme. En este artículo, echaremos un vistazo a la implementación de esta función Swipe View en nuestra aplicación de Android. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que mostraremos una pila de tarjetas en las que mostraremos los diferentes cursos que están disponibles en Geeks for Geeks. En esas tarjetas, agregaremos una función de deslizamiento similar a la de Tinder.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia a continuación en build.gradle

Vaya a la aplicación > Gradle Scripts > build.gradle y agregue la siguiente dependencia en la sección de dependencias. 

implementación ‘com.daprlabs.aaron:cardstack:0.3.1-beta0’

Después de agregar la dependencia anterior, ahora sincronice su proyecto y avanzaremos hacia nuestra actividad_principal.xml. 

Paso 3: 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 version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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">
  
    <!--on below line we are creating a swipe
         frame layout for providing a swipe action-->
    <com.daprlabs.cardstack.SwipeFrameLayout 
        xmlns:swipedeck="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
  
        <!--below widget is used for creating a swipe deck-->
        <!--in below widget card spacing is the spacing between cards
            max visible is the max number of cards which are visible
            render above is to render the cards
            rotation degree is the angle of card rotation when card is swiped-->
        <com.daprlabs.cardstack.SwipeDeck
            android:id="@+id/swipe_deck"
            android:layout_width="match_parent"
            android:layout_height="480dp"
            android:padding="20dp"
            swipedeck:card_spacing="10dp"
            swipedeck:max_visible="3"
            swipedeck:render_above="true"
            swipedeck:rotation_degrees="15" />
  
    </com.daprlabs.cardstack.SwipeFrameLayout>
    
</RelativeLayout>

Paso 4: Crear una clase modal para almacenar nuestros datos

Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y asígnele el nombre CourseModal y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle. 

public class CourseModal {
  
    // variables for our coursename,
    // description,tracks and duration,imageId.
    private String courseName;
    private String courseDuration;
    private String courseTracks;
    private String courseDescription;
  
    public int getImgId() {
        return imgId;
    }
  
    public void setImgId(int imgId) {
        this.imgId = imgId;
    }
  
    private int imgId;
  
    // creating getter and setter methods
    public String getCourseName() {
        return courseName;
    }
  
    public void setCourseName(String courseName) {
        this.courseName = courseName;
    }
  
    public String getCourseDuration() {
        return courseDuration;
    }
  
    public void setCourseDuration(String courseDuration) {
        this.courseDuration = courseDuration;
    }
  
    public String getCourseTracks() {
        return courseTracks;
    }
  
    public void setCourseTracks(String courseTracks) {
        this.courseTracks = courseTracks;
    }
  
    public String getCourseDescription() {
        return courseDescription;
    }
  
    public void setCourseDescription(String courseDescription) {
        this.courseDescription = courseDescription;
    }
  
    // constructor.
    public CourseModal(String courseName, String courseDuration, String courseTracks, String courseDescription, int imgId) {
        this.courseName = courseName;
        this.courseDuration = courseDuration;
        this.courseTracks = courseTracks;
        this.courseDescription = courseDescription;
        this.imgId = imgId;
    }
}

Paso 5: crear un nuevo archivo de diseño para cada elemento deslizable 

Ahora, para mostrar las tarjetas en la pila para deslizar, tenemos que crear un archivo de diseño. Vaya a la aplicación > res > diseño > nuevo > archivo de recursos de diseño y asígnele el nombre curso_rv_elemento y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:elevation="8dp"
    app:cardCornerRadius="4dp">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:orientation="vertical">
  
        <!--image view for course image-->
        <ImageView
            android:id="@+id/idIVCourse"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop" />
        
        <!--text view for our course name-->
        <TextView
            android:id="@+id/idTVCourseName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="3dp"
            android:text="Course Name"
            android:textColor="@color/black" />
  
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">
  
            <!--text view for our course tracks-->
            <TextView
                android:id="@+id/idTVCourseTracks"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="3dp"
                android:text="Course Tracks"
                android:textColor="@color/black" />
  
            <!--text view for our course duration-->
            <TextView
                android:id="@+id/idTVCourseDuration"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="3dp"
                android:text="Duration"
                android:textColor="@color/black" />
  
        </LinearLayout>
  
        <!--text view for our course description-->
        <TextView
            android:id="@+id/idTVCourseDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Description"
            android:textColor="@color/black" />
  
    </LinearLayout>
    
</androidx.cardview.widget.CardView>

Paso 6: crear una clase de adaptador

Ahora, para configurar los datos de cada tarjeta presente en la pila, debemos crear nuestra clase de adaptador. Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y asígnele el nombre DeckAdapter y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
  
import java.util.ArrayList;
  
public class DeckAdapter extends BaseAdapter {
      
    // on below line we have created variables
      // for our array list and context.
    private ArrayList<CourseModal> courseData;
    private Context context;
  
    // on below line we have created constructor for our variables.
    public DeckAdapter(ArrayList<CourseModal> courseData, Context context) {
        this.courseData = courseData;
        this.context = context;
    }
  
    @Override
    public int getCount() {
        // in get count method we are returning the size of our array list.
        return courseData.size();
    }
  
    @Override
    public Object getItem(int position) {
        // in get item method we are returning the item from our array list.
        return courseData.get(position);
    }
  
    @Override
    public long getItemId(int position) {
        // in get item id we are returning the position.
        return position;
    }
  
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // in get view method we are inflating our layout on below line.
        View v = convertView;
        if (v == null) {
            // on below line we are inflating our layout.
            v = LayoutInflater.from(parent.getContext()).inflate(R.layout.course_rv_item, parent, false);
        }
        // on below line we are initializing our variables and setting data to our variables.
        ((TextView) v.findViewById(R.id.idTVCourseName)).setText(courseData.get(position).getCourseName());
        ((TextView) v.findViewById(R.id.idTVCourseDescription)).setText(courseData.get(position).getCourseDescription());
        ((TextView) v.findViewById(R.id.idTVCourseDuration)).setText(courseData.get(position).getCourseDuration());
        ((TextView) v.findViewById(R.id.idTVCourseTracks)).setText(courseData.get(position).getCourseTracks());
        ((ImageView) v.findViewById(R.id.idIVCourse)).setImageResource(courseData.get(position).getImgId());
        return v;
    }
}

Paso 7: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.daprlabs.cardstack.SwipeDeck;
  
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
    // on below line we are creating variable 
    // for our array list and swipe deck.
    private SwipeDeck cardStack;
    private ArrayList<CourseModal> courseModalArrayList;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // on below line we are initializing our array list and swipe deck.
        courseModalArrayList = new ArrayList<>();
        cardStack = (SwipeDeck) findViewById(R.id.swipe_deck);
          
        // on below line we are adding data to our array list.
        courseModalArrayList.add(new CourseModal("C++", "30 days", "20 Tracks", "C++ Self Paced Course", R.drawable.gfg));
        courseModalArrayList.add(new CourseModal("Java", "30 days", "20 Tracks", "Java Self Paced Course", R.drawable.gfg));
        courseModalArrayList.add(new CourseModal("Python", "30 days", "20 Tracks", "Python Self Paced Course", R.drawable.gfg));
        courseModalArrayList.add(new CourseModal("DSA", "30 days", "20 Tracks", "DSA Self Paced Course", R.drawable.gfg));
        courseModalArrayList.add(new CourseModal("PHP", "30 days", "20 Tracks", "PHP Self Paced Course", R.drawable.gfg));
          
          // on below line we are creating a variable for our adapter class and passing array list to it.
        final DeckAdapter adapter = new DeckAdapter(courseModalArrayList, this);
          
          // on below line we are setting adapter to our card stack.
        cardStack.setAdapter(adapter);
          
          // on below line we are setting event callback to our card stack.
        cardStack.setEventCallback(new SwipeDeck.SwipeEventCallback() {
            @Override
            public void cardSwipedLeft(int position) {
                // on card swipe left we are displaying a toast message.
                Toast.makeText(MainActivity.this, "Card Swiped Left", Toast.LENGTH_SHORT).show();
            }
  
            @Override
            public void cardSwipedRight(int position) {
                // on card swiped to right we are displaying a toast message.
                Toast.makeText(MainActivity.this, "Card Swiped Right", Toast.LENGTH_SHORT).show();
            }
  
            @Override
            public void cardsDepleted() {
                // this method is called when no card is present
                Toast.makeText(MainActivity.this, "No more courses present", Toast.LENGTH_SHORT).show();
            }
  
            @Override
            public void cardActionDown() {
                // this method is called when card is swiped down.
                Log.i("TAG", "CARDS MOVED DOWN");
            }
  
            @Override
            public void cardActionUp() {
                // this method is called when card is moved up.
                Log.i("TAG", "CARDS MOVED UP");
            }
        });
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: