Aplicación de Android Parte 1: Pantalla de bienvenida con fragmentos / Kotlin: 5 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

Hola de nuevo, lo más probable es que tenga algo de tiempo "libre" en casa debido a COVID19 y pueda volver a revisar los temas que deseaba aprender en el pasado.

El desarrollo de aplicaciones para Android es definitivamente uno de ellos para mí y hace unas semanas decidí intentarlo por segunda vez.

La programación en Kotlin definitivamente reduce el esfuerzo de codificación y ayuda a lograr resultados en un tiempo bastante corto. ¡Es realmente genial!

En esta serie de tutoriales, explicaré cómo desarrollar un Tennis Score Tracker. Esta aplicación se puede utilizar cuando juegas con amigos y / o familiares (puedes darle la tableta a tu hijo y mantenerlo ocupado:)). Esta aplicación se basa en el siguiente ejemplo de Kotlin Counter.

El tutorial tiene las siguientes partes:

Parte 1: pantalla de bienvenida usando fragmentos (estamos aquí ahora)

Parte 2: Configuración de coincidencias - Propiedades

Parte 3: rastreador de puntuación de partido

La idea principal es dividir la aplicación en 3 pantallas diferentes, cada una de las cuales llamará a la siguiente, una vez completada o cuando el usuario presione el botón respectivo.

En esta primera parte, explicaré cómo crear una pantalla de introducción -> ver el video de arriba.

Suministros

Funciones de Android utilizadas en esta parte:

• Fragmentos
• Animación
• Vibración
• Reproductor multimedia
• Oyentes

Herramientas necesarias:

• Estudio de Android
• Kotlin 1.3.61
• Nivel de API 28

Activos requeridos

Un archivo de sonido de pitido

Paso 1: Diseño de la experiencia del usuario

Expliquemos las características de nuestra pantalla de introducción.

1. queremos tener una pantalla completa en color blanco
2. queremos tener la pantalla siempre en modo paisaje
3. queremos nuestro logo-texto en color gris
4. queremos nuestro color de bola en tonos de verde
5. Queremos que el texto de nuestro logo se desvanezca
6. queremos una pelota de tenis moviéndose en la pantalla (pelota que rebota)
7. queremos reproducir un sonido cada vez que la pelota toque una superficie
8. queremos activar una vibración en el teléfono cuando se reproduce un sonido
9. queremos que la duración de la introducción sea inferior a 4 segundos.

Paso 2: Administrador de fragmentos y 3 pantallas

Recordemos la idea principal de nuestra App, queremos tener 3 pantallas (Intro, Properties y Match Score). Para esto usaremos Fragments. Entonces necesitamos 3 de ellos, uno para cada pantalla. Consulte el primer fragmento de código.

En el segundo, podemos encontrar cómo llamamos a nuestro primer fragmento. El fragmento de Splash es el que se utilizará para nuestra introducción.

Paso 3: Aplicación y diseño de la pantalla de introducción

• Para arreglar la posición de la pantalla e ignorar cualquier rotación del teléfono, necesitamos agregar el siguiente código Imagen 1 en AndroidManifest.xml.
• Para eliminar la barra de acción de todas las pantallas, debemos agregar el siguiente código Imagen 2 en styles.xml
• Para impulsar la pantalla completa en todas las pantallas, necesitamos establecer algunas banderas como en la Imagen 3 en 2 métodos diferentes. Oncreate () y onWindowFocusChanged.

Paso 4: Definición de logotipo y estilo de bola

• definimos antes de nuestro texto como gris, esto se hace en el archivo styles.xml. Consulte la Imagen 1.
• También definimos que la bola debe estar en tonos verdes. Para ello, creamos ball.xml en la carpeta dibujable. Ver imagen 2

Paso 5: Descripción de la animación

Explicaré aquí la lógica y secuencia de la animación. Creo que no tiene sentido agregar fragmentos de código aquí, es mejor que revise el código usted mismo.

La idea de la animación es la siguiente:

• Una vez creado el fragmento, se crea y se inicia el logotipo de texto.
• Una vez que se completa la animación del logotipo de texto, se invoca el primer movimiento parabólico de la pelota de tenis
• Una vez que se completa el primer movimiento parabólico, se reproduce un sonido y el teléfono vibra … y se invoca el siguiente movimiento parabólico
• Una vez que se completa el último movimiento parabólico y se ejecuta el sonido / vibración llegamos al punto para llamar a nuestra segunda pantalla.

Observación: no creé una clase abstracta para animaciones, porque quería mantener el código plano … más fácil de seguir al menos para mí:)

Publicaré la segunda parte de la serie en los próximos días, sígueme si te gusta esta parte y si no, estaré encantado de recibir tus comentarios.