MójDroid.pl

#9 Twórz aplikacje na Androida z Mojdroid.pl - WebView

2012-09-20
|
Damian P.

Ciekawi jesteście, jak tworzy się proste przeglądarki na Androida? Dziś pokrótce tym się zajmiemy, a pomoże nam w tym element WebView.
Informacja: Nie radzisz sobie z kodem? Coś Ci nie wychodzi lub nie działa? Zgubiłeś się? W tym miejscu zobaczysz pełen kod aplikacji, a tutaj go pobierzesz na dysk.

1. WebView

Jest to jeden z elementów interfejsu, ale z dziwnych powodów zapomniałem o nim wspomnieć w poprzednich poradnikach. Ale nic straconego, zajmiemy się nim dzisiaj, a jako że jest bardzo prosty, to w mig zrozumiecie o co w nim chodzi. Jest to oczywiście jeden z elementów View i służy on wyłącznie do wyświetlania stron www. Oczywiście możemy go stworzyć w pliku szablonu w XML, ale również i w samej klasie (jak każdy inny element zresztą). Bazuje on na prostym silniku WebKita, który znowu występuje m.in. w aplikacji Chrome. Standardowo posiada wszystkie opcje jakie zauważamy w popularnych przeglądarkach stron - przybliżanie, przechodzenie do wskazanego adresu, obsługę powiadomień... Jest to po prostu normalna przeglądarka, gdzie my sami musimy opisać poszczególne funkcjonalności (a podstawy do tego mamy). Uwaga! Do przeglądarki wymagane jest zezwolenie dla dostępu do internetu! Dodajcie to w swoim manifeście:
<uses-permission android:name="android.permission.INTERNET" />

2. Podstawy

Stwórzmy prostą przeglądarkę sieci www. Potrzebne będą nam dwie rzeczy: nowe Activity oraz szablon w XMLu. Standardowo stwórzmy coś razem: View_WebView:
package com.example.moja.pierwsza.aplikacja;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;

public class View_WebView extends Activity {

    EditText adresurl;
    WebView przegladarka;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.view_webview);

	Button przejdznastrone = (Button) findViewById(R.id.bTload);
	adresurl = (EditText) findViewById(R.id.eTwebview);
	przegladarka = (WebView) findViewById(R.id.wVbrowser);

    }

}
view_webview.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/eTwebview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/bTload"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Załaduj stronę" />

    <WebView
        android:id="@+id/wVbrowser"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>
Nic nadzwyczajnego póki co. Standardowo WebView blokuje wszystkie elementy, o których przed chwilą wspomniałem. Nie uruchomimy na nim skryptów w JavaScript, zoom będzie zablokowany a strony z błędami pomijane. To wszystko sami musimy odblokować, ale nie ma z tym większego problemu. Co teraz musimy zrobić - pobrać adres z pola EditText i przesłać go do WebView.
package com.example.moja.pierwsza.aplikacja;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;

public class View_WebView extends Activity implements OnClickListener {

    EditText adresurl;
    WebView przegladarka;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.view_webview);

	Button przejdznastrone = (Button) findViewById(R.id.bTload);
	adresurl = (EditText) findViewById(R.id.eTwebview);
	przegladarka = (WebView) findViewById(R.id.wVbrowser);

	przejdznastrone.setOnClickListener(this);

    }

    public void onClick(View v) {

	String adres = adresurl.getText().toString();
	przegladarka.loadUrl(adres);

    }

}
Kilka prostych formułek i wszystko działa. Jest tylko jedno małe ale... Spróbujcie wybrać link w naszej przeglądarce. No właśnie... Zostaje otwarty zewnętrzny program, czego oczywiście nie chcemy. W tym miejscu przedstawię wam obsługę niektórych wydarzeń/zdarzeń w WebView.

2. WebViewClient i WebChromeClient

Standardowe WebView korzysta z dwóch elementów do obsługi swoich zdarzeń - jeden element to klient webView, drugi to rozszerzenie od projektu chrome. Oba służą do czegoś innego, ale potrafią ze sobą współpracować. Warto głębiej przyjrzeć się tym dodatkom, bo posiadają w sobie całkiem sporo możliwości: od reakcji na stan ładowania, przez czytanie konsoli aż po obsługę przekierowań. Wróćmy jednak do naszego problemu - jak zatrzymać otwieranie linków poza własnym webview? W tym miejscu oczywiście posłużymy się nadpisaniem ładowania adresu. A robi się to tak:
package com.example.moja.pierwsza.aplikacja;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;

public class View_WebView extends Activity implements OnClickListener {

    EditText adresurl;
    WebView przegladarka;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.view_webview);

	Button przejdznastrone = (Button) findViewById(R.id.bTload);
	adresurl = (EditText) findViewById(R.id.eTwebview);
	przegladarka = (WebView) findViewById(R.id.wVbrowser);

	przejdznastrone.setOnClickListener(this);
	przegladarka.setWebViewClient(new ModifiedWebViewClient());

    }

    public void onClick(View v) {

	String adres = adresurl.getText().toString();
	przegladarka.loadUrl(adres);

    }

    private class ModifiedWebViewClient extends WebViewClient {

	@Override
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
	    view.loadUrl(url);
	    return true;
	}

    }

}
Tworzymy nową klasę rozszerzającą WebViewClient. W niej znajduje się metoda, która potrafi obsługiwać adresy. Jako swoje argumenty przyjmuje obsługiwany webview oraz sam adres url. Wystarczy więc ponownie wszystko przekazać do naszego WebView i problem naprawiony. Jest to oczywiście bardzo prosty przykład. Funkcji w obu elementach jest sporo i lwią część przeglądarki w niej obsłużymy. Jak wcześniej mówiłem, warto się z tym zapoznać, może ktoś z was kiedyś stworzy rywala dla wielkiego Chrome...