Diseño de movimiento de Android en Kotlin

MotionLayout es una versión especial de ConstraintLayout . Es un diseño que ayuda a administrar animaciones de movimiento y widgets en la aplicación. Dado que es una versión especial de ConstraintLayout, se crea como una subclase de ConstraintLayout . Proporciona movimiento de control táctil a la aplicación al describir cómo hacer la transición entre diferentes diseños. En pocas palabras, es muy poderoso y se puede usar para crear animaciones extensas y movimientos controlados por toque en la aplicación.

¿Por qué MotionLayout?

• , en primer lugar, ConstraintLayout

Acercarse:

A continuación se muestran los diversos pasos para crear un diseño de movimiento en Kotlin.

Paso 1: Inicie un nuevo proyecto de Android Studio
este artículo para ver en detalle cómo crear un nuevo Android Studio

Paso 2: agregar la clase MotionLayout al proyecto

Este es un paso necesario ya que sin este, nuestra app dejará de ejecutarse. Dado que MotionLayout es una subclase de ConstraintLayout, es una adición bastante nueva a la familia de Android y las posibilidades de que no lo tengamos en nuestro proyecto de manera predeterminada son bastante altas. Para agregarlo a nuestro proyecto, debemos agregar la siguiente dependencia a nuestra build.gradle: app:

implementación ‘androidx.constraintlayout:constraintlayout:2.0.0-beta7’

Tendremos que hacer una sincronización de gradle siguiendo el cambio que hemos hecho. Una vez que tenga éxito, podemos continuar construyendo el resto de la aplicación.

Paso 3: hacer que MotionLayout sea el diseño raíz

En este paso, diseñaremos el archivo activity_main.xml . Usaremos MotionLayout como nuestro elemento XML raíz y definiremos sus atributos, como la altura y el ancho. Cabe señalar que un MotionLayout puede contener otros diseños como ConstraintLayout , RelativeLayout , FrameLayout anidados dentro de él. También contiene todas las vistas, como TextView y Button, que queremos en nuestra interfaz de usuario. Veamos el código de activity_main.xml para nuestra aplicación.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
    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/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/new_xml"
    tools:context=".MainActivity">
  
    <FrameLayout
        android:id="@+id/textViewContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/swipeLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#185416"/>
  
    <TextView
        android:id="@+id/tvHelloWorld"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Geeks for Geeks!"
        android:textSize="50sp"
        app:layout_constraintTop_toTopOf="@id/textViewContainer"
        app:layout_constraintBottom_toBottomOf="@id/textViewContainer"
        app:layout_constraintStart_toStartOf="@id/textViewContainer"
        app:layout_constraintEnd_toEndOf="@id/textViewContainer"/>
  
</androidx.constraintlayout.motion.widget.MotionLayout>

Tenga en cuenta que en el código anterior, tenemos un atributo llamado app:layoutDescriptionque tiene el valor @xml/new_xml . Este en realidad es el archivo que contiene la descripción de cómo es nuestra animación y qué debe hacer. Todavía no hemos creado este archivo, pero lo haremos en el próximo paso. El código también tiene un ConstraintLayout que es parte de la animación. Básicamente cubrirá la pantalla cuando tenga lugar la animación. A continuación, tenemos un solo TextView que se mostrará en nuestra pantalla.

Paso 4: Hacer un nuevo archivo xml

Tal como dijimos, ahora crearemos el archivo new_xml.xml que se estableció como el valor de app:layoutDescription en nuestro código anterior. Para hacer esto, primero debemos crear un nuevo archivo de recursos XML. Primero, crearemos un directorio en nuestra carpeta de recursos y lo llamaremos xml . Para esto, haga clic en aplicación -> res (clic derecho) -> Nuevo -> Directorio

Ahora que tenemos un directorio xml , crearemos un archivo llamado new_xml   en él. Para hacer esto, haga clic en xml (clic con el botón derecho) -> Nuevo -> Archivo de recursos XML y nombre el archivo new_xml . 

Paso 5: Agregar código a new_xml.xml

Ahora que tenemos todo listo, podemos definir cómo debe ser nuestra animación en new_xml.xml. Comenzamos abriendo una etiqueta XML de MotionScene . En este ejemplo, solo haremos una animación de transición básica utilizando el atributo Transition y definiremos cuándo debe ocurrir, es decir , DragUp , DragDown , DragLeft , etc., configurando el elemento OnSwipe . Así es como se ve nuestro código:

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:motion="http://schemas.android.com/tools">
  
    <Transition
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end"
        app:duration="100"
        app:motionInterpolator="linear">
  
        <OnSwipe
            app:dragDirection="dragUp"/>
  
    </Transition>
  
    <ConstraintSet android:id="@id/start">
        <Constraint
            android:id="@id/tvHelloWorld">
            <CustomAttribute
                app:attributeName="textColor"
                app:customColorValue="#175416" />
        </Constraint>
  
        <Constraint
            android:id="@id/swipeLayout"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </ConstraintSet>
  
    <ConstraintSet android:id="@id/end">
        <Constraint
            android:id="@id/tvHelloWorld">
            <CustomAttribute
                app:attributeName="textColor"
                app:customColorValue="@android:color/white" />
        </Constraint>
  
        <Constraint
            android:id="@id/swipeLayout"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </ConstraintSet>
  
</MotionScene>

Para saber qué otras animaciones podemos aplicar, consulte este enlace: https://developer.android.com/training/constraint-layout/motionlayout#additional_motionlayout_attributes . 

Paso 6: Archivo MainActivity.kt

Ahora tenemos todo lo que necesitamos para que nuestra aplicación funcione. Solo una pequeña cosa a tener en cuenta es que no hemos realizado ningún cambio hasta ahora en nuestro archivo MainActivity.kt . Esto se debe a que solo estamos diseñando la interfaz de usuario y no la lógica de la aplicación. En caso de que alguien quiera que su aplicación haga algo, definitivamente habrá algún código en los archivos anteriores, pero para este ejemplo, así es como se ve nuestro MainActivity.kt :

package com.example.motionlayoutgfg1
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
    class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    }
}

Ejecutar como emulador

Dado que en nuestro archivo new_xml.xml   definimos que nuestra transición de animación se llevará a cabo cuando deslizamos hacia arriba (arrastrar hacia arriba), así es como se ve nuestra salida cuando lo hacemos.