Это учебник и примеры для Android WebView. WebView – это представление SDK android, которое способно отображать веб-страницы.

Что такое WebView?

WebView, как мы уже говорили, это WebView – представление, которое отображает веб-страницы.

Оно представлено классом WebView. Этот класс гораздо мощнее, чем вы можете подумать. При этом он очень прост и понятен в использовании и предоставляет вам абстракции, на которые вы можете опираться.

Именно этот класс является основой, на которой вы можете создать свой собственный веб-браузер или просто отобразить онлайн-контент в рамках вашей Активности. WebView использует механизм рендеринга WebKit для отображения веб-страниц и включает методы, позволяющие:

  1. перемещаться вперед и назад по истории
  2. увеличивать и уменьшать масштаб.
  3. выполнять текстовый поиск и многое другое.

WebView является очень мощным средством, поскольку он предоставляет вам возможность писать приложения на таких языках, как Javascript и разметка HTML. Существует множество фреймворков, которые используют эту возможность, позволяя вам писать приложения на технологиях HTML5. Вы даже можете превратить свой сайт, например, сайт wordpress, в приложение для android.

Жареный рис с яйцом и овощами по-китайски, золотистый и хрустящий!

Жареный рис с яйцом...
Жареный рис с яйцом и овощами по-китайски, золотистый и хрустящий!

WebView Определение API

WebView – это конкретный класс, находящийся в пакете android.webkit. Он происходит от класса android.widget.AbsoluteLayout и реализует несколько интерфейсов, как показано ниже:

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

Вот иерархия наследования:

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

Почему Webview?

WebView – это, вероятно, один из самых практичных, простых в использовании, но недостаточно используемых классов в android. Это потому, что он позволяет создавать приложения для android с помощью HTML, CSS и Javascript. Я бы понял, если бы его не использовали так часто, если бы он не мог выполнять Javascript или рендерить CSS. Однако он делает все это.

Это дает мощные возможности, поскольку HTML, CSS и Javascript – простые в использовании, популярные технологии, используемые в пользовательских интерфейсах почти каждого веб-приложения или веб-сайта, который вы когда-либо посещали. Более того, существуют сотни фреймворков/библиотек для этих технологий, которые предоставляют мощные виджеты и абстракции. К ним относятся jQuery, Vue.js, Angular, React.js, Bootstrap, materializecss, UIKit и др.

Вы можете легко создать простое веб-приложение на стороне клиента, которое может взаимодействовать с технологиями на стороне сервера, такими как Node.js и PHP, и поместить его в папку assets. Затем используйте WebView для его загрузки. Однако вы должны убедиться, что Javascript включен. Я понимаю, что это не так мощно, как иметь полноценное Java-приложение, написанное на Java, Kotlin или C#, однако для начинающих вы быстро создадите свое первое приложение, которое сможете показать друзьям, продолжая свое образование.

Использование WebView

В большинстве случаев вы захотите отображать онлайн-контент в веб-вью. Чтобы ваша Activity могла получить доступ к Интернету и загружать веб-страницы в WebView, вы должны добавить разрешение INTERNET в файл Android Manifest:

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

Затем в своем макете добавьте <WebView> или установите все окно Activity как WebView во время onCreate():

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

После этого вы можете загрузить веб-страницу с помощью метода loadUrl():

 // 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/");

Метод loadurl() загрузит наш сайт с указанного нами url. Это наиболее часто используемый способ.

Вы также можете загружать из HTML строки:

 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.

Это означает, что вы пишете HTML-код внутри строки. Затем загружаете его с помощью метода loadData(). Это подходит для загрузки веб-сайтов с простой структурой DOM (Document Object Model).

Быстрые примеры WebView и HowTo’s

Давайте рассмотрим быстрые примеры для нашего класса webview. Позже мы рассмотрим, как написать полноценное приложение.

1. Часто используемые параметры `WebView

Вот некоторые часто используемые настройки WebView. Давайте инкапсулируем их в простой статический метод, который затем можно легко использовать повторно.

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

Этот метод принимает объект WebView. Сначала мы получаем настройки webview с помощью метода getSettings класса WebView. Затем мы включаем javascript с помощью метода setJavaScriptEnabled(). Большинство этих методов настроек принимают булево значение для включения или отключения различных настроек.

2. Как создать пользовательский WebView

Мы хотим создать пользовательский веб-вид, который можно использовать в NestedScrollView.

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 – загрузка из URL, строк и папки активов

Android WebView – загрузка из URL, строк и папки активов.

WebView – это один из тех классов, которые существуют в android с самого начала.

Добавлен в API уровня 1, находится в пакете android.webkit. Он используется для отображения веб-контента прямо внутри активности. Это делает его очень мощным и может быть использовано для создания даже базового работающего браузера. Это все еще представление, поэтому мы можем просто перетащить его из палитры в наш макет. Он рендерит веб-страницы, используя движок рендеринга webkit. В этом примере мы используем веб-вид для рендеринга веб-содержимого из :

  • URL online.
  • Локальная папка Assets.
  • String в java-коде.

Для загрузки из url необходимо разрешение android internet в androidmanifest.xml. Более подробно о WebView вы можете узнать [здесь] (https://developer.android.com/reference/android/webkit/WebView.html).

Скриншот
  • Вот скриншот проекта.

Общие вопросы по этому примеру.
  • Что такое WebView?
  • Как загрузить сайт из url в webview.
  • Как загрузить html из assets frolder в webview.
  • Как загрузить html строку в webview.
  • Как использовать webview в android activity.
Использованные инструменты

Этот пример был написан с использованием следующих инструментов:

  • Windows 8
  • IDE AndroidStudio
  • Genymotion Emulator
  • Язык: Java

В этом проекте не использовались сторонние библиотеки.

Перейдем непосредственно к исходному коду.

AndroidManifest.xml
  • Файл Android Manifest.
  • Добавьте разрешение на интернет, так как мы будем получать веб-страницу также по url.

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

    <uses-permission android_name="android.permission.INTERNET"/>
    ...
</manifest>
Build.Gradle
  • Обычно в проектах android есть два файла build.gradle. Один из них – это build.gradle уровня приложения, а другой – build.gradle уровня проекта. Уровень app принадлежит папке app, и именно там мы обычно добавляем наши зависимости и указываем компилируемые и целевые sdks.
  • Также добавляем зависимости для библиотек AppCompat и Design support.
  • Наша MainActivity будет происходить от AppCompatActivity, а также мы будем использовать плавающую кнопку действия из библиотек поддержки дизайна.

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 раздувается как contentview для этой активности.
  • Мы инициализируем представления и виджеты внутри этой активности.
  • Мы переключаемся между пунктами меню на нашей панели инструментов, выбирая загрузку из url, активов или строки.

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
  • Шаблон макета.
  • Содержит наш ContentMain.xml.
  • Также определяет appbarlayout, toolbar, а также 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
  • Макет контента.
  • Определяет представления и виджеты, которые будут отображаться внутри MainActivity.
  • В данном случае это простое веб-представление.

<?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
  • Мы будем переключаться между пунктами меню на нашей панели инструментов.
  • Давайте определим это в menu_main.xml внутри каталога меню.

<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>
Загрузка
  • Скачайте проект ниже:
No. Расположение Ссылка
1. GitHub Прямая загрузка
2. GitHub Browse
Заключение.

Мы рассмотрели простой пример android webview. Как загружать веб-страницы из сети по url, из папки assets и из данных string.

Как внедрить CSS в WebView.

Вы можете захотеть манипулировать чужой страницей с помощью CSS. Например, загрузится веб-страница, а затем вы примените свой собственный стиль в CSS.

Это возможно в android webview. Вот шаги:

Шаг 1: Импорт Base64

Добавьте следующий импорт:

import android.util.Base64

Шаг 2: Создайте функцию для инъекции css

Эта функция будет внедрять css через Javascript:

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()
            }

        }

Шаг 3: Переопределите onPageFinished.

Следующим шагом будет переопределение события onpage finished, которое вызывается, когда webview завершает загрузку содержимого.

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

Вот и все.