Diese Seite wurde von der Cloud Translation API übersetzt.

WebView-Anwendungen für Webentwickler

Veröffentlicht: 28. Februar 2014

Hier erfahren Sie, wie Sie ein neues Android-Projekt erstellen, eine Webansicht hinzufügen, eine Remote-URL laden und eine lokale HTML-Seite laden.

In dieser Anleitung wird davon ausgegangen, dass Sie als Entwickler nur begrenzte oder gar keine Erfahrung mit der Android-Entwicklungsumgebung haben, aber einige Erfahrung mit Kotlin. Wenn Sie bereits mit der Programmierung für Android vertraut sind, empfehlen wir Ihnen, den Artikel Web-Apps in WebView erstellen auf der Website für Android-Entwickler zu lesen.

Android Studio installieren

In dieser Anleitung wird Android Studio verwendet, die IDE für die Entwicklung von Android-Apps.

Neues Android-Projekt erstellen

Nach der Installation von Android Studio wird der Einrichtungsassistent gestartet.

So erstellen Sie ein neues Projekt:

Klicken Sie auf Neues Projekt.
Klicken Sie auf die Vorlage Leere Aktivität, um sie für Ihr Projekt auszuwählen. Mit Vorlagen wird die Struktur des Projekts und die Dateien erstellt, die Android Studio zum Erstellen Ihres Projekts benötigt.
Klicken Sie auf Weiter, um das Dialogfeld „Neues Projekt“ zu öffnen.
Konfigurieren Sie Ihr Projekt. Geben Sie den Namen Ihrer Anwendung, den Paketnamen und die Ziel-SDKs ein. Klicken Sie anschließend auf Weiter.
Legen Sie für Minimum required SDK (Mindest erforderliches SDK) die API 24: Android 7.0 (Nougat) fest.
Klicken Sie auf Fertigstellen.

In Android Studio wird das neue Projekt geöffnet.

Projektstruktur

Das erste von Android Studio erstellte Projekt enthält Boilerplate-Code zum Einrichten Ihrer Anwendung. Zu den wichtigsten Importordnern gehören:

src/main/java. Android-Java-Quellcode.
src/main/res. Von der Anwendung verwendete Ressourcen.
src/main/res/drawable. Von der Anwendung verwendete Bildressourcen.
src/main/res/xml: XML-Layoutdateien, die die Struktur der UI-Komponenten definieren.
src/main/res/values. Dimensionen, Strings und andere Werte, die Sie nicht in Ihrer Anwendung hartcodieren möchten.
src/main/AndroidManifest.xml. In der Manifestdatei wird festgelegt, was in der Anwendung enthalten ist, z. B. Aktivitäten, Berechtigungen und Themen.

WebView hinzufügen

Fügen Sie als Nächstes dem Layout der Hauptaktivität eine WebView hinzu.

Öffnen Sie die Datei activity_main.xml im Verzeichnis src/main/res/xml, falls sie noch nicht geöffnet ist. Möglicherweise wird auch eine fragment_main.xml-Datei angezeigt. Sie können diese Meldung ignorieren, da sie für diese Anleitung nicht erforderlich ist.

Wähle unten im activity_main.xml-Editor den Tab Text aus, um das XML-Markup zu sehen.

In dieser Datei wird das Layout für Ihre Hauptaktivität definiert. In den Bereichen Vorschau wird eine Vorschau der Aktivität angezeigt. Das Layout Leere Aktivität enthält keine untergeordneten Elemente. Sie müssen die WebView hinzufügen.

Entfernen Sie im XML-Bereich den Schrägstrich am Ende des FrameLayout-Elements und fügen Sie das <WebView>-Element und ein neues Endtag hinzu, wie unten dargestellt:

<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>

Wenn Sie die WebView verwenden möchten, müssen Sie in der Aktivität darauf verweisen. Öffnen Sie die Java-Quelldatei für die Hauptaktivität MainActivity.java im Verzeichnis src/main/java/<PackageName>.

Fügen Sie die fett formatierten Zeilen hinzu.
```
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);
```
Der vorhandene Code in der onCreate-Methode verbindet die Aktivität mit dem Layout. Durch die hinzugefügten Zeilen wird eine neue Mitgliedsvariable mWebView erstellt, die auf die Webansicht verweist.

Entfernen Sie den folgenden Code:
```
if (savedInstanceState == null) {
  getSupportFragmentManager().beginTransaction()
    .add(R.id.container, new PlaceholderFragment())
    .commit();
}
```
Die WebView wird durch die Ressourcen-ID identifiziert, die in der Layoutdatei in dieser Zeile angegeben ist:
```
android:id="@+id/activity_main_webview"
```
Nachdem Sie den Code hinzugefügt haben, werden im Editor am Rand einige Warnungen angezeigt. Das liegt daran, dass Sie die richtigen Klassen für WebView nicht importiert haben. Glücklicherweise kann Android Studio Ihnen dabei helfen, die fehlenden Klassen einzufügen. Am einfachsten ist es, auf einen unbekannten Klassennamen zu klicken und den Mauszeiger darauf zu bewegen. Warten Sie dann, bis ein Modul mit einer „Schnellkorrektur“ angezeigt wird. In diesem Fall wird eine import-Anweisung für die WebView-Klasse hinzugefügt.

Drücken Sie Alt + Eingabetaste (Option + Eingabetaste auf dem Mac), um die Schnellkorrektur zu akzeptieren.

Nachdem Sie das WebView erstellt haben, können Sie es einrichten und interessante Webinhalte laden.

JavaScript aktivieren

In WebView ist JavaScript standardmäßig nicht zulässig. Wenn Sie eine Webanwendung in der WebView ausführen möchten, müssen Sie JavaScript explizit aktivieren, indem Sie der onCreate-Methode die folgenden Zeilen hinzufügen:

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

Remote-URL laden

Wenn Sie Daten aus einer Remote-URL laden möchten, benötigt Ihre Anwendung die Berechtigung zum Zugriff auf das Internet. Diese Berechtigung muss in der Manifestdatei der Anwendung hinzugefügt werden.

Öffnen Sie die Datei AndroidManifest.xml im Verzeichnis src/res. Fügen Sie die fett formatierte Zeile vor dem schließenden </manifest>-Tag ein.

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

Im nächsten Schritt wird die Methode loadUrl in der Webansicht aufgerufen. Fügen Sie am Ende der Methode onCreate die folgende Zeile hinzu.
```
mWebView.loadUrl("[https://beta.html5test.com/][8]");
```
Versuchen Sie jetzt, das Projekt auszuführen. Wenn Sie kein Gerät zur Hand haben, können Sie einen Emulator (AVD oder Android Virtual Device) erstellen. Klicken Sie dazu auf Tools > Android > AVD-Manager.

Navigation steuern

Ändern Sie die URL, die Sie laden, in https://www.css-tricks.com/ und führen Sie die Anwendung noch einmal aus. Sie werden etwas Seltsames bemerken.

Wenn Sie die Anwendung jetzt mit einer Website mit einer Weiterleitung wie css-tricks.com ausführen, wird die Website in Ihrem App-WebView nicht geöffnet, sondern in einem Browser auf dem Gerät. Das ist wahrscheinlich nicht das, was Sie erwartet haben. Das liegt daran, wie WebView Navigationsereignisse verarbeitet.

So funktionierts:

Die WebView versucht, die ursprüngliche URL vom Remoteserver zu laden, und wird zu einer neuen URL weitergeleitet.
WebView prüft, ob das System einen View Intent für die URL verarbeiten kann. Ist das der Fall, übernimmt das System die URL-Navigation. Andernfalls wechselt WebView intern, z. B. wenn der Nutzer keinen Browser auf seinem Gerät installiert hat.
Das System wählt die bevorzugte Anwendung des Nutzers für die Verarbeitung eines https://-URL-Schemas aus, also den Standardbrowser des Nutzers. Wenn Sie mehrere Browser installiert haben, wird an dieser Stelle möglicherweise ein Dialogfeld angezeigt.

Wenn Sie in einer Android-Anwendung ein WebView zum Anzeigen von Inhalten verwenden (z. B. eine Hilfeseite), ist dies möglicherweise genau das, was Sie möchten. Bei komplexeren Anwendungen sollten Sie die Navigationslinks jedoch selbst verwalten.

Wenn Sie die Navigation innerhalb der WebView steuern möchten, müssen Sie den WebViewClient der WebView überschreiben, der verschiedene von der WebView generierte Ereignisse verarbeitet. Damit können Sie festlegen, wie die WebView mit Linkklicks und Seitenweiterleitungen umgeht.

Bei der Standardimplementierung von WebViewClient wird jede URL im WebView geöffnet:

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

Das ist ein guter Schritt nach vorn. Was aber, wenn Sie nur Links für Ihre Website verarbeiten und andere URLs in einem Browser öffnen möchten?

Dazu müssen Sie die WebViewClient-Klasse erweitern und die Methode shouldOverrideUrlLoading implementieren. Diese Methode wird aufgerufen, wenn die WebView versucht, eine andere URL aufzurufen. Wenn „false“ zurückgegeben wird, öffnet das WebView die URL selbst. (Die Standardimplementierung gibt always zurück, weshalb sie im vorherigen Beispiel funktioniert.)

So erstellen Sie einen neuen Kurs:

Klicken Sie mit der rechten Maustaste auf den Paketnamen Ihrer App und wählen Sie Neu > Java-Klasse aus.
Geben Sie MyAppWebViewClient als Kursnamen ein und klicken Sie auf OK.
Fügen Sie in der neuen MyAppWebViewClient.java-Datei den folgenden Code hinzu (Änderungen fett formatiert):
```
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;
  }
}
```
Im neuen Code wird MyAppWebViewClient als Unterklasse von WebViewClient definiert und die Methode shouldOverrideUrlLoading implementiert.

Die Methode shouldOverrideUrlLoading wird immer dann aufgerufen, wenn in WebView eine URL geladen werden soll. Bei dieser Implementierung wird am Ende des Hostnamens der URL nach dem String „css-tricks.com“ gesucht. Wenn der String vorhanden ist, gibt die Methode „false“ zurück. Die Plattform überschreibt die URL dann nicht, sondern lädt sie in das WebView.

Bei allen anderen Hostnamen sendet die Methode eine Anfrage an das System, um die URL zu öffnen. Dazu wird ein neuer Android-Intent erstellt und verwendet, um eine neue Aktivität zu starten. Wenn am Ende der Methode „wahr“ zurückgegeben wird, wird die URL nicht in die WebView geladen.
Wenn Sie Ihren neuen benutzerdefinierten WebViewClient verwenden möchten, fügen Sie Ihrer MainActivity-Klasse die folgenden Zeilen hinzu:
```
// Stop local links and redirects from opening in browser instead of WebView
mWebView.setWebViewClient(new MyAppWebViewClient());
```
Jetzt kann ein Nutzer auf einen der Links zu CSS-Tricks klicken und in der App bleiben. Links zu externen Websites werden jedoch in einem Browser geöffnet.

Zurück-Schaltfläche von Android verarbeiten

Wenn Sie mit den Artikeln von CSS Tricks herumspielen und die Schaltfläche „Zurück“ auf Android-Geräten anklicken, wird die Anwendung beendet.

Die WebView-Methode canGoBack gibt an, ob sich etwas im Seitenstapel befindet, das entfernt werden kann. Wenn Sie erkennen möchten, ob die Schaltfläche „Zurück“ gedrückt wurde, und festlegen möchten, ob Sie durch den Verlauf der WebView zurückgehen oder der Plattform erlauben möchten, das richtige Verhalten zu bestimmen, fügen Sie der MainActivity die Methode onBackPressed() hinzu:

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) {
       ...
    }
}

HTML aus dem Dateisystem laden

Ein großer Vorteil der Verwendung eines WebView in einer installierbaren Anwendung besteht darin, dass Sie Assets in der App speichern können. So kann Ihre App offline verwendet werden und die Ladezeiten werden verkürzt, da das WebView Assets direkt aus dem lokalen Dateisystem abrufen kann.

Wenn Sie Dateien lokal speichern möchten, z. B. HTML-, JavaScript- und CSS-Dateien, speichern Sie sie im Verzeichnis „assets“. Dies ist ein reserviertes Verzeichnis, das Android für Rohdateien verwendet. Ihre App benötigt Zugriff auf dieses Verzeichnis, da bestimmte Dateien möglicherweise minimiert oder komprimiert werden müssen.

Erstellen Sie das Verzeichnis assets/www im Hauptverzeichnis (src/main/assets/www).
- Es empfiehlt sich, Webdateien in einem Unterverzeichnis von /assets zu speichern.
Hinweis :In der WebView funktionieren nur relative Pfade, wenn sie auf andere Dateien verweisen, z. B. CSS- und JavaScript-Dateien. Verwenden Sie anstelle von absoluten Pfaden wie /pages/somelink.html relative Pfade wie ./pages/somelink.html.
Laden Sie alle Dateien in das Verzeichnis hoch.

Laden Sie die entsprechende Datei hoch:

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

Aktualisieren Sie die shouldOverrideUrlLoading-Methode, um einen Browser für nicht lokale Seiten zu öffnen:

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;
  }
}

Jetzt können Sie eine tolle WebView-App erstellen.

Tipps für die richtige Darstellung finden Sie unter Pixelgenaue Benutzeroberfläche in der WebView.

Wenn Probleme auftreten, sind die Chrome-Entwicklertools Ihr bester Freund. Weitere Informationen finden Sie unter Remote-Debugging unter Android.