Hoje veremos como formatar a exibição de texto na view Label usando a propriedade FormattedString.
A view Label é usada para exibir texto, tanto em linha única como em múltiplas linhas. Elas podem ter fontes personalizadas (famílias, tamanhos e opções) e texto colorido.
Para tratar com texto em uma ou múltiplas linhas, podemos usar a propriedade LineBreakMode que é uma enumeração e possui as seguintes opções:
- HeadTruncation – Trunca o início do texto, mostrando o fim.
- CharacterWrap – Envolve o texto em uma nova linha com um limite de caracteres.
- MiddleTruncation – Exibe o início e o final do texto com o meio substituído por reticências.
- NoWrap – Não envolve o texto, exibindo apenas o texto que pode caber em uma linha.
- TailTruncation – Mostra o início do texto, truncando o fim.
- WordWrap – Envolve o texto no limite da palavra
Podemos usar a propriedade FormattedText da Label que permite apresentar o texto com várias fontes e cores na mesma exibição. Esta propriedade é do tipo FormattedString.
As strings formatadas são compostas por um ou mais espaços. Cada um com as seguintes propriedades:
- BackgroundColor – Pode ser usado para definir uma cor de fundo;
- FontAttributes – Pode ser configurado em negrito, itálico ou nenhum. Opções: Bold, Italic ou none;
- FontFamily – Define a fonte a ser usada;
- FontSize – Define o tamanho do texto. Opções: Default, Large, Medium, Micro e Small;
- ForegroundColor – Define a cor do texto;
- Text – O texto a ser apresentado.
Então vamos à parte prática.
Recursos usados:
Criando o projeto no Visual Studio 2017 Community
- Abra o Visual Studio Community 2017 e clique em New Project;
- Selecione Visual C#, o template Cross Platform e a seguir, Cross Plataform App (Xamarin.Forms);
- Informe o nome XF_Label e clique no botão OK;
- A seguir, selecione Blank App e marque as plataformas para quais deseja gerar os projetos;
- Marque a opção Xamarin.Forms e, em Code Sharing Strategy, marque .NET Standard, que substitui a opção de projetos PCL a partir do VS 2017 update 15.5.
Usando a view Label e formatando o texto
Vamos aproveitar o código padrão gerado e usar a view MainPage.xaml para definir os exemplos usados no artigo.
1- Label padrão
<?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:local="clr-namespace:XF_Label" x:Class="XF_Label.MainPage"> <Label Text="Bem-Vindo, a Macoratti .net" TextColor="White" FontSize="Large" FontAttributes="Bold" BackgroundColor="Red" FontFamily="Verdana" VerticalOptions="Center" HorizontalOptions="Center" /> </ContentPage>
Vejamos agora outro exemplo usando a propriedade FormattedText e definindo spans.
<?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:local="clr-namespace:XF_Label" x:Class="XF_Label.MainPage"> <StackLayout Padding="5,10"> <Label> <Label.FormattedText> <FormattedString> <Span Text="Macoratti .net" ForegroundColor="Red" FontAttributes="Bold" FontSize="Large"/> <Span Text=" quase tudo para .NET" ForegroundColor="Blue" FontSize="Medium"/> <Span Text=" 2018" FontAttributes="Italic" FontSize="Small" /> </FormattedString> </Label.FormattedText> </Label> </StackLayout> </ContentPage>
Para usar múltiplos Spans dentro de um Label, é necessário acessar outra propriedade chamada FormattedText, dentro da qual incluiremos FormattedString que, por sua vez, permitirá acesso à uma coleção de Spans.
Cada um deles é um fragmento de texto que poderá ser formatado de maneira independente como mostrado no exemplo acima.
Para concluir, vamos usar a view Label da forma tradicional e usando a propriedade FormattedText com Spans:
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XF_Label.Pagina1"> <ContentPage.Content> <StackLayout Padding="5,10" x:Name="layout"> <Label TextColor="Green" Text="Uma label verde"/> <Label Text="Uma labem padrão sem customização"/> <Label FontSize="30" Text="Tamanho da fonte na label"/> <Label FontAttributes="Bold" Text="Um texto em negrito na Label"/> <Label> <Label.FormattedText> <FormattedString> <Span Text="Texto negrito com fundo amarelo" ForegroundColor="Yellow" FontAttributes="Bold"/> <Span Text="So texto"/> <Span Text="Texto Azul" ForegroundColor="Blue"/> <Span Text="Texto itálico" FontAttributes="Italic" FontSize="Large"/> </FormattedString> </Label.FormattedText> </Label> </StackLayout> </ContentPage.Content> </ContentPage>
Até o próximo artigo sobre Xamarin Forms!
Pegue o código usado no projeto aqui: XF_Label.zip (somente o projeto compartilhado).