Xamarin Forms – WebView com Progressbar

Neste artigo eu vou mostrar como podemos exibir conteúdo HTML em uma WebView mostrando a carga do conteúdo usando uma Progressbar em aplicações Xamarin Forms.

O componente WebView é uma view usada para a exibição de conteúdos web e HTML em seu aplicativo. O WebView é muito versátil e possui os seguintes recursos:

• Conteúdo: suporta várias fontes de conteúdo, incluindo HTML embutido, páginas web e as strings HTML.
• Navegação: inclui suporte para navegar para uma determinada página e voltar.
• Eventos: escuta e responde às ações tomadas pelo usuário no WebView.
• Layout: possui alguns requisitos específicos de como ele é exibido.

Para mais detalhes, veja os artigos já publicados sobre WebView:

• Xamarin Forms – Apresentando e usando a WebView
• Xamarin Forms – Carregando PDF em um WebView
• Xamarin Forms – Usando ProgressBar

Hoje veremos como exibir conteúdo HTML em um WebView usando uma Progressbar para acompanhar a carga do conteúdo.

Recursos usados:

• Visual Studio 2017 Community

Criando o projeto Xamarin Forms

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

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:

• Shared Project
• Portable Class Library (PCL)

Já que a partir da versão 15.5 do Visual Studio (lançada em dezembro/2017), a opção Portable Class Library (PCL) foi substituída 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á está criado.

Verifique a necessidade de atualizar a versão do Xamarin Forms no seu projeto.

Definindo o código da MainPage.xaml

Abra o arquivo MainPage.xaml e inclua no 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_WebViewProgressbar"
             x:Class="XF_WebViewProgressbar.MainPage">
    <StackLayout>
        <Label Text="WebView com Progessbar"  
           FontSize="20"  
           TextColor="BlueViolet"  
           BackgroundColor="White"/>

        <ProgressBar Progress="0.2"  
                 HorizontalOptions="FillAndExpand"  
                 x:Name="progressbar1"  
                 IsVisible="True"/>

        <WebView x:Name="webview1"  
             HeightRequest="1000"  
             WidthRequest="1000"  
             Navigating="OnNavigating"  
             Navigated="OnNavigated"  
             VerticalOptions="FillAndExpand"/>
    </StackLayout>
</ContentPage>

Neste código, temos:

Um controle StackLayout que está empilhando os controles:

• Um Label onde temos estamos exibindo o texto no topo da página
• Uma Progressbar onde propriedade Progress foi definida em 0.2
• Uma WebView onde definimos os eventos OnNavigating e OnNavigated

No arquivo MainPage.xaml.cs temos a atribuição da página a ser exibida e o código dos eventos implementados:

using Xamarin.Forms;
namespace XF_WebViewProgressbar
{
    public partial class MainPage : ContentPage
   {
public MainPage()
{
        InitializeComponent();
                    webview1.Source = "http://uol.com.br";
}

        protected async override void OnAppearing()
        {
            base.OnAppearing();
            await progressbar1.ProgressTo(0.9, 900, Easing.SpringIn);
        }

        protected void OnNavigating(object sender, WebNavigatingEventArgs e)
        {
            progressbar1.IsVisible = true;
        }

        protected void OnNavigated(object sender, WebNavigatedEventArgs e)
        {
            progressbar1.IsVisible = false;
        }
    }
}

Neste código no evento OnAppearing() estamos definindo a animação para a progressbar no método ProgressTo, e no evento OnNavigating() estamos exibindo a progressbar; no evento OnNavigated, ao terminar a navegação, estamos ocultando a progressbar.

Executando o projeto usando o emulador Genymotion para o Android iremos obter o seguinte resultado:

Pegue o código do projeto compartilhado aqui: XF_WebViewProgressbar.zip (sem as referências).