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:
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).