1. Antes de comenzar
¡Felicitaciones! En esta ruta de aprendizaje, aprendiste a hacer que tu app se adapte mediante la clase WindowWidthSize
y el diseño canónico. Ahora es momento de poner en práctica lo que aprendiste.
En este conjunto de práctica, crearás una app de Deportes para desarrollar los conceptos que aprendiste en esta ruta de aprendizaje. La app de inicio es completamente funcional para un diseño para dispositivos móviles. Tu tarea es hacer que se adapte a las pantallas grandes.
El código de la solución estará disponible al final, pero intenta resolver los ejercicios antes de consultarlo. Realiza los ejercicios a un ritmo que te resulte cómodo. Se muestran las duraciones, pero no es necesario que las cumpla ya que son solo estimados. Tómate todo el tiempo que necesites para resolver cuidadosamente cada problema.
Requisitos previos
- Completa los cursos de Aspectos básicos de Android en Compose con los codelabs Cómo compilar una app adaptable con navegación dinámica y Cómo compilar una app adaptable con diseño adaptable.
Requisitos
- Una computadora con acceso a Internet y Android Studio instalado
- Acceso a GitHub
Qué compilarás
Una app de Deportes que se adapte a una pantalla grande. La app finalizada se verá como la siguiente imagen:
2. Primeros pasos
Descarga el código de inicio
En Android Studio, abre la carpeta basic-android-kotlin-compose-practice-sports-app
.
- Navega a la página de repositorio de GitHub del proyecto.
- Verifica que el nombre de la rama coincida con el especificado en el codelab. Por ejemplo, en la siguiente captura de pantalla, el nombre de la rama es main.
- En la página de GitHub de este proyecto, haz clic en el botón Code, el cual abre una ventana emergente.
- En la ventana emergente, haz clic en el botón Download ZIP para guardar el proyecto en tu computadora. Espera a que se complete la descarga.
- Ubica el archivo en tu computadora (probablemente en la carpeta Descargas).
- Haz doble clic en el archivo ZIP para descomprimirlo. Se creará una carpeta nueva con los archivos del proyecto.
Abre el proyecto en Android Studio
- Inicia Android Studio.
- En la ventana Welcome to Android Studio, haz clic en Open.
Nota: Si Android Studio ya está abierto, selecciona la opción de menú File > Open.
- En el navegador de archivos, ve hasta donde se encuentra la carpeta de proyecto descomprimido (probablemente en Descargas).
- Haz doble clic en la carpeta del proyecto.
- Espera a que Android Studio abra el proyecto.
- Haz clic en el botón Run
para compilar y ejecutar la app. Asegúrate de que funcione como se espera.
3. Planifica cómo adaptar la app de Deportes para pantallas grandes
A fin de adaptar la app de Deportes para pantallas grandes, primero debes establecer el tipo de diseño que mejor muestre la app en pantallas grandes.
- Comienza a revisar los diseños actuales disponibles en el tamaño de pantalla compacta. Hay dos pantallas: la pantalla de lista, que corresponde al elemento de componibilidad
SportsList
, y la pantalla de detalles, que corresponde al elemento de componibilidadSportsDetail
.
- Revisa el diseño canónico para determinar cuál se ajusta mejor al caso de uso de la app de Deportes.
- Dibuja un posible diseño de pantalla expandida. Usa un software de diseño visual simple o una hoja de papel para visualizar cómo las pantallas encajan en el diseño expandido.
4. Crea la pantalla expandida en el código
Ahora que tienes una vista clara del aspecto del diseño expandido, traduzcamos eso al código.
- Crea un elemento componible para la pantalla expandida que muestra la lista y la pantalla de detalles. Puedes asignarle el nombre
SportsListAndDetails
y colocarlo en el archivoSportsScreens.kt
. - Crea una vista previa de componibilidad a fin de simplificar la verificación de la IU del elemento de componibilidad
SportsListAndDetails
.
- Asegúrate de que el comportamiento del botón Atrás sea apropiado para la pantalla expandida. Cuando el usuario presione el botón Atrás, querrás que salga de la app cuando aparezca la pantalla principal. Puedes cambiar este comportamiento si pasas la lambda apropiada al elemento
SportsDetails
de componibilidad. Sugerencia: Puedes tener acceso a laActivity
de la app desde(LocalContext.current as Activity)
.
5. Cómo hacer que la app cambie a un diseño diferente según el tamaño de la ventana
Para agregar el elemento de pantalla expandida de componibilidad a la app, completa las siguientes tareas:
- Agrega
androidx.compose.material3:material3-window-size-class
albuild.gradle
de la app. - Calcula
windowSizeClass
enMainActivity
y pasawidthSizeClass
al elemento de componibilidadSportsApp
. - Crea un directorio nuevo llamado
utils
y un nombre de archivo nuevoWindowStateUtils.kt
. - Agrega una clase
enum
enWindowStateUtils
para denotar doscontentType
diferentes. Puedes nombrarlos tiposListOnly
yListAndDetail
. - En el elemento
SportsApp
de componibilidad, determinacontentType
en función dewidthSizeClass
. - Muestra el elemento
SportsListAndDetails
de componibilidad cuandocontentType
esListAndDetail
y conserva el comportamiento anterior cuando el contentType esListOnly
. - Para el elemento
SportsAppBar
de componibilidad, cambia el comportamiento para que no aparezca el botón Atrás y la barra de la app muestre Deportes cuando se expanda la pantalla en la página de la lista. - Verifica la IU y las capacidades de navegación para pantallas compactas y expandidas con el emulador que puede cambiar de tamaño.
6. Obtén el código de la solución
Para descargar el código del codelab terminado, puedes usar este comando de git:
$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-sports.git
También puedes descargar el repositorio como un archivo ZIP, descomprimirlo y abrirlo en Android Studio.
Si deseas ver el código de la solución, puedes hacerlo en GitHub.