Android WebView实践总结（一）基础配置基础操作

android+html组合的APP使用越来越广泛，Webview也扮演者越来越重要的角色，在此我结合项目实践对Webview的使用进行总结，自己加深记忆的同时也希望可以帮到其他人。

我一步一步来，这篇主要讲基本配置还有它的状态回调以及基本操作；为了方便后续扩展，这里继承Webview类名为MyWebview，代码说明已经在代码注释中体现。

1.标准配置

public class MyWebView extends WebView {

    public MyWebView(Context context) {
        super(context);
    }

    public MyWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init() {
        WebSettings mSettings = getSettings();
        // 支持获取手势焦点
        requestFocusFromTouch();
        setHorizontalFadingEdgeEnabled(true);
        setVerticalFadingEdgeEnabled(false);
        setVerticalScrollBarEnabled(false);
        // 支持JS
        mSettings.setJavaScriptEnabled(true);
        mSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        mSettings.setBuiltInZoomControls(true);
        mSettings.setDisplayZoomControls(true);
        mSettings.setLoadWithOverviewMode(true);
        // 支持插件
        mSettings.setPluginState(WebSettings.PluginState.ON);
        mSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        // 自适应屏幕
        mSettings.setUseWideViewPort(true);
        mSettings.setLoadWithOverviewMode(true);
        // 支持缩放
        mSettings.setSupportZoom(false);//就是这个属性把我搞惨了，
        // 隐藏原声缩放控件
        mSettings.setDisplayZoomControls(false);
        // 支持内容重新布局
        mSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        mSettings.supportMultipleWindows();
        mSettings.setSupportMultipleWindows(true);
        // 设置缓存模式
        mSettings.setDomStorageEnabled(true);
        mSettings.setDatabaseEnabled(true);
        mSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        mSettings.setAppCacheEnabled(true);
        mSettings.setAppCachePath(getContext().getCacheDir().getAbsolutePath());
        // 设置可访问文件
        mSettings.setAllowFileAccess(true);
        mSettings.setNeedInitialFocus(true);
        mSettings.setBlockNetworkImage(false);
        // 支持自定加载图片
        if (Build.VERSION.SDK_INT >= 19) {
            mSettings.setLoadsImagesAutomatically(true);
        } else {
            mSettings.setLoadsImagesAutomatically(false);
        }
        mSettings.setNeedInitialFocus(true);
        // 设定编码格式
        mSettings.setDefaultTextEncodingName("UTF-8");
    }

}

layout布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.allyn.webview.MainActivity">

    <android.support.v4.widget.ContentLoadingProgressBar
        android:id="@+id/pro_schedule"
        android:layout_width="match_parent"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:visibility="visible"
        android:max="100"
        android:progress="0"
        android:layout_height="3dp" />

    <com.allyn.webview.MyWebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

2.状态回调

public class MainActivity extends AppCompatActivity {

    private MyWebView mWebview;
    private ContentLoadingProgressBar mProSchedule;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mProSchedule = findViewById(R.id.pro_schedule);
        mWebview = findViewById(R.id.webview);
        mWebview.loadUrl("http://www.baidu.com");
        //帮助WebView处理各种通知、请求事件
        mWebview.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                mProSchedule.setVisibility(View.VISIBLE);
                //开始
                /**
                 * 网页重定向时会执行多次
                 */
            }

            @Override
            public void onLoadResource(WebView view, String url) {
                super.onLoadResource(view, url);
                //网页加载成功
            }

             @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //网址处理
                /**
                 * 可对指定网址进行拦截
                 */
                view.loadUrl(url);
                return true;
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                //网页加载失败
                /**
                 * 此回调中可进行自定义错误页面，
                 * 遇到错误时示例代码:view.loadUrl("file://android_asset/error.html");
                 */
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                mProSchedule.setVisibility(View.GONE);
                //网页加载完成
            }
        });

        //辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等
        mWebview.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                //网页加载进度
                if (newProgress<100){
                    mProSchedule.setProgress(newProgress);
                }
            }
        });
    }
}

效果图

3.基本控制

   //后退
    public void clickReturn(View view) {
        if (mWebview.canGoBack()) {
            mWebview.goBack();
        }
    }

    //前进
    public void clickAhead(View view) {
        if (mWebview.canGoForward()) {
            mWebview.goForward();
        }
    }

    //刷新
    public void clickReload(View view) {
        mWebview.reload();
    }

    //暂停
    public void clickStop(View view) {
        mWebview.stopLoading();
    }

基本操作效果图

• github Demo源码点这里

基础功能的实现到这里就写完了，

预告：下一篇写webview全屏播放