Aplicativo Android parte 1: tela inicial usando fragmentos / Kotlin: 5 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:35

Olá de novo, muito provavelmente você tem algum tempo "livre" em casa devido ao COVID19 e pode voltar para verificar os tópicos que queria aprender no passado.

O desenvolvimento de aplicativos Android é definitivamente um deles para mim e decidi algumas semanas atrás para dar uma segunda chance.

Programar em Kotlin definitivamente reduz o esforço de codificação e ajuda a alcançar resultados em um tempo bastante curto. É realmente ótimo!

Nesta série de tutoriais, explicarei como desenvolver um Rastreador de Pontuação de Tênis. Este aplicativo pode ser usado quando você joga com amigos e / ou família (você pode dar o tablet para seu filho e mantê-lo ocupado:)). Este aplicativo é baseado no seguinte exemplo do contador Kotlin.

O tutorial tem as seguintes partes:

Parte 1: tela inicial usando fragmentos (estamos aqui agora)

Parte 2: Configuração de correspondência - Propriedades

Parte 3: rastreador de Match Score

A ideia principal é dividir o aplicativo em 3 telas diferentes, cada uma delas chamará a próxima, uma vez concluída ou quando o usuário pressionar o respectivo botão.

Nesta primeira parte, vou explicar como criar uma tela de introdução -> verifique o vídeo acima.

Suprimentos

Recursos do Android usados nesta parte:

• Fragmentos
• Animação
• Vibração
• Reprodutor de mídia
• Ouvintes

Ferramentas necessárias:

• Android Studio
• Kotlin 1.3.61
• API de nível 28

Ativos Requeridos

Um arquivo de som de bipe

Etapa 1: Design da experiência do usuário

Vamos explicar os recursos de nossa tela de introdução.

1. queremos ter uma tela inteira na cor branca
2. queremos ter a tela sempre no modo paisagem
3. queremos a cor do texto do nosso logotipo em cinza
4. queremos a cor da nossa bola em tons de verde
5. queremos que nosso logo-texto apareça
6. queremos uma bola de tênis se movendo na tela (bola quicando)
7. queremos tocar um som cada vez que a bola tocar uma superfície
8. queremos acionar uma vibração de telefone quando um som é tocado
9. queremos que a duração da introdução seja inferior a 4s.

Etapa 2: Gerenciador de fragmentos e 3 telas

Vamos relembrar a ideia principal do nosso App, queremos ter 3 telas (Intro, Properties e Match Score). Para isso, vamos usar Fragments. Portanto, precisamos de 3 deles, um para cada tela. Consulte o primeiro trecho de código.

No segundo, podemos encontrar como chamamos nosso primeiro fragmento. O fragmento Splash é aquele a ser usado em nossa introdução.

Etapa 3: Layout da tela do aplicativo e da introdução

• Para corrigir a posição da tela e ignorar qualquer rotação do telefone, precisamos adicionar o seguinte código Figura 1 em AndroidManifest.xml.
• Para remover a barra de ação de todas as telas, precisamos adicionar o código a seguir Figura 2 em styles.xml
• Para empurrar a tela inteira em todas as telas, precisamos definir alguns sinalizadores como na Figura 3 em 2 métodos diferentes. Oncreate () e onWindowFocusChanged.

Etapa 4: Definindo Logo e Ball Syles

• definimos antes de nosso texto como cinza, isso é feito no arquivo styles.xml. Consulte a Figura 1.
• definimos também que a bola deve ser em tons de verde. Para isso, criamos ball.xml na pasta drawable. Verifique a foto 2

Etapa 5: descrição da animação

Vou explicar aqui a lógica e a sequência da animação. Eu acho que não faz sentido adicionar trechos de código aqui, é melhor você mesmo percorrer o código.

A ideia da animação é a seguinte:

• Depois que o fragmento é criado, o logotipo do texto é criado e iniciado
• Assim que a animação do logotipo de texto for concluída, o primeiro movimento parabólico da bola de tênis é invocado
• Assim que o primeiro movimento parabólico for concluído, um som é reproduzido e o telefone vibra … e o próximo movimento parabólico é invocado
• Assim que o último movimento parabólico é concluído e o som / vibração é executado, chegamos ao ponto de chamar nossa segunda tela.

Observação: não criei uma classe abstrata para animações, porque queria manter o código simples … mais fácil de seguir, pelo menos para mim:)

Postarei a segunda parte da série nos próximos dias, siga-me se gostou desta parte e se não, ficaria feliz em receber seu feedback.