0 komentarzy

WebView – element UI parsujący i wyświetlający kod HTML

Sierpień 1, 2011 Tutoriale UI

WebView jest elementem UI, który wewnątrz siebie potrafi wyświetlić przeparsowany kod HTML (innymi słowy zachowuje się jak przeglądarka internetowa). Klasa WebView dostarcza nam dwóch metod (w zasadzie trzech – trzecią opiszę w tym wpisie), które pozwolą na załadowanie strony internetowej:

  • loadUrl(String), która ładuje stronę bezpośrednio z adresu podanego w argumencie,
  • loadData(String, String, String) parsuje i wyświetla ciąg znaków (kod HTML) podany w pierwszym argumencie. Drugim jest typ mime, a trzecim kodowanie znaków.

WebView w pliku layoutu (XML)

WebView jak każdy inny element UI można opisać w pliku XML naszego layoutu. Należy jednak pamiętać, że w związku z wyświetlaną zawartością jest w nim kilka ograniczeń. Poniżej niektóre z nich:

  • Kolor tła (android:background) jest wyświetlany przez ułamek sekundy. Po załadowaniu kodu html w naszym programie element WebView ustawia kolor zgodnie z kodem HTML (lub defaultowo – biały).
    Są dwa sposoby aby temu zaradzić (przy założeniu, że wyświetlamy tam swój tekst, a nie stronę pobraną za pomocą loadUrl()).
    Pierwszym jest dopisanie znaczników <style></style> wraz z opisanym stylem np. dla elementu body. Oczywiście mówię o ciągu znaków z kodem html, przekazanym do loadData().
    Drugi, to metoda setBackgroundColor(int), która przyjmuje adres do koloru (opisanego np. w colors.xml):

    webview.setBackgroundColor(android.R.color.transparent);

    Powyższa metoda ustawia kolor „przezroczysty”, dzięki czemu okienko WebView nie będzie wyróżniało się z naszego layoutu apliacji.

  • Kolor czcionki (android:textColor) działa dokładnie tak jak powyżej opisałem. Niestety aby go ustawić musimy skorzystać z znaczników <style></style>, ponieważ nie istnieje żadna metoda odpowiadająca setBacgroundColor().
  • Wszelkie ustawienia margin/padding oczywiście są „respektowane” ale, jak zapewne wiedzą Ci, którzy mieli do czynienia z tworzeniem stron internetowych, HTML rządzi się swoimi prawami. Dlatego wszelkie marginesy i inne polecam ustawiać już z poziomu kodu HTML.

Ostatecznie opis kodu xml dla WebView bardzo często kończy się na parametrach android:id, android:layout_width oraz android:layout_height.

WebView w kodzie aplikacji

Oto przykładowe zastosowanie elementu WebView:

public class MainActivity extends Activity {
	private WebView webView;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        webView = (WebView) findViewById(R.id.webView);
        initWebView();
    }

	private void initWebView() {
		String mimeType = "text/html";
        String encoding = "utf-8";
        String html = getHtml();
        webView.loadDataWithBaseURL(null, html, mimeType, encoding, null);
        webView.setBackgroundColor(android.R.color.transparent);
	}

	private String getHtml() {
	    String html = "";
	    String style = "";
	    String body = "";
	    
		style = "<style>"
			+ 	"body { color: #f0f0f0; padding: 5px 10px; font-size: 14px;}"
			+ "</style>";
		
		body = "<p>Lorem <strong>ipsum</strong> dolor <a href=\"#\">sit</a> amet...</p>";
		
		html = "<html>"
			+	"<head>"
			+		style
			+	"</head>"
			+	"<body>"
			+		body
			+	"</body>"
			+"</html>";
	     
	    return html;
	}
}

Jak widać, do załadowania treści posłużyliśmy się metodą loadDataWithBaseURL(…). W porównaniu do metody loadData(…) pozwala ona na dostarczenie bazowego adresu URL (wykorzystywanego przy ścieżkach względnych do zasobów – np. obrazków), oraz adresu URL historii (poprzednio odwiedzonej strony). My natomiast wykorzytujemy tą metodę tylko dlatego, że loadData(…) nie radzi sobie z kodowaniem znaków w UTF-8.

Screen

Efekt działania powyższego kodu prezentuje się w ten sposób:

Czarne tło pod naszym tekstem jest efektem zastosowania:

webView.setBackgroundColor(android.R.color.transparent);

W innym wypadku tło byłoby zgodne ze zdefiniowanym w kodzie HTML (czyli w naszym przypadku byłoby białe).

Komentarze (0) Subskrybuj

Prześlij komentarz

Zaloguj się lub skorzystaj z profilu:

[rpxlogin redirect="http://www.android4devs.pl" prompt="" style="large"]

Możesz również zostawić komentarz bez rejestracji, korzystając z poniższego formularza:

Musisz być zalogowany aby móc pisać komentarze.