Tutoriel Android WebView et exemples

Il s'agit d'un tutoriel android WebView et d'exemples. Une WebView est une vue du SDK android qui est capable de rendre des pages web.

Qu'est-ce qu'une `WebView` ?

Une WebView, comme nous l'avons dit, est une vue qui affiche des pages web.

Elle est représentée par la classe WebView. Cette classe est beaucoup plus puissante que vous ne le pensez. Pourtant, elle est très facile et directe à utiliser et vous fournit des abstractions sur lesquelles vous pouvez construire.

C'est cette classe qui est la base sur laquelle vous pouvez créer votre propre navigateur web ou simplement afficher du contenu en ligne dans votre Activité. WebView utilise le moteur de rendu WebKit pour afficher les pages web et inclut des méthodes pour :

naviguer en avant et en arrière dans un historique
faire un zoom avant et arrière.
effectuer des recherches de texte et plus encore.

WebView est très puissant car il vous offre un moyen d'écrire des applications dans des langages comme Javascript et le balisage HTML. Il existe de nombreux frameworks qui utilisent cette capacité, vous permettant ainsi d'écrire votre application dans les technologies HTML5. Vous pouvez même transformer votre site Web, par exemple un site WordPress, en une application Android.

Définition de l'API `WebView`.

WebView est une classe concrète résidant dans le paquet android.webkit. Elle dérive de la classe android.widget.AbsoluteLayout et implémente plusieurs interfaces comme indiqué ci-dessous :

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

Voici sa hiérarchie d'héritage :

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

Pourquoi Webview ?

WebView est probablement l'une des classes les plus pratiques, faciles à utiliser et pourtant sous-utilisées d'android. C'est parce qu'elle vous permet essentiellement de créer une application android en utilisant HTML, CSS et Javascript. Je comprendrais qu'elle ne soit pas autant utilisée si elle ne pouvait pas exécuter Javascript ou rendre CSS. Cependant, il fait tout cela.

Il offre donc des capacités puissantes, car HTML, CSS et Javascript sont des technologies populaires et faciles à utiliser qui alimentent les interfaces utilisateur de presque toutes les applications Web ou sites Web que vous avez déjà visités. De plus, il existe des centaines de frameworks/bibliothèques pour ces technologies qui fournissent de puissants widgets et abstractions. Il s'agit notamment de jQuery, Vue.js, Angular, React.js, Bootstrap, materializecss, UIKit, etc.

Vous pouvez facilement créer une simple application web côté client qui peut interagir avec les technologies côté serveur comme Node.js et PHP, puis la placer dans votre dossier assets. Utilisez ensuite WebView pour la charger. Vous devez cependant vous assurer que Javascript est activé. Je comprends que ce n'est pas aussi puissant qu'une application Java complète écrite en Java, Kotlin ou C#, mais pour les débutants, vous pourrez rapidement créer votre première application que vous pourrez montrer à vos amis tout en poursuivant vos études.

Utilisation de "WebView

La plupart du temps, vous voudrez rendre le contenu en ligne dans votre webview. Donc, pour que votre Activity puisse accéder à Internet et charger des pages web dans une WebView, vous devez ajouter les permissions INTERNET à votre fichier Android Manifest :

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

Ensuite, dans votre layout, ajoutez un <WebView> ou définissez toute la fenêtre Activity comme un WebView pendant onCreate() :

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

Une fois que vous avez fait cela, alors vous pouvez charger votre page web via la méthode 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() va charger notre site web à partir de l'url que nous fournissons. C'est la méthode la plus couramment utilisée.

Vous pouvez également charger à partir d'une chaîne 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.

Cela signifie essentiellement que vous écrivez votre code HTML à l'intérieur d'une string. Puis vous le chargez via la méthode loadData(). Ceci est approprié pour charger des sites web avec une structure DOM (Document Object Model) simple.

Exemples rapides de `WebView` et HowTo's

Regardons des exemples rapides de howTo pour notre classe webview. Plus tard, nous verrons comment écrire une application complète.

1. Paramètres `WebView` couramment utilisés

Voici quelques paramètres WebView couramment utilisés. Encapsulons-les dans une méthode statique simple que nous pourrons ensuite facilement réutiliser.

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

Cette méthode prend un objet WebView. Nous obtenons d'abord les paramètres du webview via la méthode getSettings de la classe WebView. Ensuite, nous activons le javascript via la méthode setJavaScriptEnabled(). La plupart de ces méthodes de paramétrage prennent une valeur booléenne pour activer ou désactiver divers paramètres.

2. Comment créer un `WebView` personnalisé ?

Nous voulons créer un webview personnalisé qui peut être utilisé dans un 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` - Charger à partir d'une URL, de chaînes de caractères et d'un dossier d'actifs.

Android WebView - Charger à partir d'une URL, de chaînes de caractères et d'un dossier d'actifs.

WebView est en fait une de ces classes qui existent dans android depuis le début.

Ajouté au niveau 1 de l'API, il réside dans le paquet android.webkit. Il est utilisé pour afficher du contenu web directement dans l'activité. Cela le rend très puissant et peut être utilisé pour construire un navigateur basique qui fonctionne. C'est toujours une vue, nous pouvons donc simplement la faire glisser de la palette vers notre layout. Il rend les pages web en utilisant le moteur de rendu webkit. Dans cet exemple, nous utilisons une webview pour rendre du contenu web à partir de :

URL en ligne.
Dossier local Assets.
String dans le code java.

Pour charger à partir d'une URL, vous devez avoir la permission d'utiliser android internet dans le androidmanifest.xml. Vous pouvez trouver plus de détails sur WebView [ici] (https://developer.android.com/reference/android/webkit/WebView.html).

Capture d'écran

Voici la capture d'écran du projet.

Questions courantes que cet exemple explore

Qu'est-ce que WebView ?
Comment charger un site web depuis une url dans une webview.
Comment charger du html à partir de assets frolder dans webview.
Comment charger le html de string dans webview.
Comment utiliser webview dans android activity.

Outils utilisés

Cet exemple a été écrit avec les outils suivants :

Windows 8
IDE AndroidStudio.
Emulateur Genymotion
Langage : Java

Aucune bibliothèque tierce n'a été utilisée dans ce projet.

Passons directement au code source.

AndroidManifest.xml

Fichier Android Manifest.
Ajoutez la permission Internet car nous allons récupérer une page web à partir de l'url.

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

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

`Build.Gradle`

Normalement dans les projets android, il y a deux fichiers build.gradle. L'un est le niveau app build.gradle, l'autre est le niveau projet build.gradle. Le niveau de l'application appartient au dossier de l'application et c'est là que nous ajoutons normalement nos dépendances et que nous spécifions les sdks de compilation et de cible.
Ajoutez également les dépendances pour les bibliothèques AppCompat et Design support.
Notre MainActivity doit dériver de AppCompatActivity tandis que nous utiliserons également le bouton d'action flottant des bibliothèques de support de conception.

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

Lanceur activity.
ActivityMain.xml gonflé comme le contentview pour cette activité.
Nous initialisons les vues et les widgets dans cette activité.
Nous basculons à travers les éléments de menu dans notre barre d'outils, en choisissant de charger à partir d'url, d'actifs ou de string.

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`

Modèle de mise en page.
Contient notre ContentMain.xml.
Définit également le appbarlayout, la toolbar ainsi que le 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.
Définit les vues et les widgets à afficher à l'intérieur de la MainActivity.
Dans ce cas, c'est une simple webview.

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

Nous allons passer d'un élément de menu à l'autre dans notre barre d'outils.
Définissons cela dans menu_main.xml à l'intérieur du répertoire du menu.

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

Télécharger

Téléchargez le projet ci-dessous :

No.	Emplacement	Lien
1.	GitHub	Direct Download
2.	GitHub	Browse

Conclusion.

Nous avons vu un exemple simple de webview android. Comment charger des pages web en ligne via url, depuis le dossier assets et depuis les données string.

Comment injecter du CSS dans un `WebView` ?

Vous pouvez vouloir manipuler une page qui ne vous appartient pas en utilisant le CSS. Par exemple, disons qu'une page Web se charge et que vous appliquez votre propre style en CSS.

Ceci est possible dans android webview. Voici les étapes :

Étape 1 : Importation de Base64

Ajoutez l'import suivant :

import android.util.Base64

Step 2 : Créer une fonction pour injecter css

Cette fonction va injecter du css via 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()
            }

        }

Step 3 : Surcharger `onPageFinished`

L'étape suivante consiste à surcharger l'événement onpage finished qui est appelé une fois que webview a fini de charger le contenu.

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

C'est tout.

Catégorisé:

French Vue du contenu

Tutoriel Android WebView et exemples

Qu'est-ce qu'une `WebView` ?

Définition de l'API `WebView`.

Pourquoi Webview ?

Utilisation de "WebView

Exemples rapides de `WebView` et HowTo's

1. Paramètres `WebView` couramment utilisés

2. Comment créer un `WebView` personnalisé ?

1. Android `WebView` - Charger à partir d'une URL, de chaînes de caractères et d'un dossier d'actifs.

Capture d'écran

Questions courantes que cet exemple explore

Outils utilisés

AndroidManifest.xml

`Build.Gradle`

`MainActivity`.java

`ActivityMain.xml`

`ContentMain.xml`

`menu_main.xml`

Télécharger

Conclusion.

Comment injecter du CSS dans un `WebView` ?

Étape 1 : Importation de Base64

Step 2 : Créer une fonction pour injecter css

Step 3 : Surcharger `onPageFinished`

Oclemy

Autres Histoires

Exemples de pages d’accueil en Kotlin Android

Tutoriel et exemples de BroadcastReceiver pour Android

Appuyez sur ESC pour fermer

Ou consultez nos catégories populaires...

Qu'est-ce qu'une WebView ?

Définition de l'API WebView.

Pourquoi Webview ?

Utilisation de "WebView

Exemples rapides de WebView et HowTo's

1. Paramètres WebView couramment utilisés

2. Comment créer un WebView personnalisé ?

1. Android WebView - Charger à partir d'une URL, de chaînes de caractères et d'un dossier d'actifs.

Capture d'écran

Questions courantes que cet exemple explore

Outils utilisés

AndroidManifest.xml

Build.Gradle

MainActivity.java

ActivityMain.xml

ContentMain.xml

menu_main.xml

Télécharger

Conclusion.

Comment injecter du CSS dans un WebView ?

Étape 1 : Importation de Base64

Step 2 : Créer une fonction pour injecter css

Step 3 : Surcharger onPageFinished

Oclemy

Articles Liés

Exemples de comptes et AccountManager Android

Kotlin Android Nested RecyclerView Exemple

Exemple de StateFlow pour Android en Kotlin

Kotlin Android Text To Speech et Speech To Text Exe

Autres Histoires

Exemples de pages d’accueil en Kotlin Android

Tutoriel et exemples de BroadcastReceiver pour Android

Qu'est-ce qu'une `WebView` ?

Définition de l'API `WebView`.

Exemples rapides de `WebView` et HowTo's

1. Paramètres `WebView` couramment utilisés

2. Comment créer un `WebView` personnalisé ?

1. Android `WebView` - Charger à partir d'une URL, de chaînes de caractères et d'un dossier d'actifs.

`Build.Gradle`

`MainActivity`.java

`ActivityMain.xml`

`ContentMain.xml`

`menu_main.xml`

Comment injecter du CSS dans un `WebView` ?

Step 3 : Surcharger `onPageFinished`