Componentes de la interfaz de usuario de Android Jetpack

Android Jetpack es un conjunto de componentes de software, bibliotecas , herramientas y orientación para ayudar a desarrollar aplicaciones sólidas de Android . Lanzado por Google en 2018 , Jetpack comprende bibliotecas de soporte de Android existentes, componentes de arquitectura de Android con una adición de la biblioteca Android KTX como una sola entidad modular. Hoy en día, casi el 99 % de las aplicaciones presentes en Google Play Store utilizan las bibliotecas de Android Jetpack. El área de la interfaz de usuarioincluye widgets, animaciones, paletas, etc para mejorar la experiencia del usuario. También proporciona fuentes de emoji actualizadas para usar en las aplicaciones. Este artículo explica en detalle todas y cada una de las bibliotecas del componente UI. Jetpack consta de una amplia colección de bibliotecas que se construyen de manera que funcionen juntas y creen aplicaciones móviles sólidas. Sus componentes de software se han dividido en 4 categorías:

1. Componentes de cimentación
2. Componentes de arquitectura
3. Componentes de comportamiento
4. Componentes de la interfaz de usuario

Además, la siguiente es la lista de todos los componentes de la interfaz de usuario:

1. Animación y Transición
2. Auto
3. emoticonos
4. Fragmento
5. Diseño
6. Paleta
7. TELEVISOR
8. Tener puesto

Formas de incluir bibliotecas de Android Jetpack en la aplicación

• Agregue el repositorio de Google en el archivo build.gradle del proyecto de la aplicación.

todos los proyectos {

repositorios {

    Google()

    jcenter()

    }

}

• Todos los componentes de Jetpack están disponibles en el repositorio de Google Maven, inclúyelos en el archivo build.gradle

todos los proyectos {

repositorios {

    jcenter()

    experto {url ‘https://maven.google.com’}

     }

}

Componentes de la interfaz de usuario

1. Animación y Transición

Jetpack ofrece API para configurar diferentes tipos de animaciones disponibles para aplicaciones de Android. Este marco imparte la capacidad de mover widgets, así como cambiar entre pantallas con animación y transición en una aplicación. Para mejorar la experiencia del usuario, se utilizan animaciones para animar los cambios que ocurren en una aplicación y el marco de transición permite configurar la apariencia de ese cambio. Los desarrolladores pueden administrar la forma en que la transición modifica la apariencia de la aplicación al cambiar de una pantalla a otra. Jetpack componeres el conjunto de herramientas utilizado para crear una interfaz de usuario nativa de Android. Ofrece un enfoque más modular para desarrollar las aplicaciones al organizar el código en componentes más pequeños y reutilizables. Estos componentes son fáciles de mantener y el código escrito en ellos describe la apariencia de una interfaz de usuario de forma declarativa, es decir, en función del estado disponible. Los desarrolladores usan esta naturaleza declarativa de Jetpack Compose para mostrar animaciones complejas de una manera hermosa y expresiva.   

Se utiliza una transición  llamada componible para crear animaciones en Android . Su naturaleza flexible permite a los desarrolladores pasar fácilmente la información al usuario mediante la animación de la propiedad de un componente. Los siguientes son los elementos involucrados en Transition componible que controla la animación general de un componente:

• TransitionDefinition: incluye la definición de todas las animaciones, así como los diferentes estados de animación necesarios durante la transición.
• initState: describe la etapa inicial de la transición. Si no está definido, toma el valor del primer toState disponible en la transición.
• toState: describe el siguiente estado de la transición. 
• clock: Gestiona la animación con el cambio de hora. Es un parámetro opcional.
• onStateChangeFinished: un oyente opcional que notifica la finalización de una animación de cambio de estado.
• niños: Es componible que será animado.

Firma del método de transición:

@Componible

divertido <T> Transición(

   definición: Definición de transición<T>,

   al Estado: T,

   reloj: AnimationClockObservable = AnimationClockAmbient.current,

   initState: T = aState,

   onStateChangeFinished: ((T) -> Unidad)? = nulo,

   niños: @Composable() (estado: TransitionState) -> Unidad

)

Android Jetpack proporciona algunos creadores de animación predefinidos que los desarrolladores pueden usar directamente en su aplicación. La TransitionDefinition incluye el código para todas estas animaciones.

1. Tween: Para animar los cambios geométricos de un objeto como mover, rotar, estirar, etc.
2. Física : para definir animaciones de resorte para un objeto al proporcionar una relación de amortiguamiento y rigidez.
3. Fotograma clave: para crear una animación en la que el valor del objeto de destino cambia a lo largo del tiempo. 
4. Snap: para animar el cambio instantáneo de un estado a otro.  
5. Repetible: Se utiliza para repetir una animación tantas veces como quiera el desarrollador.

2. Automático

Hoy en día, las personas dependen de las aplicaciones de los teléfonos inteligentes hasta tal punto que las necesitan incluso mientras conducen. El motivo de uso del teléfono móvil puede ser una llamada urgente o simplemente disfrutar de la música. Google se dio cuenta de este caso de uso y desarrolló Android Auto con la visión de minimizar la interacción del conductor con el teléfono, así como de garantizar seguridad y protección en la carretera. La tarea es llevar las aplicaciones más prácticas al teléfono inteligente del usuario o en la pantalla del automóvil compatible. Android Auto ofrece una extensa lista de aplicaciones para usar cómodamente en la pantalla del vehículo. La siguiente categoría de aplicaciones se puede crear, probar y distribuir en Android Auto:      

1. Aplicaciones de navegación: la interfaz de navegación de Google Maps permite al usuario establecer destinos, elegir varias rutas y ver el tráfico en vivo. Asiste al conductor a través de instrucciones de conducción guiadas por voz en cada giro y también estima la hora de llegada al destino. Esta aplicación continúa ejecutándose en segundo plano incluso si el usuario cambia a otra pantalla. Además, los usuarios también pueden establecer otros intereses en esta aplicación, como estacionamiento y ubicación de estaciones de servicio, restaurantes, etc.
2. Aplicaciones de mensajería: enviar mensajes o llamar a alguien es probablemente lo más peligroso mientras se conduce. Para solucionar este problema, Android Auto proporciona aplicaciones de mensajería que reciben mensajes/notificaciones y los leen en voz alta mediante la función de texto a voz. Los usuarios también pueden enviar respuestas a través de la entrada de voz en el automóvil. Para activar los comandos de voz de manos libres en Android Auto, uno puede presionar el botón «hablar» en el volante o puede activar el dispositivo diciendo «Ok Google».
3. Aplicaciones multimedia: este tipo de aplicaciones permite a los usuarios navegar y reproducir cualquier tipo de contenido de audio en el automóvil. Acepta comandos de voz para reproducir radio, música o audiolibros.       

Nota: Android Auto solo es compatible con teléfonos con Android 6.0 (API nivel 23) o superior. 

Las bibliotecas de Jetpack ofrecen dos opciones para desarrollar aplicaciones de Android para automóviles, a saber, Android Auto y Android Automotive OS . Las aplicaciones de Android Auto junto con un teléfono Android son capaces de proporcionar una experiencia de aplicación optimizada para el conductor. Por otro lado, Android Automotive OS es un sistema de información y entretenimiento basado en Android que está integrado en los vehículos. Con esto, el coche se convierte en un dispositivo Android autosuficiente que puede ejecutar aplicaciones directamente en la pantalla del coche. Los desarrolladores prefieren una arquitectura de aplicación mientras crean aplicaciones para cubrir ambos casos de uso.     

3. emojis

Si una aplicación se usa para comunicarse entre personas, los emojis definitivamente serán parte de esa aplicación. El estándar Unicode agrega nuevos emojis con mucha frecuencia, por lo que es importante que el usuario pueda ver los últimos emoji independientemente de la versión del dispositivo Android. Google ha lanzado una nueva biblioteca llamada EmojiCompat para manejar los caracteres emoji y utilizar la compatibilidad con fuentes descargables. Esta biblioteca asegura que una aplicación esté actualizada con los emojis más recientes, independientemente de la versión del sistema operativo del dispositivo. EmojiCompat identifica un emoji usando su CharSequence y los reemplaza con EmojiSpans(si es necesario) para garantizar que el remitente y el receptor observarán el emoji exactamente de la misma manera. Los usuarios deben actualizar esta dependencia de la biblioteca regularmente para tener los emojis más recientes. Si una aplicación no usa la biblioteca EmojiCompat, el usuario verá un cuadro vacío con el signo de cruz (☒) en lugar de un emoji. La compatibilidad con versiones anteriores de esta biblioteca es hasta Android 4.4 (API nivel 19) . Para la versión del sistema operativo Android inferior a esa, el emoji se mostrará exactamente como un TextView normal .

Agregar la biblioteca de soporte de EmojiCompat al proyecto: 

• Agregue la implementación mencionada a continuación en el archivo build.gradle de nivel de aplicación. 

   dependencias {

       …..

       …..

       implementación “androidx.emoji:emoji:28.0.0”

   }

• Para usar Emoji Widgets en AppCompat, agregue la biblioteca de soporte de AppCompat a la sección de dependencias

dependencias {

       …..

       …..

       implementación “androidx.emoji:emoji-appcompat:$versión”

   }

Vistas de Emoji / Widgets:

Widget	Clase
EmojiTextView	android.support.text.emoji.widget.EmojiTextView
EmojiEditar Texto	android.support.text.emoji.widget.EmojiEditText
EmojiBotón	android.support.text.emoji.widget.EmojiButton
EmojiAppCompatTextView	android.support.text.emoji.widget.EmojiAppCompatTextView
EmojiAppCompatEditText	android.support.text.emoji.widget.EmojiAppCompatEditText
EmojiAppCompatButton	android.support.text.emoji.widget.EmojiAppCompatButton

4. Fragmento

La clase de soporte Fragment de Android se ha desplazado a este segmento de Jetpack. Los fragmentos permiten separar la interfaz de usuario en piezas discretas que aportan modularidad y reutilización a la interfaz de usuario de una actividad . Una parte de la interfaz de usuario se define mediante un fragmento que luego se integra en una actividad. No hay existencia de fragmentos sin actividad. Con el lanzamiento de Android Jetpack, Google proporcionó algunas mejoras importantes y funciones avanzadas en el uso de fragmentos. Navegación , BottomNavigationView y ViewPager2La biblioteca del Jetpack está diseñada para trabajar con fragmentos de una manera mucho más efectiva. Además, también se garantiza la integración adecuada de la clase de fragmento con la clase de ciclo de vida del componente de arquitectura jetpack . La siguiente es la lista de funciones y mejoras recientemente agregadas por Google para desarrolladores de Android:

una. Compartir y comunicarse entre fragmentos:

Para mantener los fragmentos independientes, los desarrolladores escriben código de tal manera que no permite que los fragmentos se comuniquen directamente con otros fragmentos o con su actividad de host. La biblioteca de fragmentos de Jetpack ofrece dos opciones para establecer la comunicación: API de resultados de fragmentos y ViewModel compartido . La API de Fragment Rest es adecuada para resultados únicos con datos que podrían acomodarse en un paquete. Además, si existe un requisito para compartir datos persistentes junto con cualquier API personalizada, se prefiere ViewModel. También es capaz de almacenar y administrar datos de la interfaz de usuario. Los desarrolladores pueden elegir entre los dos enfoques según los requisitos de la aplicación. 

b. Constructor puede contener el ID de recurso de diseño:

AndroidX AppCompat 1.1.0  y Fragment 1.1.0 permiten que el constructor tome el ID de diseño como parámetro. Con esto, se observa una disminución considerable en el número de anulaciones de método en fragmentos. Ahora, el inflador se puede llamar manualmente para inflar la vista de un fragmento, sin anular el método onCreateView() . Esto hace que las clases sean más legibles. 

clase MiFragmentoActividad: FragmentoActividad(R.layout.mi_fragmento_actividad)

clase Mi Fragmento: Fragmento (R.layout.my_fragment)

C. FragmentManager y biblioteca de navegación:

La clase FragmentManager lleva a cabo todas las tareas cruciales de un fragmento, como agregar, eliminar, reemplazar y devolverlos a la pila . Para manejar todas estas tareas relacionadas con la navegación, Jetpack recomienda usar la biblioteca de navegación . El marco de esta biblioteca proporciona algunas de las mejores prácticas para que los desarrolladores puedan trabajar de manera efectiva con fragmentos, el administrador de fragmentos y la pila de actividades. Cada aplicación de Android que contiene fragmentos en su interfaz de usuario debe usar FragmentManager en algún nivel. Sin embargo, es posible que los desarrolladores no interactúen directamente con FragmentManager mientras usan la biblioteca Jetpack Navigation.

d. Fábrica de fragmentos: 

Los desarrolladores de Android siempre habían planteado el problema con Fragmentos de que no existe la posibilidad de usar un constructor con argumentos. Por ejemplo, los desarrolladores no pueden anotar el constructor de fragmentos con Inyectar y especificar los argumentos mientras usan Dagger2 para la inyección de dependencia . La biblioteca de AndroidX presentada junto con Jetpack ofrece la clase FragmentFactory que es capaz de manejar este y otros problemas similares relacionados con la creación de fragmentos. La estructura de esta API es sencilla y generalizada, lo que facilita a los desarrolladores crear la instancia de fragmento a su manera personalizada. Para anular la forma predeterminada de instanciar el Fragmento, se debe registrar FragmentFactory en el FragmentManager de la aplicación.

clase MiFragmentoFactory: FragmentoFactory() {

 anular la instancia de diversión (classLoader: ClassLoader, className: String): Fragmento {

   // se llama al método loadFragmentClass() para adquirir el objeto Class

   val fragmentClass = loadFragmentClass(classLoader, className)

     

   // usa className o fragmentClass como argumento para definir el    

   // forma preferida de instanciar el objeto Fragmento

   devuelve super.instantiate(classLoader, className)

 }

}

mi. Fragmentos de prueba:

Google ha lanzado AndroidX Test para que las pruebas sean una parte necesaria de Jetpack. Las bibliotecas existentes, junto con algunas API nuevas y la compatibilidad completa con Kotlin de AndroidX Test, brindan una forma de escribir pruebas adecuadas y concisas. La clase FragmentScenario de la biblioteca de AndroidX construye el entorno para realizar pruebas en fragmentos. Consta de dos métodos principales para lanzar fragmentos en una prueba, el primero es launchInContainer() que se usa para probar la interfaz de usuario de un fragmento. Otro método es el lanzamiento()que se utiliza para realizar pruebas sin la interfaz de usuario del fragmento. En algunos casos, los fragmentos tienen algunas dependencias. Para generar versiones de prueba de estas dependencias, se debe proporcionar una FragmentFactory personalizada a los métodos launchInContainer() o launch(). Los desarrolladores pueden elegir uno de los métodos y pueden usar las pruebas de interfaz de usuario de Espresso para verificar la información sobre los elementos de interfaz de usuario del fragmento. Para usar la clase FragmentScenario, es necesario definir el artefacto de prueba de fragmentos en el archivo build.gradle del nivel de la aplicación.

dependencias {

   def versión_fragmento = “1.2.5”

   debugImplementation «androidx.fragment:fragment-testing:$fragment_version»

}        

F. Vista de contenedor de fragmentos:

AndroidX Fragment 1.2.0 trae FragmentContainerView que amplía FrameLayout y proporciona un diseño de diseño personalizado para los fragmentos en las aplicaciones de Android. Se utiliza como padre del fragmento para que pueda coordinarse con el comportamiento del fragmento e introducir flexibilidad en tareas como Fragment Transactions . También es compatible con los atributos <fragment> y soluciona los problemas de envío de inserciones de ventana . Además, este contenedor resuelve algunos problemas de animación relacionados con el orden z de fragmentos, como que los fragmentos existentes ya no aparecen en la parte superior de la vista. 

5. Diseño

La estructura de la interfaz de usuario, como la actividad de una aplicación, está definida por Layout . Define los objetos View y ViewGroup . View y ViewGroup se pueden crear de dos formas: declarando elementos de la interfaz de usuario en XML o escribiendo código, es decir, mediante programación. Esta parte de Jetpack cubre algunos de los diseños más comunes, como LinearLayout , RelativeLayout y el nuevo ConstraintLayout. Además, la documentación oficial de Jetpack Layout brinda orientación para crear una lista de elementos con RecyclerView y el diseño de la tarjeta con CardView . Una vista es visible para el usuario. Vista de edición , Vista de textoy Button son ejemplos de View. Por otro lado, un ViewGroup es un objeto contenedor que define la estructura de diseño para las vistas y, por lo tanto, es invisible. Ejemplos de ViewGroup son LinearLayout, RelativeLayout y ConstraintLayout.

6. Paleta

Proporcionar la combinación de colores correcta juega un papel importante en la mejora de la experiencia del usuario. Por lo tanto, es un aspecto importante durante el proceso de desarrollo de aplicaciones. Los desarrolladores suelen crear aplicaciones en las que los elementos de la interfaz de usuario cambian de color según la hora (día y noche). Este tipo de práctica brinda al usuario una buena sensación y asegura una experiencia inmersiva durante el uso de la aplicación. Para llevar a cabo estas tareas, Android Jetpack proporciona una nueva biblioteca de soporte de paletas . Es capaz de extraer un pequeño conjunto de colores de una imagen. El estilo de color extraído controla la interfaz de usuario de la aplicación y actualiza los íconos según el color de la imagen de fondo. El diseño de materialesde las aplicaciones de Android es la razón detrás de la popularidad del uso dinámico del color. El color o la paleta extraídos contiene tonos vibrantes y apagados de la imagen. También incluye colores de texto de primer plano para garantizar la máxima legibilidad.              

Para incluir Palette API en un proyecto, actualice el archivo build.gradle de nivel de aplicación de la siguiente manera:

dependencias {

   …..

   …..

   implementación ‘androidx.palette:palette:1.0.0’  

}

La paleta ofrece a los desarrolladores la opción de seleccionar la cantidad de colores que desean generar a partir de una determinada fuente de imagen. El valor predeterminado de numberOfColors en la paleta resultante se establece en 16. Sin embargo, el recuento puede llegar hasta 24-32. El tiempo necesario para generar la paleta completa es directamente proporcional a la cantidad de colores. Una vez que se genera la paleta, se utiliza una muestra (una especie de método) para acceder a esos colores. Cada perfil de color tiene una muestra asociada que devuelve el color de esa paleta. Los siguientes son los perfiles de color generados por la paleta API:

Perfil	Muestra de tela
luz vibrante	Paleta.getLightVibrantSwatch()
Vibrante	Paleta.getVibrantSwatch()
oscuro vibrante	Paleta.getDarkVibrantSwatch()
Luz silenciada	Paleta.getLightMutedSwatch()
Apagado	Palette.getMutedSwatch()
oscuro silenciado	Paleta.getDarkMutedSwatch()

7. televisión

Jetpack ofrece varios componentes clave para ayudar a los desarrolladores a crear aplicaciones para televisores inteligentes con Android . La estructura de la aplicación de Android TV es la misma que la de las aplicaciones para dispositivos móviles/tabletas; sin embargo, existen algunas diferencias obvias. El hardware y los controladores de un televisor son muy diferentes a los de los dispositivos móviles. Además, el sistema de navegación debe manejarse a través de un d-pad en una TV remove (botones de flecha arriba, abajo, izquierda y derecha). Para abordar estas inquietudes, Jetpack ofrece la biblioteca Leanback . Esta biblioteca también resuelve el problema de buscar y recomendar contenido al usuario en Android TV.

La dependencia de la biblioteca Leanback se puede agregar en el archivo build.gradle de la aplicación :

dependencias {

   def versión_leanback = “1.0.0”

   implementación “androidx.leanback:leanback:$leanback_version”

}

8. Usar sistema operativo

La versión de Android para dispositivos portátiles se llama Wear OS . Android Jetpack incluye la biblioteca Wear UI que permite a los desarrolladores crear aplicaciones que pueden reproducir y controlar medios desde un reloj. También se puede crear una aplicación de reloj independiente o una esfera de reloj utilizando el componente de interfaz de usuario de la biblioteca. Jetpack asegura que la interfaz de usuario permanezca optimizada y compatible en todas las aplicaciones. Wear OS también admite funciones de dispositivos móviles como notificaciones y ‘acciones en Google’. Los desarrolladores pueden desarrollar tres tipos de sistemas bajo Wear OS:

1. Aplicaciones de uso: aplicaciones que se ejecutarán en relojes inteligentes o engranajes. Es compatible con funciones del dispositivo como sensores y la GPU.
2. Carátulas del reloj: está especialmente diseñado para dibujos personalizados, colores, animaciones e información contextual.
3. Proveedores de datos de complicaciones: proporciona datos personalizados, como texto, imágenes, etc., para mirar caras.  

La biblioteca de interfaz de usuario de Wear se puede usar agregando la siguiente dependencia en el archivo build.gradle del módulo Wear :

dependencias {

   …..

   …..

   compilar ‘androidx.wear:wear:1.0.0’

}