¿Cómo agregar animación de curvatura de página entre imágenes en Android?

Las animaciones son la mejor manera de crear interfaces de usuario atractivas. A los usuarios les encanta ver animaciones en una aplicación de Android. Y esto se vuelve aún más necesario cuando tenemos que hacer algún tipo de aplicación especial. Por ejemplo, si estamos creando una aplicación para un libro. Entonces, debemos crear una animación que le dé al usuario una sensación del mundo real mientras se mueve una página. a otro. Debería tener algo de experiencia de tal manera que realmente pase de una página a otra en el mundo real. En el artículo de hoy, vamos a aprender sobre otra animación de Android que se llama animación de enrollamiento de página. Dará la sensación de enrollar una página mientras el usuario se mueve de una imagen a otra.

Enfoque: Usaremos una biblioteca en este artículo, y en XML usaremos un objeto de esa biblioteca app.num.numandroidpagecurleffect.PageCurlView y proporcionaremos los atributos de ancho y alto match_parent . Después de eso, crearemos una ArrayList de imágenes en nuestra clase java o Kotlin y estableceremos esa lista en CurlView con la ayuda de esta biblioteca. Como referencia y como recurso, cargaremos el proyecto realizado en este artículo en GitHub y les proporcionaremos el enlace del repositorio para que puedan explorar más.

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 Agregar dependencia para la biblioteca

Asegúrese de que Android esté seleccionado en la esquina superior izquierda de la estructura del proyecto. Luego, vaya a Gradle Scripts/build.gradle (Módulo: aplicación) y pegue esta implementación de código ‘app.num.numandroidpagecurleffect:numandroidpagecurleffect:1.0’ dentro de las dependencias.

Después de eso, haga clic en Sincronizar ahora en la esquina superior derecha de la pantalla.

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"?>
<LinearLayout 
    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">
  
    <app.num.numandroidpagecurleffect.PageCurlView
        android:id="@+id/pagecurlView"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layout_gravity="center">
    </app.num.numandroidpagecurleffect.PageCurlView>
  
</LinearLayout>

Paso 4: trabajar con el archivo MainActivity.java

Ahora, vaya a la clase MainActivity y pegue el código justo antes de su método onCreate.

PageCurlView pageCurlView;
List<Integer> images;

Cree una lista de arrays de imágenes y configúrelas para la animación PageCurl

En la clase MainActivity, pegue el siguiente código en nuestro método onCreate.

pageCurlView = findViewById(R.id.pagecurlView);
images= new ArrayList<>();
  
images.add(R.drawable.img1); // First Image
images.add(R.drawable.img2); // Second Image
images.add(R.drawable.img3); // Third Image
  
pageCurlView.setCurlView(images);
pageCurlView.setCurlSpeed(600); // Set the speed in ms

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
  
import java.util.ArrayList;
import java.util.List;
  
import app.num.numandroidpagecurleffect.PageCurlView;
  
public class MainActivity extends AppCompatActivity {
      
    PageCurlView pageCurlView;
    List<Integer> images;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pageCurlView = findViewById(R.id.pagecurlView);
        images = new ArrayList<>();
  
        images.add(R.drawable.img1); // First Image
        images.add(R.drawable.img2); // Second Image
        images.add(R.drawable.img3); // Third Image
  
        pageCurlView.setCurlView(images);
        pageCurlView.setCurlSpeed(600); // Set the speed in ms
    }
}

Ahora, hemos terminado con el código, puede ejecutar su aplicación en un emulador de Android o en un dispositivo físico.

Producción:

Recursos: también puede encontrar este proyecto en GitHub y explorar más con su código.