O X do Xamarin Forms — Floating Action Button , o Botão Flutuante
Fala galera,
Floating Action Button é o tipo de controle comum em muitos aplicativos. Inicialmente ele era utilizado apenas no Android, mas devido a padronização de interfaces de alguns aplicativos ( Gmail é um exemplo) nos acabamos encontrando o mesmo no iOS.
Hoje vou lhes mostrar como implementar o mesmo em Xamarin.Forms!
Vamos fazer a mão ? Não, tem um controle incrivel que simplifica muito nossa vida o FAB.Forms.
Bora ver como é simples de usar !
Configurando o controle
Vamos ao nuget baixar o controle FAB.Forms
Agora devemos Inicializar o componente no iOS:
E no Android :
E agora? Agora é só usar. Eu disse que era simples :D
A sugestão da documentação do App é utilizar o Relative layout.
Não conhece o RelativeLayout? Calma que vou explicar de uma forma resumida.
Entendendo o Relative Layout
Basicamente em Xamarin.Forms,como EU gosto de dizer temos 4 layouts um Grid e uma ScrollView :P
de forma resumida :
StackLayout : Empilha os controles de forma horizontal ou vertical. Geralmente utilizamos ele como um layout base para organizar os controles.
FlexLayout : Parecido com o Stack,porem ele tem mais opções de alinhamento e posicionamento dos controles
AbsoluteLayout : Podemos posicionar os controles filhos com um próprio tamanho , posição ou por valores absolutos.
Grid : Bem resumido, uma tabela. podemos definir linhas e colunas para monyar nosso layout.
ScrollView : podemos utilizar com outros layouts. Contem scrolls para percorrer a tela.
RelativeLayout : finalmente o que vamos utilizar. nós utilizamos este layout quando queremos posicionar controles de modo relativo. Seja em relação ao layout base ou a outros controles. Podemos deixar uma caixa “Flutuante por exemplo” com sua posição em relação ao layout principal.
Se quiserem mais explicações dos layouts, deixei a documentação oficial clicando no nome de cada um. Se ainda sim quiserem, posso escrever um artigo explicando todos :D
Implementando o Controle
Muito bem, vamos criar um float button simples e algusn botões para mudar a cor dele na tela e atribuir uma imagem a ele. Para utilizar precisamos declarar o namespace do controle : xmlns:fab=”clr-namespace:FAB.Forms;assembly=FAB.Forms”
Vamos implementar o backend:
Agora, vamos rodar :
Fácil em ?
É possível colocar o botão na parte que quiser da tela, basta ajustar sua osição com o relative layout.
Quem quiser pode baixar o exemplo clicando aqui.
Quer ver outros artigos sobre Xamarin ? Clique aqui.
Espero ter ajudado!
Aquele abraço!
