Layout do Grupo de abas

Com a funcionalidade Grupo de abas, você pode organizar o conteúdo do app, o que facilita muito a experiência do usuário!

Para isso, depois de adicionar um grupo de abas ao seu app, vá para a guia de layout



Nesta tela, você poderá selecionar as definições de layout que desejar.

Primeiro, escolha o modo de exibição das abas dentro do grupo



Você pode escolher os modelos disponíveis para Grade, Lista ou Misto

Grade




Lista



Misto




Estes padrões definirão como as abas dentro do grupo serão exibidas para os usuários.

Escolha também se os textos e os ícones destas abas serão visíveis



Você pode também inserir uma imagem de fundo nessa tela para adicionar alguma textura, por exemplo. Para isso, clique para exibir a imagem de fundo da página e depois insira o arquivo da imagem que será exibida.

Esta imagem deverá ter a proporção de 750 x 1334 px



Uma dica para evitar problemas de carregamento com esta imagem, é utilizar um compressor, como o Tinypng, que vai melhorar o desempenho de carregamento da imagem.

Defina também as cores da tela do Grupo de abas



Note como estas cores serão aplicadas no fundo da página, no fundo dos itens e no texto



Por fim, defina os espaçamentos aplicados aos itens da tela do Grupo de abas



É possível aumentar os espaçamentos da margem superior e das margens laterais, bem como entre as próprias abas adicionadas e também inserir o arredondamento das bordas dos botões.

Assim você conseguirá personalizar cada uma das telas do app, podendo torná-las mais bonitas e agradáveis para os usuários.

Se preferir, veja o vídeo:

Atualizado em: 16/12/2022