Udhëzues shembull i Android WebView

Android WebView përdoret për të shfaqur HTML në një aplikacion android. Ne mund të përdorim android WebView për të ngarkuar faqen HTML në aplikacionin android.

Android WebView

Komponenti i Android WebView është një shfletues i plotë i implementuar si nënklasë Shiko për ta ngulitur në aplikacionin tonë android.

Rëndësia e Android WebView

Për kodin HTML që është i kufizuar për sa i përket fushëveprimit, ne mund të zbatojmë metodën statike fromHtml() që i përket klasës HTML Utility për analizimin e vargut të formatuar HTML dhe shfaqjen e tij në një TextView< /kodi>. TextView mund të përshkruajë formatim të thjeshtë si stilet (të theksuara, të pjerrëta, etj.), fytyrat e shkronjave (serif, sans serif, etj.), ngjyrat, lidhjet, e kështu me radhë. Sidoqoftë, kur bëhet fjalë për formatimin kompleks dhe shtrirjen më të madhe për sa i përket HTML, atëherë TextView nuk arrin ta trajtojë atë mirë. Për shembull, shfletimi në Facebook nuk do të jetë i mundur përmes një TextView. Në raste të tilla, WebView do të jetë miniaplikacioni më i përshtatshëm, pasi mund të trajtojë një gamë shumë më të gjerë të etiketave HTML. WebView mund të trajtojë gjithashtu CSS dhe JavaScript, të cilat Html.fromHtml() thjesht do t'i shpërfillte. WebView gjithashtu mund të ndihmojë me metaforat e zakonshme të shfletimit, të tilla si lista e historikut të URL-ve të vizituara për të mbështetur navigimin prapa dhe përpara. Ende WebView vjen me grupin e vet të disavantazheve, si p.sh. është një miniaplikacion shumë më i shtrenjtë për t'u përdorur, për sa i përket konsumit të memories sesa një TextView. Arsyeja për këtë rritje të memories është sepse WebView mundësohet nga WebKit/Blink që janë motorë për paraqitjen e uebit me burim të hapur për të fuqizuar përmbajtjen në shfletues si Chrome.

Shembull Android WebView

Komponenti i Android WebView futet në skedarin e paraqitjes XML për paraqitjen në të cilën duam të shfaqet WebView. Në këtë shembull ne e futim atë në skedarin activity_main.xml siç tregohet më poshtë:

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

Kodi i shikimit në ueb të Android Studio

Komponenti WebView inicializohet në MainActivity duke përdorur ID-në e tij të përcaktuar në activity_main.xml siç tregohet në fragmentin më poshtë:

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

Android WebView loadUrl

Pasi të kemi marrë një referencë për WebView, ne mund ta konfigurojmë atë dhe të ngarkojmë URL-të përmes HTTP. Metoda WebView loadUrl() përdoret për të ngarkuar URL-në në WebView siç tregohet më poshtë:

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

Përpara se të fillojmë të luajmë me url-në, ekzistojnë dy aspekte kritike që duhet t'i hedhim një sy:

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>
   

Klasa MainAcivity më poshtë përmban të gjitha veçoritë e diskutuara deri më tani.

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

}

Vendosja e WebViewClient

Sjellja e parazgjedhur kur një përdorues klikon në një lidhje brenda faqes së internetit është hapja e aplikacionit të parazgjedhur të shfletuesit të sistemit. Kjo mund të prishë përvojën e përdoruesit të përdoruesve të aplikacionit. Për të mbajtur navigimin e faqeve brenda WebView dhe rrjedhimisht brenda aplikacionit, duhet të krijojmë një nënklasë të WebViewClient dhe të anashkalojmë metodën e tij shouldOverrideUrlLoading(WebView webView, url e vargut). Ja se si do të dukej një nënklasë e tillë WebViewClient:

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

Kur metoda shouldOverrideUrlLoading() kthehet false, URL-të e kaluara si parametër në metodë ngarkohen brenda WebView në vend të shfletuesit. Për të dalluar URL-të që ngarkohen brenda aplikacionit dhe shfletuesit, kodi i mëposhtëm duhet të shtohet në metodën shouldOverrideUrlLoading():

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

Shënim: Kthimi i vërtetë nuk do të thotë që url-ja hapet në aplikacionin e shfletuesit. Në fakt url-ja nuk do të hapet fare. Për të ngarkuar url-në në shfletues, duhet të aktivizohet një qëllim. Nënklasa e mëposhtme përmban të gjitha konfigurimet që kemi shtuar.

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

}

Konstruktori merr Aktivitetin si parametër për të ndezur një qëllim në shfletues. Përpara se të instantojmë këtë nënklasë në MainActivity, le të shohim një veçori tjetër të rëndësishme.

Navigimi në WebView me butonin Prapa.

Nëse klikojmë butonin mbrapa në aplikacionin e zhvilluar deri më tani, shohim që aplikacioni kthehet në ekranin bazë edhe pse ne kemi lundruar nëpër disa faqe brenda vetë WebView. Për të kaluar nëpër historikun e shfletimit me shtypjen e butonit mbrapa, duhet të modifikojmë funksionin e butonit prapa, siç tregohet në fragmentin më poshtë:

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

Metoda onKeyDown() është anashkaluar me një zbatim që së pari kontrollon nëse WebView mund të kthehet prapa. Nëse përdoruesi është larguar nga faqja e parë e ngarkuar brenda WebView, atëherë WebView mund të kthehet prapa. WebView ruan një histori shfletimi ashtu si një shfletues normal. Nëse nuk ka histori, atëherë do të rezultojë në sjelljen e paracaktuar të butonit prapa, d.m.th. daljen nga aplikacioni. Më poshtë është kodi për MainActivity me veçoritë e mësipërme të përfshira.

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

}

Alternativat për ngarkimin e përmbajtjes në WebView

Deri tani ne thjesht kemi përdorur metodën loadUrl() për të ngarkuar përmbajtjen në WebView. Këtu do të shohim mënyrat e tjera për të ngarkuar përmbajtjen pas një informimi të shpejtë të përdorimit të loadUrl(). loadUrl() punon me:

• https:// dhe https://URL-ve
• URL-të e skedarit:// që tregojnë në sistemin lokal të skedarëve
• skedar:///android_asset/ URL që tregojnë një nga asetet e aplikacioneve tuaja
• URL të përmbajtjes:// që tregojnë një ContentProvider që po publikon përmbajtje të disponueshme për transmetim

Në vend të loadUrl() mund të përdorim loadData() me anë të së cilës mund të shfaqim fragmente ose të gjithë kodin HTML në metodë. Ka dy shije të loadData(). Më e thjeshta na lejon të ofrojmë përmbajtjen, llojin MIME dhe kodimin, të gjitha si vargje. Në mënyrë tipike, lloji MIME do të jetë tekst/html dhe kodimi do të jetë UTF-8 për HTML të zakonshëm siç tregohet më poshtë:

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

Më poshtë është dalja kur fragmenti i mësipërm shtohet në MainActivity siç tregohet më poshtë:

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

Kjo i jep fund mësimit shembullor të Android WebView. Ju mund të shkarkoni projektin përfundimtar të shikimit në ueb android nga lidhja e mëposhtme.

Shkarkoni Projektin Shembull të WebView Android