Este é um tutorial andróide WebView e Exemplos. A WebView é uma visualização do andróide SDK que é capaz de renderizar páginas da web.

O que é um WebView?

Um WebView, como já dissemos, é um WebView é uma visualização que exibe páginas da web.

Ela é representada pela classe "WebView". Esta classe é muito mais poderosa do que você possa pensar. No entanto, é muito fácil e direta de usar e fornece abstrações sobre as quais você constrói.

É esta classe que é a base sobre a qual você pode criar seu próprio navegador web ou simplesmente exibir algum conteúdo online dentro de sua Atividade. O WebView faz uso do WebKit mecanismo de renderização para exibir páginas da web e inclui métodos t:

  1. navegue para frente e para trás através de um histórico
  2. Aumentar e diminuir o zoom.
  3. realizar buscas de texto e muito mais.

WebView é muito poderoso, pois oferece uma maneira de escrever aplicações em linguagens como Javascript e a marcação HTML. Há tantos frameworks que fazem uso desta capacidade, permitindo assim que você escreva seu aplicativo em tecnologias HTML5. Você pode até mesmo transformar seu website, como dizer um site wordpress em um aplicativo android.

Como Fazer Água de Lixívia Para Saboaria

Como Fazer Água de Lixívia Para S...
Como Fazer Água de Lixívia Para Saboaria

WebView Definição de API

O WebView é uma classe concreta que reside no pacote android.webkit. Ela deriva da classe android.widget.AbsoluteLayout e implementa várias interfaces, como mostrado abaixo:

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

Aqui é a hierarquia da herança:

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

Por que Webview?

WebView é provavelmente uma das aulas de andróide mais práticas, fáceis de usar mas subutilizadas. Isto porque basicamente permite criar um aplicativo andróide usando HTML, CSS e Javascript. Eu entenderia se não fosse usado tanto se não pudesse executar Javascript ou renderizar CSS. No entanto, ele faz tudo isso.

Isto então fornece poderosos recursos como HTML, CSS e Javascript são fáceis de usar, tecnologias populares alimentando as interfaces de usuário de quase todas as aplicações web ou websites que você já visitou. Além disso, existem centenas de frameworks/libraries para estas tecnologias que fornecem widgets e abstrações poderosas. Estes incluem jQuery, Vue.js, Angular, React.js, Bootstrap, materializecss, UIKit etc.

Você pode facilmente criar um aplicativo web simples do lado do cliente que pode interagir com tecnologias do lado do servidor como Node.js e PHP e depois colocar em sua pasta de ‘assets’. Em seguida, utilize o WebView para carregá-lo. Você tem que garantir que o Javascript esteja habilitado. Isto, eu entendo que não é tão poderoso como ter uma aplicação Java completa escrita em Java ou Kotlin ou C#, no entanto, para iniciantes, você rapidamente iniciaria sua primeira aplicação que pode mostrar aos amigos enquanto continua sua educação.

Usando WebView

Na maioria das vezes, você vai querer renderizar conteúdo on-line em sua visualização da web. Assim, para que sua [Atividade] (https://camposha.info/android/activity) possa acessar a Internet e carregar páginas da web em uma "WebView", você deve adicionar as permissões "INTERNET" ao seu arquivo "Manifesto Andróide":

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

Em seguida, em seu layout, adicione um <WebView> em seu layout, ou defina toda a janela Activity como um WebView durante o onCreate():

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

Uma vez feito isso, você pode carregar sua página web através do método 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/");

carregará nosso website a partir da url que fornecemos. Esta é a forma mais comumente utilizada.

Você também pode carregar a partir de um HTML ‘string’:

 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.

Isto significa basicamente que você escreve seu código HTML dentro de um "string". Em seguida, carregue-o através do método loadData(). Isto é adequado para carregar websites com estrutura DOM(Document Object Model) simples.

Exemplos rápidos de WebView e HowTo’s

Vejamos rapidamente comoTos para nossa aula de webview. Mais tarde veremos como escrever um aplicativo completo.

1. Configurações de WebView comumente utilizadas

Aqui estão algumas configurações "WebView" comumente utilizadas. Vamos encapsulá-los em um método estático simples que podemos então reutilizar facilmente.

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

Esse método está tomando um objeto ‘WebView’. Primeiro obtemos as configurações de visualização via web através do método "getSettings" da classe "WebView". Depois, habilitamos o javascript através do método setJavaScriptEnabled(). A maioria desses métodos de configuração tem um valor booleano para ativar ou desativar várias configurações.

2. Como criar uma WebView personalizada

Queremos criar uma visualização web personalizada que possa ser usada em um 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 – Carga a partir de URL, Strings e Pasta de Ativos

Android WebView – Carregar a partir da URL, Strings e Pasta de Ativos

O WebView é na verdade uma dessas classes que existem no andróide desde o início.

Adicionado no nível 1 da API, ele reside no pacote android.webkit. Ele é utilizado para exibir conteúdo da web dentro da atividade. Isto o torna muito poderoso e pode ser utilizado para construir até mesmo um navegador básico que funcione. Ele ainda é uma visão para que possamos simplesmente arrastá-lo da paleta para nosso layout. Ele torna as páginas da web utilizando o motor de renderização webkit. Neste exemplo, usamos uma visualização da web para renderizar o conteúdo da web a partir de :

  • URL online.
  • pasta ‘Assets’ local.
  • ‘String’ dentro do código java.

Para carregar a partir da url, você deve ter permissão de android internet no androidmanifest.xml. Você pode encontrar mais detalhes sobre o WebView aqui.

Screenshot
  • Aqui está a captura de tela do projeto.

Perguntas comuns que este exemplo explora
  • O que é WebView?
  • Como carregar o site da url na webview.
  • Como carregar html a partir do assets de um navegador em webview.
  • Como carregar html string em webview.
  • Como utilizar o "webview" em "atividade" de andróides.
Ferramentas utilizadas

Este exemplo foi escrito com as seguintes ferramentas:

  • Windows 8
  • AndroidStudio’ IDE
  • Emulador Genymotion
  • Linguagem : Java

Nenhuma biblioteca de terceiros foi utilizada neste projeto.

Vamos pular diretamente para o código fonte.

AndroidManifest.xml
  • Arquivo "Manifesto Andróide".
  • Acrescente a permissão da Internet, pois iremos buscar uma página da web também na url.

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

    <uses-permission android_name="android.permission.INTERNET"/>
    ...
</manifest>
Build.Gradle
  • Normalmente em projetos de andróides, existem dois arquivos build.gradle'. Um é o nível de aplicativo build.gradle, o outro é o nível de projeto build.gradle`. O nível app pertence dentro da pasta app e é onde normalmente adicionamos nossas dependências e especificamos a compilação e os sdks alvo.
  • Adicionar também dependências para bibliotecas de suporte AppCompat e Design.
  • Nossa `MainActivity’ deve derivar do AppCompatActivity enquanto também devemos utilizar o botão de ação flutuante das bibliotecas de suporte ao design.

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
  • Lançador `atividade’.
  • ActivityMain.xml inflacionado como a visão de conteúdo para esta atividade.
  • Inicializamos visões e widgets dentro desta atividade.
  • Trocamos os itens do menu em nossa barra de ferramentas, selecionando para carregar de url,assets ou ‘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
  • Layout do modelo.
  • Contém nosso `ContentMain.xml’.
  • Também define o appbarlayout', toolbar’, bem como o `floating buttton’ de ação.

<?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
  • Layout do conteúdo.
  • Define as vistas e widgets a serem exibidos dentro da `MainActivity’.
  • Neste caso, é uma simples visualização da web.

<?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
  • Estaremos alternando através dos itens do menu em nossa barra de ferramentas.
  • Vamos definir isto em menu_main.xml dentro do diretório do 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>
Download
  • Faça o download do Projeto abaixo:
Nº. Localização Link
1. GitHub Download Direto Download Direto
2. GitHub Browse [GitHub Browse
Conclusão.

Vimos um exemplo simples de visualização de andróides na web. Como carregar páginas web a partir da internet via url, a partir da pasta "asset" e de dados "string".

Como injetar CSS em uma WebView.

Você pode querer manipular uma página que você não possui usando CSS. Por exemplo, diga que uma página web é carregada e depois você aplica seu próprio estilo no CSS.

Isto é possível na webview de andróides. Aqui estão os passos:

Etapa 1: Importar Base64

Adicione a seguinte importação:

import android.util.Base64

Passo 2: Criar uma função para injetar css

Esta função irá injetar 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()
            }

        }

Etapa 3: Substituir ‘onPageFinished’.

O próximo passo é substituir o evento "página terminada" que é chamado assim que a visualização da web termina de carregar o conteúdo.

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

É isso aí.