Поиск по сайту:

Учебник по примерам Android WebView


Android WebView используется для отображения HTML в приложении для Android. Мы можем использовать Android WebView для загрузки HTML-страницы в приложение для Android.

Android-веб-просмотр

Компонент Android WebView — это полноценный браузер, реализованный как подкласс View для встраивания в наше приложение для Android.

Важность Android WebView

Для HTML-кода, объем которого ограничен, мы можем реализовать статический метод fromHtml(), принадлежащий классу утилиты HTML, для разбора строки в формате HTML и ее отображения в TextView. TextView может отображать простое форматирование, такое как стили (полужирный, курсив и т. д.), шрифты (с засечками, без засечек и т. д.), цвета, ссылки и т. д. Однако когда дело доходит до сложного форматирования и более широкого охвата с точки зрения HTML, TextView не справляется с этим. Например, просмотр Facebook через TextView будет невозможен. В таких случаях WebView будет более подходящим виджетом, так как он может обрабатывать гораздо более широкий диапазон тегов HTML. WebView также может обрабатывать CSS и JavaScript, которые Html.fromHtml() просто проигнорирует. WebView также может помочь с распространенными метафорами просмотра, такими как список истории посещенных URL-адресов, для поддержки навигации назад и вперед. Тем не менее, WebView имеет свой собственный набор недостатков, таких как использование гораздо более дорогого виджета с точки зрения потребления памяти, чем TextView. Причина этого увеличения памяти заключается в том, что WebView работает на WebKit/Blink, которые являются механизмом веб-рендеринга с открытым исходным кодом для поддержки контента в браузерах, таких как Chrome.

Пример веб-просмотра Android

Компонент Android WebView вставляется в файл макета XML для макета, в котором мы хотим отображать WebView. В этом примере мы вставляем его в файл activity_main.xml, как показано ниже:

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

Код Android Studio WebView

Компонент WebView инициализируется в MainActivity с использованием его идентификатора, определенного в activity_main.xml, как показано во фрагменте ниже:

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

URL-адрес загрузки Android WebView

Получив ссылку на WebView, мы можем настроить его и загрузить URL-адреса через HTTP. Метод WebView loadUrl() используется для загрузки URL-адреса в WebView, как показано ниже:

webView.loadUrl("https://www.journaldev.com");

Прежде чем мы начнем играть с URL-адресом, есть два важных аспекта, на которые мы должны обратить внимание:

  1. Supporting JavaScript: JavaScript is by default turned off in WebView widgets. Hence web pages containing javascript references won’t work properly. To enable java script the following snippet needs to be called on the webview instance:

    getSettings().setJavaScriptEnabled(true);
    
  2. Adding Permissions: To fetch and load the urls in the WebView we need to add permissions to access the internet from within the app else it won’t be able to load the webpages. The following line of code needs to be added in the AndroidManifest.xml file above the application tag as shown below:

    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="https://schemas.android.com/apk/res/android"
        package="com.journaldev.webview" >
    
        <uses-permission android:name="android.permission.INTERNET" />
    
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/AppTheme" >
            <activity
                android:name=".MainActivity"
                android:label="@string/app_name" >
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    
    </manifest>
    

Приведенный ниже класс MainActivity содержит все функции, которые обсуждались до сих пор.

package com.journaldev.webview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

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

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

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.loadUrl("https://www.journaldev.com");
    }

}

Настройка WebViewClient

Поведение по умолчанию, когда пользователь щелкает ссылку на веб-странице, заключается в открытии системного браузерного приложения по умолчанию. Это может нарушить работу пользователей приложения. Чтобы сохранить навигацию по страницам в WebView и, следовательно, в приложении, нам нужно создать подкласс WebViewClient и переопределить его метод shouldOverrideUrlLoading(WebView webView, String url). Вот как будет выглядеть такой подкласс WebViewClient:

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        return false;
    }
}

Когда метод shouldOverrideUrlLoading() возвращает false, URL-адреса, переданные в качестве параметра метода, загружаются внутри WebView, а не в браузере. Чтобы различать URL-адреса, загружаемые в приложении и браузере, необходимо добавить следующий код в метод shouldOverrideUrlLoading():

if(url.indexOf("journaldev.com") > -1 ) return false;
        return true;

Примечание. Возврат значения true не означает, что URL-адрес открывается в приложении браузера. На самом деле URL-адрес вообще не будет открыт. Чтобы загрузить URL-адрес в браузер, необходимо активировать намерение. Следующий подкласс содержит все добавленные нами конфигурации.

package com.journaldev.webview;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class WebViewClientImpl extends WebViewClient {

    private Activity activity = null;

    public WebViewClientImpl(Activity activity) {
        this.activity = activity;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        if(url.indexOf("journaldev.com") > -1 ) return false;

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

}

Конструктор принимает Activity в качестве параметра для запуска намерения в браузере. Перед созданием экземпляра этого подкласса в MainActivity давайте рассмотрим еще одну важную функцию.

Навигация WebView с кнопкой «Назад»

Если мы нажмем кнопку «Назад» в приложении, разработанном до сих пор, мы увидим, что приложение возвращается на главный экран, даже если мы перешли через несколько страниц в самом WebView. Чтобы просмотреть историю просмотров при нажатии кнопки «Назад», нам нужно изменить функцию кнопки «Назад», как показано во фрагменте ниже:

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

Метод onKeyDown() был переопределен реализацией, которая сначала проверяет, может ли WebView вернуться. Если пользователь ушел с первой страницы, загруженной в WebView, тогда WebView может вернуться. WebView поддерживает историю просмотров, как и обычный браузер. Если истории нет, это приведет к поведению кнопки «Назад» по умолчанию, то есть к выходу из приложения. Ниже приведен код для MainActivity с перечисленными выше функциями.

package com.journaldev.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView = null;

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

        this.webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        webView.setWebViewClient(webViewClient);

        webView.loadUrl("https://www.journaldev.com");
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}

Альтернативы для загрузки контента в WebView

До сих пор мы использовали метод loadUrl() для загрузки содержимого в WebView. Здесь мы увидим другие способы загрузки контента после краткого ознакомления с использованием loadUrl(). loadUrl() работает с:

  • https:// и https://URL
  • file:// URL-адреса, указывающие на локальную файловую систему
  • file:///android_asset/ URL-адреса, указывающие на один из ресурсов вашего приложения
  • content:// URL-адреса, указывающие на ContentProvider, который публикует контент, доступный для потоковой передачи

Вместо loadUrl() мы можем использовать loadData(), с помощью которой мы можем отображать фрагменты или весь HTML-код в методе. Есть два варианта loadData(). Более простой вариант позволяет нам предоставлять содержимое, тип MIME и кодировку в виде строк. Как правило, тип MIME будет text/html, а кодировка будет UTF-8 для обычного HTML, как показано ниже:

webView.loadData("<html><body>Hello, world!</body></html>",
                  "text/html", "UTF-8");

Ниже приведен вывод, когда приведенный выше фрагмент добавляется в MainActivity, как показано ниже:

package com.journaldev.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView = null;

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

        this.webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        webView.setWebViewClient(webViewClient);

        //webView.loadUrl("https://www.journaldev.com");
        webView.loadData("<html><body>Hello, world!</body></html>", "text/html", "UTF-8");
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}
String baseUrl    = "https://www.journaldev.com";
String data       = "Relative Link";
String mimeType   = "text/html";
String encoding   = "UTF-8";
String historyUrl = "https://www.journaldev.com";

webView.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl);

На этом пример учебника по WebView для Android заканчивается. Вы можете скачать окончательный проект веб-просмотра Android по ссылке ниже.

Скачать пример проекта Android WebView