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!