![]() |
Neste artigo veremos como criar um Floating Action Button ou botão flutuante no Xamarin Forms. |
Um Floating Action Button (FAB) ou botão flutuante é um tipo de controle que é usado tanto no Android como no iOS.
O FAB é aquele botão que parece flutuar sobre a interface e fica em geral no canto inferior direito da tela.
Podemos usar o FAB em aplicações Xamarin Forms de duas formas:
Na primeira opção, o pacote FAB.Forms esta apresentando uma incompatibilidade com o .NET Standard 2.0. Por esse motivo quando o problema for resolvido voltaremos a ela.
Assim vou mostrar como criar um FAB via código.
Recursos usados:
Criando um FAB via código
Abra o VS 2019 Community e clique em Create New Project e a seguir escolha:
Clique em Next e informe o nome XF_FloatButton;
A seguir clique no botão Create :
A seguir selecione o template Blank e a plataforma Android e clique no botão OK:
![]() |
Pronto, nosso projeto já esta criado.
No projeto Android na pasta Resource/drawable vamos incluir 5 imagens que iremos usar no projeto:
Definindo o código do projeto
Agora abra a página MainPage.xaml e altere o código existente pelo código a seguir:
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="XF_FloatButton.MainPage">
<Grid>
<ScrollView Grid.Row="0">
<Button Grid.Row="0" Text="Incluir Imagem"
BorderColor="#2b3c3c" BorderWidth="1" </Grid> </ContentPage> |
Aqui estamos usando o layout Grid para definir o botão que simula o FAB na página em um ScrollView que exibe as imagens.
Abra o arquivo MainPage.xaml.cs e inclua o código abaixo em azul:
using System.ComponentModel;
using Xamarin.Forms;
namespace XF_Shell2
{
[DesignTimeVisible(false)]
public partial class MainPage : Shell
{
public MainPage()
{
InitializeComponent();
}
private void BtnIncluirImagem_Clicked(object sender, EventArgs e) { DisplayAlert("Nova Imagem", "Uma nova imagem foi incluida", "OK"); } } } |
Não precisamos fazer mais nada...
Executando o projeto iremos obter o seguinte resultado:
Pegue o
código do projeto compartilhado aqui :
XF_FloatButton.zip (sem
as referências)
Na próxima parte do artigo veremos outra maneira de criar um FAB no Xamarin Forms.
"Bom é louvar ao SENHOR, e cantar louvores ao teu
nome, ó Altíssimo;
Para de manhã anunciar a tua benignidade, e todas as noites a tua fidelidade;"
Salmos 92:1,2
Veja os
Destaques e novidades do SUPER DVD Visual Basic
(sempre atualizado) : clique e confira !
Quer migrar para o VB .NET ?
Quer aprender C# ??
Quer aprender os conceitos da Programação Orientada a objetos ? Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ? |
Referências:
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
Super DVD C# - Recursos de aprendizagens e vídeo aulas para C#
Curso Fundamentos da Programação Orientada a
Objetos com VB .NET
Xamarim - Desenvolvimento Multiplataforma com C# ... - Macoratti.net
Xamarin.Forms - Olá Mundo - Criando sua primeira ... - Macoratti.net
Xamarin.Forms - Olá Mundo - Anatomia da aplicação - Macoratti.net
https://developer.xamarin.com/api/type/Android.Widget.ListView/
https://developer.xamarin.com/api/property/Android.Widget.ListView.Adapter/
https://developer.xamarin.com/guides/xamarin-forms/user-interface/animation/