Návod – Xamarin WebView

V tomto návode si ukážeme ako použiť WebView v Xamarin.Android. Aplikácia, ktorú vytvoríme načíta a zobrazí webovú stránku vo WebView pomocou WebViewClient-a.

Úvod do WebView

  • WebView je UI komponenta operačného systému Android, ktorá zobrazuje webové stránky. Pomocou WebView je možné zobraziť vzdialenú webovú stránku, prípadne statické dáta vo formáte HTML.
  • Obsahuje funkcie prehliadača, ktoré môžu byť integrované priamo do aplikácie. Väčšina aplikácií ako WordPress, Google Reader, Feedly, Flipboard a iné majú priamo integrovaný WebView, aby bolo možné zobrazovať on-line obsah.
  • WebView používa vykreslovacie jadro WebKit pre zobrazenie webových stránok a metódy pre pohyb vpred a vzad históriou, zoom, textové vyhľadávanie a ďalšie.
  • Implementácia WebView je veľmi jednoduchá, stačí deklarovať  WebView v aktivite alebo fragmente, inštanciu a načítanie dát.

 

V nasledujúcej časti si ukážeme krok za krokom ako vytvorenie jednoduchého WebView s rôznymi konfiguračnými parametrami.

Deklarovanie vrstvy WebView

Vytvoríme si jednoduchú vrstvu WebView, ktorá bude prekrývať celú obrazovku.

Nahranie statického HTML do WebView

Nasledujúci kód ukazuje ako do WebView nahrať statické HTML a následne ho zobraziť.

Ako to vlastne funguje?

  1. Pomocou metódy FindViewById() v aktivite MainActivity vyvoláme WebView, aby všetko správne fungovalo je potrebné importovať balíček Android.WebKit
  2. Zavoláme metódu LoadData(), ktorá prijíma statické HTML, MIME typ a formát kódovania

Výsledok bude nasledovný

WebView vlastné HTML

WebView vlastné HTML

 

Zobrazenie Url vo WebView

  1. Aby bolo možné zobraziť url adresu v našej aplikácii musíme obísť (zmeniť) východzie nastavenie systému. Štandartne sa url adresy zobrazujú pomocou východzieho prehliadača. V aplikácii presmerujeme (prepíšeme) zobrazovanie url v našom prvku WebView
  2. Môžeme to jednoducho urobiť pomocou Android.WebViewClient, ktorý sleduje udalosti vo WebView. Prepíšeme shouldOverrideUrlLoading(), táto metóda nám umožní vykonať vlastnú akciu s dopredu definovanou url adresou. Môžeme nastaviť vlastný WebViewClient pre naše WebView, urobíme to pomocou metódy setWebViewClient().
  3. Trieda WebViewClient má aj ďalšie užitočné metódy napríklad OnPageStarted(), OnPageFinished() alebo OnReceivedError(), ktoré nám môžu pomôcť pri zobrazení priebehu načítania, prípadne spracovať chybu.

Naša aktivita by mala vyzerať takto:

Takto bude vyzerať výsledok napr. na obrazovke telefónu 

WebView a zobrazenie url

WebView a zobrazenie url

Zdrojové súbory k stiahnutiu.