Uso de Kotlin + Android Jetpack para crear una grabadora de llamadas moderna: Capítulo 1 | Autor: Miki Mendelson | Agosto de 2021
Comencemos por construir una interfaz de usuario básica para nuestro proyecto. Antes de profundizar en el código, es importante tener en cuenta algunos puntos clave:
- Tradicionalmente, Android usa actividades y fragmentos para separar pantallas y transmisiones independientes. En Compose, las aplicaciones están diseñadas para ejecutarse en una arquitectura de actividad única.Esto facilita la introducción de flujos de navegación complejos. Redactar navegación, Toda la lógica de navegación es manejada por Compose runtime.
- Esto también significa que las actividades estándar y los ciclos de vida de los fragmentos no son aplicables aquí. En cambio, Compose define diferentes efectos secundarios que pueden actuar como devoluciones de llamada del ciclo de vida. Más información aquí.
Modelo de datos: En los siguientes capítulos, usaremos la biblioteca de persistencia de Room para guardar y recuperar grabaciones de llamadas, pero ahora definiremos un modelo de datos simple para interactuar con la UI:
También proporcionaremos una forma sencilla de generar datos ficticios, solo con fines de visualización:
Puedes encontrar el completo CallRecording.kt El archivo está aquí.
Pantalla principal
Nuestra pantalla de inicio será muy simple, con solo una barra de herramientas con títulos y una lista desplazable de grabaciones de llamadas.Al hacer clic en una grabación específica se abrirá Pantalla de detalles¡Cosas muy simples!
Bien, prepárate primero, agreguemos algunas dependencias en nuestro nivel de aplicación build.gradle :
coreLibraryDesugaringEnabled con desugar_jdk_libs Necesita habilitar Java 8+ API (a través de desugar) sin un nivel mínimo de API de Android. Otras dependencias son para el soporte de Jetpack Compose, extensiones de Kotlin (core-ktx) Y biblioteca de apoyo.
Finalmente, agregue compose_version Variables de nivel superior build.gradle documento:
¡Por fin es hora de escribir nuestro primer Composable!Recuerde, en Redactar, los elementos de la interfaz de usuario son funciones anotadas @ComposableY gestiona tu estado local. Veamos cómo se verá nuestra lista de grabaciones:
Como antes, presentaremos cada componente aquí en detalle.
RecordingListLista recibidaCallRecordingarenaonClickEl oyente manejará el evento de clic del elemento de la lista.- Usamos uno
LazyColumnPuede combinarse, equivalente aRecyclerViewEn el sistema de visualización de Android.estaLazyColumnSimilar aColumnElementos, la principal diferencia es que los elementos de la primera lista de carga solo aparecen cuando aparecen en la pantalla. - Dado que cargamos elementos en la pantalla de forma perezosa,
LazyColumnNo se aceptan bloques combinables.En cambio, define un DSL de alcance de lista diferida Esto nos permite describir cómo Crea elementos.En nuestro ejemplo, usamositemsIndexedMétodo, recibe nuestra lista de elementos y envía los elementos combinados que conocen su índice en la lista. Si no está familiarizado con DSL en Kotlin, lea más aquí. - Finalmente, nuestra lista también necesita recordar su estado de desplazamiento. recordar El elemento combinado siempre se puede reconstruir, por lo que si la lista no conoce su estado de desplazamiento final, cada nuevo dibujo del elemento combinado hará que la interfaz de usuario «salte» a la parte superior de la lista.Para esto usamos
rememberLazyListState(), Crea un objeto de estado que podemos pasar a la lista diferida. Espero que discutamos los objetos de estado con más detalle en un capítulo posterior 🙂.
Ahora, definamos la apariencia de un solo elemento de grabación en la lista, nuestro RecordingItem Puede combinarse:
Bien, veamos lo que sucedió aquí en detalle nuevamente:
- Modificador: Los modificadores son una forma muy conveniente de agregar un comportamiento adicional a los elementos de la interfaz de usuario de Compose. ¿Qué es comportamiento extra? Bueno, puede ser el tamaño, la forma, la semántica, el borde (relleno) y el movimiento del elemento. También se puede usar para agregar diferentes interacciones de usuario, como presionar, enfocar, etc. Lea sobre esto y vea la lista completa de modificadores disponibles aquí.
También vale la pena señalar que la interfaz Modifier es fluidoSi no está familiarizado con este concepto, no se preocupe, significa que la interfaz admite cadenas de métodos, porque cada método devuelve la instancia que lo llamó (this).
Por ejemplo, considere el modificador que le damos al nivel superiorCardelemento:Modifier.fillMaxWidth().clickable(onClick = onClick). Este modificador significa «hacer que este elemento ocupe el ancho máximo de la pantalla y hacer que se pueda hacer clic en élonClickActuar como un oyente de clics «. - elemento: Aquí usamos
CardElementos de la biblioteca Compose Material, nos proporciona una tarjeta de Material Design.También utilizamos autoexplicativosRowDisposición horizontal de elementosBoxconColumn. estaBoxEl elemento contiene un icono que indica el tipo de llamada grabada yColumnEnumere alguna información de texto (el número de teléfono / nombre del contacto asociado con la llamada y la duración de la grabación). También definimos algunos métodos de extensión para hacer que el código sea más legible y detallado. Usted puede encontrarlos aquí. - Tematización: esta
styleAtributos pasados aTextEl elemento nos permite controlar la apariencia del texto.MaterialThemeAlmacena temas de toda la aplicación y nos da acceso a estilos de diseño, tipografía y color. Más información aquí. Por ahora, no discutiremos demasiado el tema, pero exploraremos el tema en profundidad en el próximo capítulo, ¡cuando volvamos a visitar nuestra aplicación!
Vista previa de la interfaz de usuario: Ahora que hemos completado principalmente la parte principal de la interfaz de usuario, queremos obtener una vista previa de la apariencia de nuestro componente hasta ahora.Afortunadamente, Compose nos proporciona opciones listas para usar @Preview ¡anotación!
Al definir el componente de vista previa, definimos un @Composable Función sin parámetros. Por lo tanto, todos los parámetros iniciales deben conocerse de antemano.Podemos obtener una vista previa de nuestro RecordingItem Cree un elemento pasando una grabación virtual usando la función que creamos anteriormente:
Cree el proyecto y vea la pantalla de diseño en Android Studio, deberíamos obtener lo siguiente:
¡se ve muy bien! Unámoslo todo reescribiendo la actividad principal:
Agregamos un TopBar Mostrar solo el elemento del título, hemos inicializado nuestro RecordingList Hay 100 grabaciones virtuales. Cuando se presiona el elemento de registro, mostraremos una barra de refrigerio de verificación de cordura.Nuestro diseño encapsula un Surface, Responsable de aplicar el color de fondo a la aplicación, Scaffold , Que maneja la apariencia estructurada de las páginas de Material Design, y RecordioTheme ,Esto es un MaterialTheme Generado por AndroidStudio para nuestra aplicación. Discutiremos esto en profundidad en los siguientes capítulos.
Finalmente, ejecutamos la aplicación y primero miramos nuestra creación:
![4.1 UI ahora disponible para Samsung Galaxy S21, Z Fold3 y Flip3 [Attualmente disponibile solo in Corea e Canada] | Por Smart Reports | Marzo de 2022](https://sistemaandroid.info/wp-content/uploads/2022/03/1647535437_41-UI-ahora-disponible-para-Samsung-Galaxy-S21-Z-Fold3-220x150.jpg "4.1 UI ahora disponible para Samsung Galaxy S21, Z Fold3 y Flip3 [Attualmente disponibile solo in Corea e Canada] | Por Smart Reports | Marzo de 2022 11")
