¿Cómo construir un juego de deslizamiento simple en Android?

En este artículo, vamos a crear un juego de deslizamiento simple usando RecyclerView en Android Studio. RecyclerView es el ViewGroup que contiene las vistas correspondientes a sus datos. Es una vista en sí misma, por lo que agrega RecyclerView a su diseño de la misma manera que agregaría cualquier otro elemento de la interfaz de usuario. Vamos a utilizar ItemTouchHelper para implementar la función de deslizamiento. Esta clase está diseñada para funcionar con cualquier LayoutManager, pero para ciertas situaciones, puede optimizarse para su LayoutManager personalizado extendiendo los métodos en la clase ItemTouchHelper.Callback o implementando la interfaz ItemTouchHelper.ViewDropHandler en su LayoutManager.

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

En este juego, el jugador tenía que deslizar las barras de diferentes colores hacia sus lados correspondientes. Si es una barra de color «Rojo» , el jugador debe deslizarla hacia el lado izquierdo. Si es una barra de color «Amarillo» , el jugador debe deslizarla hacia el lado derecho . Si el jugador deslizó correctamente, puede continuar el juego. si la barra se desliza hacia el lado equivocado, el juego finalizará y el jugador tendrá que reiniciar el juego. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java .

Salida de este proyecto

Implementación paso a paso

Estos son los pasos que tenemos que seguir para crear el juego:

1. Crear un RecyclerView básico
2. Crear y agregar barras a RecyclerView
3. Agregue la función de deslizamiento a RecyclerView usando ItemTouchHelper
4. Agregue el juego sobre el diálogo Alerta.

Métodos importantes:

• AttachToRecyclerView() -Adjunta ItemTouchHelper al RecyclerView proporcionado.
• SimpleCallback() : un contenedor simple para la devolución de llamada predeterminada que puede construir con direcciones de arrastrar y deslizar y esta clase manejará las devoluciones de llamada de bandera. Aún debe anular onMove o onSwiped según su caso de uso.
• onSwiped() : se utiliza para implementar la función de balanceo en RecyclerView

Constantes importantes:

• IZQUIERDA    : dirección izquierda, utilizada para el control de deslizar y arrastrar
• DERECHA : dirección derecha, utilizada para el control de deslizar y arrastrar

Construyamos el juego simple de deslizar usando RecyclerView. Vamos a implementar este proyecto utilizando el lenguaje de programación Java.

Paso 1: Crear un nuevo proyecto

Primero, queremos crear un nuevo proyecto. Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio. 

Paso 2: Crear los archivos de clase

Para implementar el RecyclerView básico, tenemos que crear dos nuevos archivos de clase.

1. Clase de adaptador
2. clase de modelo

Navegación: aplicación > java

Paso 3: Crear archivos XML

Tenemos que crear dos archivos XML:

1. En el diseño – bars.xml
2. En dibujable – shapeofthebar.xml

1. barras.xml

Navegación: aplicación > res > diseño

2. formadelabarra.xml

Navegación: aplicación > res > dibujable

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 version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 5: trabajar con el archivo bars.xml

Vaya a la aplicación > res > diseño y agregue el siguiente código a ese archivo. A continuación se muestra el código del archivo bars.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@drawable/shapeofthebar"
    android:layout_marginTop="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginLeft="5dp"
    android:id="@+id/barlayout"
    android:orientation="horizontal">
</LinearLayout>

Paso 6: trabajar con el archivo shapeofthebar.xml

Navegue a la aplicación > res > dibujable y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo shapeofthebar.xml .

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <corners android:radius="19dp"/>
</shape>

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 androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.ItemTouchHelper;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.widget.Toast;
  
import org.jetbrains.annotations.NotNull;
  
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
  
  
public class MainActivity extends AppCompatActivity {
  
    // Creating RecyclerView
    private RecyclerView recyclerView;
    // Creating a ArrayList of type Modelclass
    private List<Modelclass> barsColor;
  
    // Alert dialog
    AlertDialog.Builder alertDialog;
    private Adapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Adding elements to the barsColor
        barsColor=new ArrayList<>();
        Random random = new Random();
        // Add 15 bars to the RecyclerView
        for(int i=0;i<15;i++)
        {
            // Generate a random number
            int n= random.nextInt(2);
            // Giving the color for the 
            // bar based on the random number
            if(n==0)
            {
                barsColor.add(new Modelclass("Yellow"));
            }
            else
            {
                barsColor.add(new Modelclass("Red"));
            }
        }
  
        // Finding the RecyclerView by it's ID
        recyclerView = findViewById(R.id.recyclerview);
  
        // Creating an Adapter Object
        adapter=new Adapter(this,barsColor);
  
        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
  
        // Add ItemTouchHelper to the recyclerView
        ItemTouchHelper itemTouchHelper = new ItemTouchHelper(simpleCallback);
        itemTouchHelper.attachToRecyclerView(recyclerView);
  
        adapter.notifyDataSetChanged();
  
    }
  
    ItemTouchHelper.SimpleCallback simpleCallback= new ItemTouchHelper.SimpleCallback(0,ItemTouchHelper.LEFT|ItemTouchHelper.RIGHT) {
        @Override
        public boolean onMove(@NonNull @NotNull RecyclerView recyclerView, @NonNull @NotNull RecyclerView.ViewHolder viewHolder, @NonNull @NotNull RecyclerView.ViewHolder target) {
            return false;
        }
  
        @Override
        public void onSwiped(@NonNull @NotNull RecyclerView.ViewHolder viewHolder, int direction) {
            // get the position of the swiped bar
            int position = viewHolder.getPosition();
            switch (direction) {
                // Right side is for Yellow
                case ItemTouchHelper.LEFT: {
                    if ((barsColor.get(position).getColor()).equals("Red")) {
                        barsColor.remove(position);
                        adapter.notifyDataSetChanged();
                    } else {
                        endthegame();
                        adapter.notifyDataSetChanged();
                        alertDialog.show();
                    }
                    break;
                }
                // Left side is for Red
                case ItemTouchHelper.RIGHT: {
                    if ((barsColor.get(position).getColor()).equals("Yellow")) {
                        barsColor.remove(position);
                        adapter.notifyDataSetChanged();
                    } else {
                        endthegame();
                        adapter.notifyDataSetChanged();
                        alertDialog.show();
                    }
                    break;
                }
            }
        }
    };
  
    // Shows game ended dialog
    private void endthegame()
    {
        alertDialog=new AlertDialog.Builder(this);
        alertDialog.setMessage("Oopa! Wrong side! Try Again! ").setPositiveButton("Try Again", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(MainActivity.this, "Try again", Toast.LENGTH_SHORT).show();
            }
        }).setNegativeButton("Later", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(MainActivity.this, "Later!", Toast.LENGTH_SHORT).show();
            }
        });
        alertDialog.create();
    }
}

Paso 8: Trabajar con el archivo Adapter.java

 A continuación se muestra el código para el archivo Adapter.java . 

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.ColorSpace;
import android.os.Build;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
  
import androidx.annotation.NonNull;
import androidx.annotation.RequiresApi;
import androidx.recyclerview.widget.RecyclerView;
  
import org.jetbrains.annotations.NotNull;
  
import java.util.List;
  
public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
  
    List<Modelclass> bars;
    Context context;
  
    Adapter(Context c, List<Modelclass> list )
    {
        bars=list;
        context = c;
    }
  
    @NonNull
    @NotNull
    @Override
    @SuppressLint("ResourceType")
    public ViewHolder onCreateViewHolder(@NonNull @NotNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.bars,parent,false);
        return new ViewHolder(view);
    }
  
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    public void onBindViewHolder(@NonNull @NotNull Adapter.ViewHolder holder, int position) {
  
        // Getting the color for every position
        String color = bars.get(position).getColor();
  
        // Set the color to the bar
        if (color.equals("Yellow"))
        {
            holder.linearLayout.setBackgroundTintList(context.getResources().getColorStateList(R.color.yellow));
        }
        else
        {
            holder.linearLayout.setBackgroundTintList(context.getResources().getColorStateList(R.color.Red));
        }
    }
  
    @Override
    public int getItemCount() {
        return bars.size();
    }
  
    public class ViewHolder extends RecyclerView.ViewHolder {
        LinearLayout linearLayout;
        public ViewHolder(@NonNull @org.jetbrains.annotations.NotNull View itemView) {
            super(itemView);
            linearLayout=itemView.findViewById(R.id.barlayout);
        }
    }
}

Paso 9: Trabajar con el archivo Modelclass.java

A continuación se muestra el código para el archivo Modelclass.java . 

public class Modelclass {
    
    String color;
  
    Modelclass(String color)
    {
        this.color=color;
    }
  
    public String getColor() {
        return color;
    }
  
}

Producción:

Aquí está el resultado de nuestro proyecto.

Salida de este proyecto