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:
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