Xamarin Forms - Usando ActivityIndicator com imagens e ScrollView com Texto

 Neste artigo vou mostrar como podemos usar o ActivityIndicator para exibir o progresso da carga de imagens e a seguir exibir um texto em um ScrollView simulando a entrada do Star Wars.

Para detalhes sobre as view ActivityIndicator e ScrollView veja os meus artigos:

Neste artigo vamos carregar uma imagem e exibir o ActivityIndicator durante a carga da imagem; a seguir vamos usar um ScrollView para exibir um texto ao estilo Star Wars.

Recursos usados:

Criando o projeto Xamarin Forms

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Cross Platform App (Xamarin.Forms) e informe o nome XF_ImagemActivityIndicator

Ao criar um projeto Xamarin Forms em uma versão anterior à atualização 15.5, você tinha duas opções para compartilhar o código entre as plataformas:

  1. Shared Project
  2. Portable Class Library (PCL)

Pois a partir da versão 15.5 do Visual Studio(lançada em dezembro/2017) a opção Portable Class Library (PCL) foi substituida pela .NET Standard:

Marque as opções Android e/ou iOS, marque Xamarin Forms e a seguir marque .NET Standard e clique no botão OK.

Pronto nosso projeto já esta criado.

Definindo um dicionário de recursos no arquivo App.xaml

Vamos abrir o arquivo App.xaml e definir alguns recursos estáticos como o a cor do texto, o tamanho da fonte, o texto usado na apresentação e alguns estilos que vamos aplicar ao texto:

Nota:  Para saber mais sobre como funcionam os recursos ResourceDictionary e Style veja os artigos : 

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_ImagemActivityIndicator.App">
	<Application.Resources>

        <ResourceDictionary>
            <!--Text Color-->
            <Color x:Key="TextColor">#ffd700</Color>

            <!--  Font customizada -->
            <OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS">HelveticaNeue</On>
                <On Platform="Android">sans-serif</On>
            </OnPlatform>
            <!--  tamanho da fonte  -->
            <x:Double x:Key="TitleFont">16</x:Double>
            <x:String x:Key="WarsTexto">
                A PRIMEIRA ORDEM reina.
                Tendo dizimado a pacífica 
                República, o Líder Supremo Snoke 
                agora envia suas implacáveis 
                legiões para assumir militarmente 
                o controle da galáxia. 
                Somente os guerreiros da 
                RESISTÊNCIA da General 
                Leia Organa se colocam 
                contra a tirania crescente, 
                certos de que o Mestre Jedi 
                Luke Skywalker vai retornar 
                e devolver uma fagulha de 
                esperança à luta. 
                Mas a resistência foi exposta. 
                Enquanto a Primeira Ordem 
                Se direciona para a Base Rebelde 
                os valentes heróis preparam 
                uma fuga desesperada.
            </x:String>
            <!--  styles  -->
            <Style x:Key="TextFontAttributes" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource TextColor}" />
                <Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}" />
                <Setter Property="FontSize" Value="{StaticResource TitleFont}" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Definindo o código do arquivo MainPage.xaml

Abra o arquivo MainPage.xaml e inclua o código abaixo:

<?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_ImagemActivityIndicator"
             x:Class="XF_ImagemActivityIndicator.MainPage">
    <Grid>
        <Image x:Name="imgFonte" Aspect="Fill"/>
        <ActivityIndicator BindingContext="{x:Reference imgFonte}" IsRunning="{Binding IsLoading}" />

        <ScrollView Orientation="Vertical" RotationX="15" Padding="0,800,0,0">
            <Label x:Name="Text" Style="{StaticResource TextFontAttributes}" Text="{StaticResource WarsTexto}"  
HorizontalOptions="Fill" XAlign="Center"/>
        </ScrollView>
    </Grid>
</ContentPage>

No código XAML definimos uma view Image chamada imgFonte e um ActitivityIndicator vinculado à imagem.

A seguir definimos a view ScrollView onde vamos exibir uma Label aplicando os estilos e usando o texto definido no arquvo App.xaml.

Para concluir inclua o código a seguir no arquivo MainPage.xaml.cs :

using System;
using Xamarin.Forms;
namespace XF_ImagemActivityIndicator
{
    public partial class MainPage : ContentPage
   {
        public MainPage()
        {
            InitializeComponent();
            imgFonte.Source = new UriImageSource()
            {
                Uri = new Uri("https://www.nasa.gov/sites/default/files/thumbnails/image/potw1706a.jpg"),
                CachingEnabled = false,
                CacheValidity = new TimeSpan(5, 0, 0, 0)
            };
        }
  }
}

No código C# estamos carregando uma imagem de uma URI indicada e desabilitando o cache para poder exibir o ActivityIndicator.

Executando projeto temos o seguinte resultado:

Pegue o código usado no projeto aqui :  XF_ImagemActivityIndicator.zip (somente o projeto compartilhado)

(Disse Jesus) "Na verdade, na verdade vos digo que quem ouve a minha palavra, e crê naquele que me enviou, tem a vida eterna, e não entrará em condenação, mas passou da morte para a vida."
João 5:24

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:

José Carlos Macoratti