Dies ist ein android WebView Tutorial und Beispiele. Eine WebView ist eine android SDK-Ansicht, die in der Lage ist, Webseiten darzustellen.

Was ist eine WebView?

Ein WebView ist, wie wir bereits gesagt haben, eine Ansicht, die Webseiten anzeigt.

Sie wird durch die Klasse WebView repräsentiert. Diese Klasse ist viel mächtiger, als Sie vielleicht denken. Dennoch ist sie sehr einfach und geradlinig zu verwenden und bietet Ihnen Abstraktionen, auf denen Sie aufbauen können.

Diese Klasse ist die Grundlage, auf der Sie Ihren eigenen Webbrowser erstellen oder einfach einige Online-Inhalte innerhalb Ihrer Aktivität anzeigen können. WebView" nutzt die Rendering-Engine WebKit zur Darstellung von Webseiten und enthält Methoden, um:

  1. vorwärts und rückwärts durch einen Verlauf zu navigieren
  2. ein- und auszoomen.
  3. eine Textsuche durchführen und mehr.

WebView ist sehr leistungsfähig, da es Ihnen eine Möglichkeit bietet, Anwendungen in Sprachen wie Javascript und HTML zu schreiben. Es gibt so viele Frameworks, die diese Fähigkeit nutzen und es Ihnen ermöglichen, Ihre Anwendung in HTML5-Technologien zu schreiben. Sie können sogar Ihre Website, z. B. eine WordPress-Website, in eine Android-App verwandeln.

WebView API Definition

WebView" ist eine konkrete Klasse, die sich im Paket "Android.Webkit" befindet. Sie leitet sich von der Klasse android.widget.AbsoluteLayout ab und implementiert mehrere Schnittstellen wie unten gezeigt:

public class WebView extends AbsoluteLayout implements ViewTreeObserver.OnGlobalFocusChangeListener, ViewGroup.OnHierarchyChangeListener

Hier ist die Vererbungshierarchie der Klasse:

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.AbsoluteLayout
               ↳    android.webkit.WebView

Warum Webview?

WebView ist wahrscheinlich eine der praktischsten, einfach zu bedienenden und dennoch wenig genutzten Klassen in Android. Das liegt daran, dass sie es Ihnen im Grunde ermöglicht, eine Android-App mit HTML, CSS und Javascript zu erstellen. Ich würde es verstehen, wenn sie nicht so viel genutzt würde, wenn sie kein Javascript ausführen oder CSS rendern könnte. Aber all das kann es.

Damit verfügt es über leistungsstarke Funktionen, denn HTML, CSS und Javascript sind einfach zu verwendende, beliebte Technologien, die die Benutzeroberflächen fast aller Webanwendungen oder Websites, die Sie jemals besucht haben, antreiben. Außerdem gibt es Hunderte von Frameworks/Bibliotheken für diese Technologien, die leistungsstarke Widgets und Abstraktionen bereitstellen. Dazu gehören jQuery, Vue.js, Angular, React.js, Bootstrap, materializecss, UIKit usw.

Sie können ganz einfach eine einfache clientseitige Webanwendung erstellen, die mit serverseitigen Technologien wie Node.js und PHP interagieren kann, und diese dann in Ihrem Assets-Ordner ablegen. Verwenden Sie dann WebView, um sie zu laden. Sie müssen jedoch sicherstellen, dass Javascript aktiviert ist. Ich weiß, dass dies nicht so leistungsfähig ist wie eine vollständige Java-Anwendung, die in Java, Kotlin oder C# geschrieben wurde, aber für Anfänger würden Sie schnell Ihre erste Anwendung erstellen, die Sie Freunden zeigen können, während Sie Ihre Ausbildung fortsetzen.

Verwendung von WebView

In den meisten Fällen werden Sie Online-Inhalte in Ihrem Webview darstellen wollen. Damit deine Aktivität auf das Internet zugreifen und Webseiten in einer WebView laden kann, musst du die INTERNET-Berechtigungen zu deiner Android Manifest-Datei hinzufügen:

<uses-permission android_name="android.permission.INTERNET" />

Dann fügen Sie in Ihrem Layout ein <WebView> hinzu, oder setzen Sie das gesamte Activity-Fenster als WebView während onCreate():

 WebView webview = new WebView(this);
 setContentView(webview);

Sobald du das getan hast, kannst du deine Webseite über die Methode loadUrl() laden:

 // Simplest usage: note that an exception will NOT be thrown
 // if there is an error loading this page (see below).
 webview.loadUrl("https://camposha.info/");

Die Methode loadurl() lädt unsere Webseite von der von uns angegebenen Url. Dies ist die am häufigsten verwendete Methode.

Sie können auch von einem HTML string laden:

 String summary = "<html><body>You scored <b>192</b> points.</body></html>";
 webview.loadData(summary, "text/html", null);
 // ... although note that there are restrictions on what this HTML can do.
 // See the JavaDocs for loadData() and loadDataWithBaseURL() for more info.

Das bedeutet, dass Sie Ihren HTML-Code in eine Zeichenkette schreiben. Dann laden Sie ihn über die Methode loadData(). Dies eignet sich zum Laden von Webseiten mit einfacher DOM(Document Object Model) Struktur.

Schnelle WebView Beispiele und HowTo's

Schauen wir uns schnelle HowTos für unsere Webview-Klasse an. Später werden wir dann sehen, wie man eine vollständige Anwendung schreibt.

1. Häufig verwendete WebView-Einstellungen

Hier sind einige häufig benutzte WebView-Einstellungen. Lassen Sie uns diese in einer einfachen statischen Methode kapseln, die wir dann leicht wiederverwenden können.

    // Commonly used WebViewSetting
    public static void initWebSetting(WebView webView) {
        WebSettings setting = webView.getSettings();
        setting.setJavaScriptEnabled(true);
        setting.setAllowFileAccess(true);
        setting.setAllowFileAccessFromFileURLs(true);
        setting.setAllowUniversalAccessFromFileURLs(true);
        setting.setAppCacheEnabled(true);
        setting.setDatabaseEnabled(true);
        setting.setDomStorageEnabled(true);
        setting.setCacheMode(WebSettings.LOAD_DEFAULT);
        setting.setAppCachePath(webView.getContext().getCacheDir().getAbsolutePath());
        setting.setUseWideViewPort(true);
        setting.setLoadWithOverviewMode(true);
        setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            setting.setAllowFileAccessFromFileURLs(true);
        }
    }

Diese Methode nimmt ein WebView Objekt. Wir erhalten zuerst die Webview-Einstellungen über die Methode getSettings der Klasse WebView. Dann aktivieren wir Javascript mit der Methode setJavaScriptEnabled(). Die meisten dieser Einstellungsmethoden nehmen einen booleschen Wert an, um verschiedene Einstellungen entweder zu aktivieren oder zu deaktivieren.

2. Wie man eine benutzerdefinierte WebView erstellt

Wir wollen eine benutzerdefinierte Webansicht erstellen, die in einer NestedScrollView verwendet werden kann.

import android.content.Context;
import android.support.v4.view.MotionEventCompat;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.webkit.WebView;

public class MyWebView extends WebView {

    public MyWebView(Context context) {
        super(context);
    }

    public MyWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        //Check pointer index to avoid -1 (error)
        if (MotionEventCompat.findPointerIndex(event, 0) == -1) {
            return super.onTouchEvent(event);
        }

        if (event.getPointerCount() >= 1) {
            requestDisallowInterceptTouchEvent(true);
        } else {
            requestDisallowInterceptTouchEvent(false);
        }

        return super.onTouchEvent(event);
    }

    @Override
    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
        requestDisallowInterceptTouchEvent(true);
    }
}

1. Android WebView - Laden aus URL, Strings und Asset-Ordner

Android WebView - Laden aus URL, Strings und Asset-Ordner

WebView ist eigentlich eine der Klassen, die es in Android von Anfang an gegeben hat.

Sie wurde in der API-Stufe 1 hinzugefügt und befindet sich im android.webkit-Paket. Es wird verwendet, um Webinhalte direkt innerhalb der "Aktivität" anzuzeigen. Das macht sie sehr leistungsfähig und kann verwendet werden, um sogar einen einfachen Browser zu bauen, der funktioniert. Es ist immer noch eine Ansicht, so dass wir sie einfach aus der Palette in unser Layout ziehen können. Er rendert Webseiten mit der Webkit-Rendering-Engine. In diesem Beispiel verwenden wir einen Webview, um Webinhalte von :

  • URL online.
  • Lokaler Ordner Assets.
  • Zeichenkette im Java-Code.

Um von einer URL zu laden, muss die android internet permission in der androidmanifest.xml eingetragen werden. Weitere Einzelheiten über WebView finden Sie hier.

Bildschirmfoto
  • Hier ist der Screenshot des Projekts.


Häufige Fragen, die dieses Beispiel untersucht
  • Was ist WebView?
  • Wie lade ich eine Website von einer URL in Webview?
  • Wie lade ich html aus dem Ordner Assets in Webview.
  • Wie lädt man html string in webview.
  • Wie benutzt man Webview in Android Activity.
Verwendete Werkzeuge

Dieses Beispiel wurde mit den folgenden Tools geschrieben:

  • Windows 8
  • AndroidStudio IDE
  • Genymotion-Emulator
  • Sprache: Java

In diesem Projekt wurde keine Bibliothek eines Drittanbieters verwendet.

Lassen Sie uns direkt zum Quellcode springen.

AndroidManifest.xml
  • Android Manifest"-Datei.
  • Fügen Sie die Internet-Berechtigung hinzu, da wir eine Webseite auch von url abrufen werden.

<?xml version="1.0" encoding="utf-8"?>
<manifest
    package="com.tutorials.hp.webviewer">

    <uses-permission android_name="android.permission.INTERNET"/>
    ...
</manifest>
Build.Gradle
  • Normalerweise gibt es in Android-Projekten zwei build.gradle-Dateien. Eine ist die App-Ebene build.gradle, die andere ist die Projektebene build.gradle. Die App-Ebene gehört in den App-Ordner und ist der Ort, an dem wir normalerweise unsere Abhängigkeiten hinzufügen und die Kompilier- und Ziel-Sdks angeben.
  • Fügen Sie auch Abhängigkeiten für AppCompat und Design Support Bibliotheken hinzu.
  • Unsere MainActivity soll von AppCompatActivity abgeleitet werden, während wir auch den Floating Action Button aus den Design Support Bibliotheken verwenden sollen.

dependencies {
    implementation 'com.android.support:appcompat-v7:26.+'
    implementation 'com.android.support.constraint:constraint-layout:1.0.0-alpha7'
    implementation 'com.android.support:design:26.+'
    testImplementation 'junit:junit:4.12'
}
MainActivity.java
  • Launcher Activity.
  • ActivityMain.xml wird als Inhaltsansicht für diese Activity aufgeblasen.
  • Wir initialisieren Ansichten und Widgets innerhalb dieser Activity.
  • Wir schalten durch die Menüpunkte in unserer Symbolleiste und wählen aus, ob wir von url, assets oder string laden wollen.

package com.tutorials.hp.webviewer;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        webView= (WebView) findViewById(R.id.myWebview);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });
    }

    /*
    LOAD WEBSITE
     */

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.urlID) {
            //LOAD FROM URL
            webView.loadUrl("https://camposha.info");

            return true;
        }else if (id == R.id.assetsID) {

            //LOAD FROM ASSETS
            webView.loadUrl("file:///android_asset/Campo.html");

            return true;
        }else if (id == R.id.stringID) {

            //LOAD FROM STRING
            String html="<html><title></title><body>" +
                    "<h1><u>Programming Languages</u></h1>" +
                    "Below are some languages check them out: " +
                    "<ol>" +
                    "<li>Java</li><li>C#</li><li>C++</li><li>Python</li><li>PHP</li><li>Perl</li>" +
                    "</ol>" +
                    "</body></html>";
            webView.loadData(html,"text/html","UTF-8");

            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}
ActivityMain.xml
  • Template-Layout.
  • Enthält unsere ContentMain.xml.
  • Definiert auch das appbarlayout, toolbar sowie den floatingaction buttton.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    tools_context="com.tutorials.hp.webviewer.MainActivity">

    <android.support.design.widget.AppBarLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android_id="@+id/toolbar"
            android_layout_width="match_parent"
            android_layout_height="?attr/actionBarSize"
            android_background="?attr/colorPrimary"
            app_popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android_id="@+id/fab"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_gravity="bottom|end"
        android_layout_margin="@dimen/fab_margin"
        app_srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>
ContentMain.xml
  • Content Layout.
  • Definiert die Ansichten und Widgets, die innerhalb der MainActivity angezeigt werden sollen.
  • In diesem Fall ist es eine einfache Webansicht.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    app_layout_behavior="@string/appbar_scrolling_view_behavior"
    tools_context="com.tutorials.hp.webviewer.MainActivity"
    tools_showIn="@layout/activity_main">

    <WebView
        android_id="@+id/myWebview"
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_layout_centerHorizontal="true"
        />

</android.support.constraint.ConstraintLayout>
menu_main.xml
  • Wir werden durch die Menüpunkte in unserer Symbolleiste wechseln.
  • Definieren wir dies in menu_main.xml im Verzeichnis des Menüs.

<menu

    tools_context="com.tutorials.hp.webviewer.MainActivity">
    <item
        android_id="@+id/action_settings"
        android_orderInCategory="100"
        android_title="@string/action_settings"
        app_showAsAction="never" />
    <item
        android_id="@+id/urlID"
        android_title="URL"
        app_showAsAction="never" />

    <item
        android_id="@+id/assetsID"
        android_title="Assets"
        app_showAsAction="never" />

    <item
        android_id="@+id/stringID"
        android_title="String"
        app_showAsAction="never" />
</menu>
Download.
  • Laden Sie das folgende Projekt herunter:
No. Ort Link
1. GitHub Direkter Download
2. GitHub Durchsuchen
Schlussfolgerung.

Wir haben ein einfaches Android-Webview-Beispiel gesehen. Wie man Webseiten aus dem Internet per Url, aus dem Ordner "Assets" und aus "String"-Daten lädt.

Wie man CSS in eine WebView einfügt

Vielleicht möchten Sie eine Seite, die Ihnen nicht gehört, mit CSS manipulieren. Nehmen wir an, dass eine Webseite geladen wird und Sie dann Ihr eigenes Styling in CSS anwenden.

Dies ist in android webview möglich. Hier sind die Schritte:

Schritt 1: Base64 importieren

Fügen Sie den folgenden Import hinzu:

import android.util.Base64

Schritt 2: Erstellen Sie eine Funktion zum Einfügen von css

Diese Funktion wird css über Javascript einfügen:

private fun injectCSS() {
            try {
                val inputStream = assets.open("style.css")
                val buffer = ByteArray(inputStream.available())
                inputStream.read(buffer)
                inputStream.close()
                val encoded = Base64.encodeToString(buffer , Base64.NO_WRAP)
                webframe.loadUrl(
                    "javascript:(function() {" +
                            "var parent = document.getElementsByTagName('head').item(0);" +
                            "var style = document.createElement('style');" +
                            "style.type = 'text/css';" +
                            // Tell the browser to BASE64-decode the string into your script !!!
                            "style.innerHTML = window.atob('" + encoded + "');" +
                            "parent.appendChild(style)" +
                            "})()"
                )
            } catch (e: Exception) {
                e.printStackTrace()
            }

        }

Schritt 3: Überschreiben Sie onPageFinished

Der nächste Schritt ist das Überschreiben des Ereignisses "onPageFinished", das aufgerufen wird, sobald die Webansicht den Inhalt geladen hat.

 override fun onPageFinished(view: WebView?, url: String?) {
                injectCSS()
}

That's it.

Categorized in:

Inhalt Ansicht

Tagged in: