Práctica: Compila una app de deportes

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.

1. Navega a la página de repositorio de GitHub del proyecto.
2. 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.

3. En la página de GitHub de este proyecto, haz clic en el botón Code, el cual abre una ventana emergente.

4. 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.
5. Ubica el archivo en tu computadora (probablemente en la carpeta Descargas).
6. 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

1. Inicia Android Studio.
2. 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.

3. En el navegador de archivos, ve hasta donde se encuentra la carpeta de proyecto descomprimido (probablemente en Descargas).
4. Haz doble clic en la carpeta del proyecto.
5. Espera a que Android Studio abra el proyecto.
6. 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.

1. 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 componibilidad SportsDetail.

2. Revisa el diseño canónico para determinar cuál se ajusta mejor al caso de uso de la app de Deportes.
3. 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.

1. 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 archivo SportsScreens.kt.
2. Crea una vista previa de componibilidad a fin de simplificar la verificación de la IU del elemento de componibilidad SportsListAndDetails.

3. 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 la Activity 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:

1. Agrega androidx.compose.material3:material3-window-size-class al build.gradle de la app.
2. Calcula windowSizeClass en MainActivity y pasa widthSizeClass al elemento de componibilidad SportsApp.
3. Crea un directorio nuevo llamado utils y un nombre de archivo nuevo WindowStateUtils.kt.
4. Agrega una clase enum en WindowStateUtils para denotar dos contentType diferentes. Puedes nombrarlos tipos ListOnly y ListAndDetail.
5. En el elemento SportsApp de componibilidad, determina contentType en función de widthSizeClass.
6. Muestra el elemento SportsListAndDetails de componibilidad cuando contentType es ListAndDetail y conserva el comportamiento anterior cuando el contentType es ListOnly.
7. 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.
8. 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.

file_downloadDescargar ZIP

Si deseas ver el código de la solución, puedes hacerlo en GitHub.