Olá, estudante! Você conheceu os componentes visuais de interface e viu que um mundo de possibilidades se abre nesse universo de desenvolvimento de aplicativos. Como você já sabe, existem vários tipos de componentes visuais, desde os mais básicos até os mais específicos, de acordo com a necessidade de desenvolvimento e a operação envolvida. Componentes compostos são chamados assim por permitirem que alterações em seu comportamento sejam realizadas, e os layouts, por sua vez, controlam como esses componentes serão disponibilizados na interface do usuário.  

Nesta lição, veremos que o Flexbox pode ser usado junto ao React Native. Segundo React Native ([2023]), ele é um componente que pode especificar o layout de seus componentes filhos e foi projetado para fornecer um layout consistente em diferentes tamanhos de tela. Veremos, também, como o Android lida com esta organização e, para finalizar essa questão dos componentes, como trabalhar com componentes de listas personalizadas e seus formatos. Nosso objetivo desta aula é apresentar os componentes compostos de layouts e demonstrar como trabalhar com as listas personalizadas em ambas as plataformas.

O trabalho com layouts e desenvolvimento de interfaces de usuário para dispositivos móveis é um grande desafio. Consegue pensar por quê? Bom, se pensou um pouco e chegou à conclusão de que o desafio se dá por não saber o tamanho e a orientação da tela do smartphone em que o aplicativo será instalado, você acertou! Imagine desenvolver um aplicativo e, no final, ele não dar certo no tamanho da tela?

Esse problema fez com que as plataformas desenvolvessem componentes compostos, cuja função é organizar e disponibilizar os componentes, chamados componentes filhos, dos quais falamos na Lição 5. Estes são dispostos na tela do aplicativo com objetivo de prover a interação com o usuário. Tem-se disponível, também, uma ferramenta, chamada Layout, que são como as telas que um pintor utiliza para fazer suas obras de arte. Aqui, nossa “tela” tem muito a ver com os limites que se pode utilizar para desenvolver o layout e/ou componente, de que maneira o pintaremos e/ou que tipo de pintura realizaremos e como ele será visto pelo usuário. A mesma coisa ocorre com relação ao uso de listas personalizadas. Por exemplo, você pode entender que a tela de seu aplicativo precisa de uma lista de clientes, com nome e cidade deles, e que, no canto esquerdo dessa lista, é necessário ter a logo da empresa bem como o nome e o telefone do gerente. O componente utilizado para as duas listas seria o mesmo, mas cabe a você, desenvolvedor(a), personalizá-lo para atender à sua necessidade.

Um case real e que se encaixa, perfeitamente, no assunto desta aula, o qual você pode até já ter visto, mas não o via com olhos de desenvolvedor(a), é a questão do layout dos aplicativos de streamings, aqueles que disponibilizam filmes e séries. Esses aplicativos, caso você não conheça, possuem várias categorias de filmes e séries, chamadas listas, pois bem, é uma aplicação perfeita do componente de listas personalizadas. 

Os layouts em questão, ainda, serão discutidos e apresentados mais à frente, mas, para sua apreciação, são chamados LinearLayout, na plataforma Android, e Flexbox, na plataforma híbrida. O importante a ressaltar aqui é o nível de personalização que um componente de lista pode alcançar. Em vez de apenas texto, como se fosse uma coluna de uma planilha eletrônica, temos imagens representando as séries, os filmes e os documentários. Essa lista é formada apenas por imagens, ou thumbnails (como são chamadas, tecnicamente), e disposta de maneira diferente, ou seja, em vez de ser uma lista na vertical (de cima para baixo), é uma lista horizontal, onde você desliza para direita ou para esquerda, dependendo da posição em que você está.

Assim, temos a aplicação de listas personalizadas em grandes aplicativos utilizados pelo mundo todo, o que prova a necessidade do conhecimento de tal componente. Ainda sobre os layouts dos aplicativos em questão, o que se vê na sequência é uma coleção de listas, cada uma, como dito anteriormente, disposta na horizontal, organizando o conteúdo por gênero, listas de mais vistos etc.

Você chegou em uma parte do desenvolvimento para aplicativos móveis em que já começa a projetar como sua interface do usuário deverá funcionar e/ou, minimamente, comportar-se, para que você faça bem as escolhas de layouts, verifique a necessidade de componentes compostos e faça uso de listas personalizadas, o que acontecerá, com certeza, em algum momento.

Android

Assim como, no desenvolvimento híbrido, pode-se trabalhar com arquivos separados, a plataforma Android trabalha com telas separadas para cada ação. Cada tela tem o nome de Activity (em português, atividade), que é um dos elementos de criação fundamentais dos Apps na plataforma Android (DEVELOPERS, 2020). Elas servem como ponto de entrada para a interação de um usuário com um App e são essenciais para a navegação do usuário em um App ou entre Apps. 

Layouts

Segundo Developers (2022a), os layouts definem a estrutura de uma interface do usuário no aplicativo. Eles podem ser categorizados apenas como View ou como ViewGroup, que é o aspecto que você está conhecendo nesta aula. A ViewGroup é um contêiner invisível que define a estrutura do layout para a View e outros objetos ViewGroup. Importante que você entenda que essa hierarquia impacta em todo o formato no qual sua interface será apresentada para o usuário. Você pode visualizar essa organização na Figura 1, a seguir:

LinearLayout

Agora que você conheceu a estrutura de encadeamento de Views e ViewGroups, chegou a hora de conhecer o componente composto de Layout, chamado LinearLayout, que é utilizado, na maioria das vezes, quando a tela de seu aplicativo possui elementos básicos, como imagens, formulários, listas e, até mesmo, botões, tudo isso com o design mais “corporativo”.

Mas qual é o formato que o LinearLayout trabalha para que ele tenha essa aplicação mais formal? Bem, segundo Developers (2022b), ele é um layout que organiza outras views e componentes horizontalmente, em uma única coluna, ou verticalmente, em uma única linha. Isso remete-se ao conceito de tabelas: se o layout é vertical, podemos incluir cada componente em uma linha, não precisando então, preocupar-nos com a localização dele em relação ao tamanho da tela, à orientação etc., e o mesmo ocorre se o layout for organizado em colunas na horizontal. Vale ressaltar que, dentro de uma linha, pode-se incluir outro componente LinearLayout e o definir na horizontal, com isso, tem-se uma linha com duas colunas. Veja a Figura 2, a seguir:

ConstraintLayout

Layouts que requerem uma interface do usuário mais elaborada ou menos corporativa, por assim dizer, têm o seu desenvolvimento um pouco limitado quando se fala de LinearLayout. Pensando nisso, a plataforma Android desenvolveu o ConstraintLayout, que permite que o desenvolvedor(a) tenha mais liberdade de criar sua interface sem se atrelar a linhas e colunas. Segundo Developers (2022c), ele permite criar layouts grandes e complexos com uma hierarquia de exibição plana (sem ViewGroups alinhados). Todas as Views são dispostas de acordo com as relações entre Views irmãs e Views pais e seu uso é bastante intuitivo, por meio do Editor de Layout, da IDE Android Studio. Toda essa “amarração” entre os componentes explicada anteriormente pode ser analisada na Figura 3, a seguir:

Flexbox

O conceito de Flexbox é, amplamente, utilizado na programação para web e, em geral, é uma inovação muito bem-vinda para a comunidade mobile, pois trouxe a mesma forma de pensamento dos layouts de plataformas nativas para os dispositivos móveis. Segundo MDN WEB DOCS (2022), o Flexible Box Module, geralmente chamado de Flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar, espacialmente, os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. 

O controle da direção dos elementos é feito por meio da propriedade flex-direction, com suas respectivas opções: row, column, row-reverse e column-reverse. O alinhamento dos itens é feito por meio da propriedade align-itens, com suas respectivas opções: flex-start, center, flex-end e stretch. Essas propriedades (flex-direction e align-itens) trabalham com os componentes em si, e as justify-content e align-content atuam com o direcionamento do conteúdo dentro dos componentes.

Listas Personalizadas

O componente mais atual de listas personalizadas, hoje, para o desenvolvimento de aplicativos para dispositivos móveis, é o RecyclerView. Esse componente, assim como os outros já existentes, não só permite a personalização das listas, mas otimiza a forma de utilização de memória dos dispositivos móveis.

Segundo Developers (2021a, on-line), “O RecyclerView facilita e torna eficiente a exibição de grandes conjuntos de dados. Você fornece os dados e define a aparência de cada item”. Com o conhecimento desta biblioteca e/ou funcionalidade, conseguimos articular layouts cada vez mais modernos, assim como você viu no case desta lição. Acompanhe exemplos de RecyclerView na Figura 4, a seguir:

Espero que tenha compreendido os aspectos do layout da plataforma Android e da plataforma híbrida e que você, como desenvolvedor(a), deve levá-los em consideração, quando selecionar os componentes para criação da interface do usuário de seus projetos. Sendo assim, uma vez que o conhecimento dos componentes compostos, layouts e listas personalizadas tenham sido apresentados, você tenha tido um esclarecimento de como incorporar as suas ideias aos futuros aplicativos que você desenvolverá. Ao apresentar cada um dos componentes compostos, os aspectos dos layouts e o próprio componente RecyclerView, amplamente utilizado pela comunidade mobile, espero que você tenha compreendido a importâncias dessas ferramentas no desenvolvimento de aplicativos para dispositivos móveis.

Ao compreender o conteúdo desta aula e das aulas anteriores, acredito que você, junto às suas ideias, para revolucionar o mundo do desenvolvimento, tenha grande evolução em seu aprendizado.