Como construir uma boa interface em aplicativos Android e iOS
Artigo produzido por Brenno de Moura e Thiago Alves.
Hoje em dia é essencial que uma aplicação apresente uma interface bem construída, com boas animações e que contribua para uma experiência do usuário cada vez melhor. Mas você sabe quais as técnicas necessárias para alcançar este objetivo nos sistemas Android e iOS?
Neste artigo, vamos apresentar para você o Jetpack Compose e o SwitfUI, Tookits modernas que auxiliam os desenvolvedores nesse grande desafio.
Jetpack Compose
Atualmente é muito importante que uma aplicação entregue a melhor experiência possível para seus usuários, através de uma interface refinada e boas animações. Esses requisitos não eram tão relevantes quando o UI Toolkit atual do Android foi criado, portanto atendê-los nem sempre foi algo trivial.
Buscando resolver esse problema, no final de 2019, a Google anunciou o Jetpack Compose, um Toolkit moderno para auxiliar os desenvolvedores a obterem sucesso nesse novo desafio.
O Compose utiliza o Kotlin, linguagem recomendada pela Google para o desenvolvimento Android. Ela é usada para implementar a abordagem da UI Declarativa, onde a hierarquia de componentes é redesenhada automaticamente quando alguma alteração no seu estado interno é realizada.
O que significa UI Declarativa?
Quando pensamos em UI Declarativa, devemos visualizar um código que descreve a interface do usuário que queremos, mas não descreve como fazer a transição para este estado (UI Imperativa).
Portanto, ao escrever um código declarativo, você não precisa mais se preocupar com o estado anterior da sua interface, você só deve especificar qual deve ser o seu estado atual. A estrutura controla como ir de um estado para outro.
Com códigos tudo fica mais claro!
Para entendermos os conceitos apresentados acima, e o funcionamento do Jetpack Compose, vamos implementar uma simples interface de listagem de contatos telefônicos:
Porém, antes de pensarmos em como estruturar a UI para implementarmos a tela acima, vamos entender alguns componentes básicos do Jetpack Compose.
- Column: utilizado para colocar itens na vertical;
- Row: utilizado para colocar itens na horizontal;
- Box: utlizado para agrupar elementos um dentro do outro;
- LazyColumn (lista na vertical);
- LazyRow (lista na horizontal);
Cada componente no Jetpack Compose pode ser alterado através da utilização de Modificadores. Segundo a própria documentação, através dos Modificadores é possível:
- Mudar o tamanho, o layout, o comportamento e a aparência do elemento;
- Adicionar informações, como rótulos de acessibilidade;
- Processar a entrada do usuário;
- Adicionar interações de nível superior, como tornar um elemento clicável, rolável, arrastável ou redimensionável;
Bom, agora que já sabemos alguns dos componentes básicos do Compose, vamos voltar para o nosso exemplo. Vamos focar primeiro na construção do item que representa o contato de um usuário.
Podemos pensar na estrutura deste elemento como sendo a combinação de alguns dos componentes apresentados acima.
- Row: uma vez que os componentes estão alinhados na horizontal;
- Nome do usuário e telefone posicionados na vertical (Column);
Também iremos utilizar o componente Card, para aplicarmos a elevação e as bordas do elemento.
Acima, podemos visualizar o código que corresponde ao elemento desejável.
Agora que já possuímos um elemento estruturado, basta criarmos uma lista para alcançarmos o nosso objetivo inicial. Para isso, vamos utilizar o Componente LazyColumn, discutido acima.
Pronto, com apenas algumas linhas de código a listagem está feita. Listagens são uma grande vantagem do Jetpack Compose e aqui fica claro o motivo.
O futuro do desenvolvimento Android
O Jetpack Compose é a aposta do Google para os próximos anos do desenvolvimento de UI em Android. Com a promessa de melhorar cada vez mais a experiência dos desenvolvedores, aumentando a produtividade e diminuindo os códigos e através do pequeno exemplo apresentado neste artigo, podemos notar que ele cumpre com perfeição estes objetivos.
É importante se manter atualizado nas mudanças dessa Toolkit, já que ela está em constante evolução.
Ficou curioso para explorar mais o Jetpack Compose? Acesse os conteúdos e documentações que o Google vem desenvolvendo para a comunidade:
https://developer.android.com/jetpack/compose/tutorial
https://developer.android.com/courses/pathways/compose
https://github.com/android/compose-samples
SwiftUI
O SwiftUI é um framework da Apple lançado em 2019 na WWDC com recursos inovadores para auxiliar o desenvolvimento dos aplicativos.
Seguindo os princípios do paradigma de programação declarativo, a iniciativa da Apple trouxe uma reformulação no mercado de desenvolvimento iOS, macOS, watchOS e tvOS. Por conta do novo paradigma, a estruturação do código ficou simples e direta.
Para mostrar mais sobre os ganhos no desenvolvimento de um aplicativo, trarei como exemplo a implementação de uma tela simples para fazer listagem de contatos na plataforma iOS.
SwiftUI na prática
A listagem é feita utilizando alguns recursos do SwiftUI. Primeiro, faremos uso do @State para nossa variável de array dos contatos. Segundo, utilizaremos o ForEach para fazer a conversão do objeto contato em um item da lista. Por último, utilizaremos a List com o layout nativo do iOS para mostrar os contatos seguindo o estilo da Apple.
Ao executar esse código, temos o seguinte resultado:
Por que é importante?
Com poucas linhas de código foi possível implementar o layout e regras para fazer a listagem dos contatos e a possibilidade de favoritar cada um deles. A solução com o UIKit exigiria criar a ViewController, View com UITableView junto com a célula do tipo UITableViewCell e, ainda, implementar os protocolos data source e delegate.
No final, com o SwiftUI, temos apenas um único arquivo com as regras embutidas na construção de layout, facilitando a implementação, manutenção e consistência do código.
