WebView详解一：打造优雅的WebView

相关文章：

《WebView详解二：Android与JS交互的实现过程》

《下拉刷新？我看好MaterialRefreshLayout！》

废话不多说老样子，先上效果图：

嘻嘻，千万别认为这是浏览器，这只是一个简单的WebView而已，伙伴们先不要喷，无论在怎么折腾，产品经理只要满意，你做的就是一个完美的答卷，对不对？

下面就来打造一个属于你自己的的WebView吧！

一、使用WebView并不需要开通网络权限

WebView可以加载本地Html文件和加载网络的Url路径，对其都有很好的支持

二、众多的基本属性你都知道吗？

(1)表示不支持js，如果想让java和js交互或者本身希望js完成一定的功能请把false改为true。

mWebView.getSettings().setJavaScriptEnabled(false);

(2)设置是否支持缩放，我这里为false，默认为true。

mWebView.getSettings().setSupportZoom(false);

(3)设置是否显示缩放工具，默认为false。

mWebView.getSettings().setBuiltInZoomControls(false);

(4)一般很少会用到这个，用WebView组件显示普通网页时一般会出现横向滚动条，这样会导致页面查看起来非常不方便。LayoutAlgorithm是一个枚举，用来控制html的布局，总共有三种类型：
NORMAL：正常显示，没有渲染变化。
SINGLE_COLUMN：把所有内容放到WebView组件等宽的一列中。
NARROW_COLUMNS：可能的话，使所有列的宽度不超过屏幕宽度。

mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

(5)不现实水平滚动条
mWebView.setHorizontalScrollBarEnabled(false);
(6)不现实垂直滚动条
mWebView.setVerticalScrollBarEnabled(false); 
(7)滚动条在WebView内侧显示
mWebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
(8)滚动条在WebView外侧显示
mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)；

(9)加载网页有时候会左右滑动，没法自适应屏幕，就加上下面的两句话

mWebView.getSettings().setUseWideViewPort(true);//设置此属性，可任意比例缩放

mWebView.getSettings().setLoadWithOverviewMode(true);

三、废话不说了，大家都知道，实现效果先

XML文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/title"
        android:gravity="center"
        android:textSize="15dp"
        android:textColor="#ffffff"
        android:background="#4998e7"
        android:layout_width="match_parent"
        android:layout_height="47dp"/>
    <ProgressBar
        android:id="@+id/Progress"
        android:padding="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"  />
    <com.cjj.MaterialRefreshLayout
        android:id="@+id/refresh"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:overlay="false"
        app:wave_color="#4998e7"
        app:wave_show="true">

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFFFF"/>
    </com.cjj.MaterialRefreshLayout>
</LinearLayout>

MainActivity文件：

public class MainActivity extends AppCompatActivity {
    private WebView mWebView;
    private TextView mTitle;
    private ProgressBar mProgress;
    private MaterialRefreshLayout mMaterialRefreshLayout;

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

        initView();
        initWebView();
        initRefreshLayout();
    }

    /**
     * 初始化View
     */
    private void initView() {
        mTitle = (TextView) findViewById(R.id.title);
        mProgress = (ProgressBar) findViewById(R.id.Progress);
        mWebView = (WebView) findViewById(R.id.webview);
        mMaterialRefreshLayout = (MaterialRefreshLayout) findViewById(R.id.refresh);
    }

    /**
     * 初始化WebView
     */
    private void initWebView() {
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setBlockNetworkImage(false);
        mWebView.loadUrl("http://www.qq.com/");
        mWebView.setWebViewClient(new MyWebviewClient());
        mWebView.setWebChromeClient(new MyChromeClient());
    }
    /**
     * 初始化RefreshLayout刷新
     * 不解释，相关的请看文章头部的MaterialRefreshLayout的连接
     */
    private void initRefreshLayout() {
        mMaterialRefreshLayout.setMaterialRefreshListener(new MaterialRefreshListener() {
            @Override
            public void onRefresh(MaterialRefreshLayout materialRefreshLayout) {
                //下拉刷新停止
                mWebView.loadUrl(mWebView.getUrl());
                mMaterialRefreshLayout.finishRefresh();
            }
        });
    }

    /**
     * 重写MyWebviewClient方法
     *
     * shouldOverrideUrlLoading（） 拦截网页跳转，是之继续在WebView中进行跳转
     * onPageStarted（） 开始加载的时候（显示进度条）
     * onPageFinished（） 夹在结束的时候（隐藏进度条）
     */
    private class MyWebviewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return false;
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            mProgress.setVisibility(View.VISIBLE);

        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            mProgress.setVisibility(View.GONE);

        }
    }
    /**
     * 重写MyChromeClient方法
     *
     * onProgressChanged（） 设置动态进度条
     * onReceivedTitle（） 设置WebView的头部标题
     * onReceivedIcon（）  设置WebView的头部图标
     */
    private class MyChromeClient extends WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
            mProgress.setProgress(newProgress);

        }

        @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
            mTitle.setText(title);
        }

        @Override
        public void onReceivedIcon(WebView view, Bitmap icon) {
            super.onReceivedIcon(view, icon);
        }
    }

    /**
     * 实现WebView的回退栈
     *
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode== KeyEvent.KEYCODE_BACK && mWebView.canGoBack()){
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

注释全都在代码里，详细解释显得啰嗦！