Chủ Nhật, 26 tháng 8, 2018

Bài 4: Master WebView trong Android (Phần 2)

Bài 4: Master WebView trong Android (Phần 2)

Giới thiệu

Tiếp nối bài viết trước về cách sử dụng master WebView trong Android. Hôm nay mình sẽ phân tích một số hạn chế ở bài viết trước và chỉ ra các event mà chúng ta thường xuyên sử dụng khi làm việc với WebView trong Android để chúng ta có thể Handle tất cả các trường hợp với WebView một cách hiệu quả nhất.

Một số hạn chế ở khi sử dụng WebView trong bài viết trước


Trong bài trước chúng ta load trang web vào webview  như sau:
Khai báo quyền truy cập INTERNET trong file AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

Và load với đường dẫn website. Ở đây mình sử dụng Blog Cộng Đồng Mod luôn.

package com.modandroid.demowebview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";
    private static final String EITGUIDE_URL = "http://copecute.blogspot.com/";
    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView)findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl(EITGUIDE_URL);
      
    }

}


Khi chúng ta chạy đoạn code trên kia lên thì chúng ta không thấy vấn đề gì xảy ra. Tuy nhiên khi bạn click vào 1 link trên website render bởi webview thì sẽ được mở bởi browser mặc định trên máy Android chứ không phải là WebView. Điều này chúng ta không cần đến, vì chúng ta sẽ phải handle tất cả mà chúng ta sẽ làm với webview chứ không phải là sử dụng trình duyệt mặc định. Để khắc phục điều đó chúng ta phải sử dụng WebViewClient của chúng ta.

Khắc phục vấn đề với setWebViewClient

Để khắc phục lỗi mở đường dẫn với trình duyệt với browser mặc định của Android khi chúng ta click vào đường link trên WebView chúng ta cần sử dụng phương thức.

webView.setWebViewClient(new WebViewClient());

Phương thức này sẽ chỉ định rằng mọi link mà chúng ta click vào sẽ được load và render bởi WebView chứ không sử dụng một browser nào khác.

Các phương thức callback thường dùng khi thao tác với WebView

Trong khi sử dụng WebView chúng ta cần một số event để có thể handle được WebView một cách link hoạt nhất ví dụ như các event liên quan đến load trang started, visible, error, finished.

webView.setWebViewClient(new WebViewClient(){
             @Override
             public void onPageStarted(WebView view, String url, Bitmap favicon) {
                 super.onPageStarted(view, url, favicon);
             }

             @Override
             public void onPageCommitVisible(WebView view, String url) {
                 super.onPageCommitVisible(view, url);
             }

             @Override
             public void onPageFinished(WebView view, String url) {
                 super.onPageFinished(view, url);
             }

             @Override
             public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                 super.onReceivedError(view, request, error);
             }

             @Override
             public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                 super.onReceivedError(view, errorCode, description, failingUrl);
             }
           
         });

BackStack WebView

Tiếp đến một vấn đề của WebView nữa mà chúng ta hay gặp đó là vấn đề về BackStack. Khi chúng ta mở một đường dẫn thì nó sẽ được thêm vào backstack của WebView. Nhưng khi chúng ta nhấn Back thì gặp vấn đề webview không back lại trang trước đó. Để xử lý trường hợp này chúng ta nên override lại phương thức onBackPress như dưới đây:
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }

Kết luận

Qua hai bài viết mình cũng đã giới thiệu cho các bạn cách sử WebView trong Android. Việc sử dụng các phương thức callback giúp chúng ta có thể handle được tất cả các trường hợp mà chúng ta sẽ làm với WebView mà người dùng sẽ không nhận ra chúng ứng dụng của chúng ta đã “nhúng” một trình duyệt vào trong app và không khác gì so với việc mở browser. Ở bài viết tiếp mình sẽ hướng dẫn các phần còn lại để chúng ta sử dụng WebView  một cách master.