Ta strona została przetłumaczona przez Cloud Translation API.

Aplikacje WebView dla programistów stron internetowych

Data publikacji: 28 lutego 2014 r.

Dowiedz się, jak utworzyć nowy projekt Androida, dodać WebView, wczytać zdalny adres URL i wczytywać lokalną stronę HTML.

W tym samouczku zakładamy, że jesteś programistą z niewielkim lub zerowym doświadczeniem w korzystaniu ze środowiska programistycznego Androida, ale masz pewne doświadczenie z Kotlinem. Jeśli znasz już programowanie na Androida, przeczytaj artykuł Tworzenie aplikacji internetowych w komponencie WebView na stronie dla deweloperów aplikacji na Androida.

Instalowanie Android Studio

W tym samouczku używamy Android Studio, czyli środowiska programistycznego do projektowania i tworzenia aplikacji na Androida.

Tworzenie nowego projektu na Androida

Po zainstalowaniu Android Studio uruchomi kreatora konfiguracji.

Aby utworzyć nowy projekt:

Kliknij Nowy projekt.
Kliknij szablon Pustka aktywność, aby wybrać go do projektu. Szablony tworzą strukturę projektu i pliki potrzebne do jego kompilacji w Android Studio.
Kliknij Dalej, aby otworzyć okno Nowy projekt.
Skonfiguruj projekt. Wpisz nazwę aplikacji, nazwę pakietu i docelowe zestawy SDK. Następnie kliknij Next (Dalej).
Ustaw Minimalna wymagana wersja pakietu SDK na interfejs API 24: Android 7.0 (Nougat).
Kliknij Zakończ.

Android Studio otworzy nowy projekt.

Struktura projektu

Początkowy projekt utworzony przez Android Studio zawiera szablon kodu do konfiguracji aplikacji. Oto kilka przykładów takich folderów:

src/main/java. Kod źródłowy w języku Java na Androida.
src/main/res. Zasoby używane przez aplikację.
src/main/res/drawable. Zasoby graficzne używane przez aplikację.
src/main/res/xml. Pliki układu XML, które definiują strukturę elementów interfejsu użytkownika.
src/main/res/values. Wymiary, ciągi znaków i inne wartości, których nie chcesz kodować na stałe w aplikacji.
src/main/AndroidManifest.xml. Plik manifestu określa, co zawiera aplikacja, np. czynności, uprawnienia i motywy.

Dodawanie WebView

Następnie dodaj WebView do układu głównej aktywności.

Otwórz plik activity_main.xml w katalogu src/main/res/xml, jeśli nie jest jeszcze otwarty. (Możesz też zobaczyć plik fragment_main.xml. Możesz to zignorować, ponieważ nie jest to wymagane w tym samouczku.

Aby wyświetlić znaczniki XML, wybierz kartę Tekst u dołu edytora activity_main.xml.

Plik ten definiuje układ głównej aktywności, a panele Podgląd wyświetlają podgląd aktywności. Układ Pusta aktywność nie zawiera żadnych podrzędnych. Musisz dodać WebView.

W panelu XML usuń ukośnik zamykający na końcu elementu FrameLayout i dodaj element <WebView> oraz nowy tag zamykający, jak pokazano poniżej:

<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    tools:ignore="MergeRootFrame">

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

Aby używać WebView, musisz odwołać się do niego w komponencie Activity. Otwórz w katalogu src/main/java/<PackageName> plik źródłowy Java dla głównej aktywności MainActivity.java.

Dodaj wiersze wyróżnione pogrubioną czcionką.
```
public class MainActivity extends Activity {

    private WebView mWebView;

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

        mWebView = (WebView) findViewById(R.id.activity_main_webview);
```
Istniejący kod w metodie onCreate odpowiada za połączenie aktywności z układem. Dodane wiersze tworzą nową zmienną członkowską mWebView, która odnosi się do widoku internetowego.

Usuń ten kod:
```
if (savedInstanceState == null) {
  getSupportFragmentManager().beginTransaction()
    .add(R.id.container, new PlaceholderFragment())
    .commit();
}
```
WebView jest identyfikowany przez identyfikator zasobu, który jest określany przez tę linię w pliku układu:
```
android:id="@+id/activity_main_webview"
```
Po dodaniu kodu zobaczysz na marginesie edytora komunikaty z ostrzeżeniem. Dzieje się tak, ponieważ nie zaimportowano odpowiednich klas do WebView. Na szczęście Android Studio może pomóc Ci uzupełnić brakujące klasy. Najłatwiejszym sposobem jest kliknięcie i najechanie kursorem na nazwę nieznanej klasy, a potem zaczekanie, aż moduł wyświetli „szybkie rozwiązanie”. W tym przypadku jest to dodanie instrukcji import do klasy WebView.

Aby zaakceptować szybkie rozwiązanie, naciśnij Alt + Enter (Option + Enter na Macu).

Gdy już masz komponent WebView, możesz go skonfigurować i wczytać interesujące treści.

Włącz obsługę języka JavaScript

Komponent WebView domyślnie nie zezwala na wykonywanie kodu JavaScript. Aby uruchomić aplikację internetową w komponencie WebView, musisz wyraźnie włączyć JavaScript, dodając do metody onCreate te wiersze:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Ładowanie zdalnego adresu URL

Jeśli chcesz wczytywać dane z zewnętrznego adresu URL, aplikacja musi mieć uprawnienia dostępu do internetu. To uprawnienie musisz dodać w pliku manifestu aplikacji.

Otwórz plik AndroidManifest.xml w katalogu src/res. Dodaj wiersz pogrubiony przed tagiem zamykającym </manifest>.

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
...
 
  </application>
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>

Następnym krokiem jest wywołanie metody loadUrl w webview. Dodaj ten wiersz na końcu metody onCreate.
```
mWebView.loadUrl("[https://beta.html5test.com/][8]");
```
Spróbuj teraz uruchomić projekt. Jeśli nie masz pod ręką urządzenia, możesz utworzyć emulator (urządzenie wirtualne z Androidem) w sekcji Narzędzia > Android > Menedżer urządzenia wirtualnego z Androidem.

Obsługa nawigacji

Spróbuj zmienić adres URL na https://www.css-tricks.com/ i ponownie uruchom aplikację. Zauważysz coś dziwnego.

Jeśli uruchomisz aplikację z witryną zawierającą przekierowanie, np. css-tricks.com, otworzy ona witrynę w przeglądarce na urządzeniu, a nie w komponencie WebView. Prawdopodobnie nie jest to pożądane zachowanie. Dzieje się tak, ponieważ WebView obsługuje zdarzenia nawigacji w specyficzny sposób.

Oto sekwencja zdarzeń:

WebView próbuje wczytać oryginalny adres URL z serwera zdalnego i otrzymuje przekierowanie do nowego adresu URL.
WebView sprawdza, czy system może obsłużyć zamiar wyświetlenia adresu URL. Jeśli tak, system obsługuje nawigację po adresie URL. W przeciwnym razie WebView przejdzie do nawigacji wewnętrznej (na przykład, jeśli użytkownik nie ma zainstalowanej przeglądarki na urządzeniu).
System wybiera preferowaną przez użytkownika aplikację do obsługi schematu adresu URL https://, czyli domyślną przeglądarkę użytkownika. Jeśli masz zainstalowanych więcej przeglądarek, może pojawić się okno dialogowe.

Jeśli używasz WebView w aplikacji na Androida do wyświetlania treści (np. strony pomocy), może to być właśnie to, czego potrzebujesz. W bardziej zaawansowanych aplikacjach linki nawigacyjne możesz jednak obsługiwać samodzielnie.

Aby obsłużyć nawigację w WebView, musisz zastąpić element WebViewClient, który obsługuje różne zdarzenia generowane przez WebView. Możesz go użyć, aby kontrolować sposób obsługi przez WebView kliknięć linków i przekierowań na inne strony.

Domyślna implementacja WebViewClient powoduje, że każdy adres URL otwiera się w WebView:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

To dobry krok naprzód, ale co, jeśli chcesz obsługiwać tylko linki do swojej witryny, a inne adresy URL otwierać w przeglądarce?

Aby to zrobić, musisz rozszerzyć klasę WebViewClient i zaimplementować metodę shouldOverrideUrlLoading. Ta metoda jest wywoływana, gdy komponent WebView próbuje przejść do innego adresu URL. Jeśli zwróci wartość „fałsz”, komponent WebView otworzy adres URL samodzielnie. (domyślna implementacja zawsze zwraca wartość fałsz, dlatego działa w poprzednim przykładzie).

Tworzenie nowych zajęć:

Kliknij prawym przyciskiem myszy nazwę pakietu aplikacji i wybierz Nowy > Klasa Java.
Wpisz MyAppWebViewClient jako nazwę zajęć i kliknij OK.
Dodaj do nowego pliku MyAppWebViewClient.java ten kod (zmiany są wyróżnione pogrubioną czcionką):
```
public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
      return false;
    }
               
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}
```
Nowy kod definiuje klasę MyAppWebViewClient jako podklasę klasy WebViewClient i wdraża metodę shouldOverrideUrlLoading.

Metoda shouldOverrideUrlLoading jest wywoływana zawsze, gdy WebView ma wczytać adres URL. Ta implementacja sprawdza, czy na końcu nazwy hosta adresu URL znajduje się ciąg „css-tricks.com”. Jeśli ciąg znaków istnieje, metoda zwraca wartość false, co oznacza, że platforma nie powinna zastąpić adresu URL, ale wczytać go w komponencie WebView.

W przypadku innych nazw hosta metoda wysyła do systemu żądanie otwarcia adresu URL. Robi to, tworząc nowy intencjonalnie na Androidzie i wykorzystując go do uruchomienia nowej aktywności. Zwrócenie wartości true na końcu metody uniemożliwia wczytanie adresu URL do WebView.
Aby używać nowego niestandardowego klienta WebViewClient, dodaj te wiersze do klasy MainActivity:
```
// Stop local links and redirects from opening in browser instead of WebView
mWebView.setWebViewClient(new MyAppWebViewClient());
```
Użytkownik może teraz kliknąć dowolny link do CSS Tricks, nie wychodząc z aplikacji, ale linki do zewnętrznych witryn otwierają się w przeglądarce.

Obsługa przycisku Wstecz na Androidzie

Gdy zaczniesz przeglądać artykuły w CSS Tricks, kliknięcie przycisku Wstecz na urządzeniu z Androidem spowoduje zamknięcie aplikacji.

Metoda WebView canGoBack informuje, czy w stogu stron znajduje się element, który można usunąć. Aby wykryć naciśnięcie przycisku Wstecz i określić, czy należy cofnąć się do historii WebView, czy pozwolić platformie określić prawidłowe działanie, dodaj metodę onBackPressed() do metody MainActivity:

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

Ładowanie kodu HTML z systemu plików

Jedną z największych zalet korzystania z komponentu WebView w aplikacji do zainstalowania jest możliwość przechowywania zasobów w aplikacji. Dzięki temu aplikacja może działać w trybie offline, a czas wczytywania jest krótszy, ponieważ komponent WebView może pobierać zasoby bezpośrednio z lokalnego systemu plików.

Aby przechowywać pliki lokalnie, w tym pliki HTML, JavaScript i CSS, przechowuj je w katalogu assets. To zarezerwowany katalog, którego Android używa do plików nieprzetworzonych. Aplikacja musi mieć dostęp do tego katalogu, ponieważ może być konieczne zminimalizowanie lub skompresowanie niektórych plików.

Utwórz katalog assets/www w folderze głównym (src/main/assets/www).
- Sprawdzoną metodą jest przechowywanie plików internetowych w podkatalogu /assets.
Uwaga: w WebView tylko ścieżki względne działają w przypadku odwoływania się do innych plików, takich jak CSS i JavaScript. Zamiast ścieżek bezwzględnych, takich jak /pages/somelink.html, używaj ścieżek względnych, takich jak ./pages/somelink.html.
Prześlij wszystkie pliki do katalogu.

Załaduj odpowiedni plik:

mWebView.loadUrl("file:///android_asset/www/index.html");

Zaktualizuj metodę shouldOverrideUrlLoading, aby otworzyć przeglądarkę na potrzeby stron nielokalnych:

public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().length() == 0) {
      return false;
    }

    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}

Teraz możesz tworzyć świetne aplikacje WebView.

Wskazówki dotyczące tworzenia obrazu o wysokiej jakości znajdziesz w artykule UI o wysokiej jakości w WebView.

Jeśli napotkasz problemy, Narzędzia deweloperskie Chrome Ci pomogą. Aby rozpocząć, zapoznaj się z artykułem zdalne debugowanie na Androidzie.