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:
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:
Powyższa metoda ustawia kolor „przezroczysty”, dzięki czemu okienko WebView nie będzie wyróżniało się z naszego layoutu apliacji.
Ostatecznie opis kodu xml dla WebView bardzo często kończy się na parametrach android:id, android:layout_width oraz android:layout_height.
Oto przykładowe zastosowanie elementu WebView:
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.
Efekt działania powyższego kodu prezentuje się w ten sposób:
Czarne tło pod naszym tekstem jest efektem zastosowania:
W innym wypadku tło byłoby zgodne ze zdefiniowanym w kodzie HTML (czyli w naszym przypadku byłoby białe).
Zaloguj się lub skorzystaj z profilu:
Możesz również zostawić komentarz bez rejestracji, korzystając z poniższego formularza:
Musisz być zalogowany aby móc pisać komentarze.
WebView – element UI parsujący i wyświetlający kod HTML
WebView w pliku layoutu (XML)
WebView w kodzie aplikacji
Screen
Komentarze (0)
Prześlij komentarz
- 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.
- 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);
- 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.
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;
}
}webView.setBackgroundColor(android.R.color.transparent);