Android文章的图文混排一-----自定义WebView

前言

既然Peek作为一个阅读类的app，排版就很重要了，其中一点就是怎么图文显示一篇文章了，开始我用的是WebView的方式显示的，现在的网站都对移动端做了特殊处理，所以用WebView的方式显示是最简单的

WebView的封装

其实我们要实现的是类似微信那样带有进度条WebView，这个就需要对WebView进行封装了

public class MyWebViewEx extends LinearLayout {

    private String TAG = "MyWebViewEx";
    private ProgressBar mProgressbar;
    private WebView mWebView;
    private Context mContext;

    private long timeout = 30000;
    private Handler mHandler;

    private Timer timer;
    private OnWebViewListener mOnWebViewListener;
    private boolean mLoadingFinish = false;
    public MyWebViewEx(Context context) {
        super(context);
        mContext = context;
        initUI();
    }

    public MyWebViewEx(Context context,AttributeSet attributeSet){
        super(context,attributeSet);
        mContext = context;

        initUI();

    }
    private void initUI(){
        LogUtils.v("MyWebViewEx","initUI");
        setOrientation(VERTICAL);
//添加进度条
        mProgressbar = new ProgressBar(mContext,null, android.R.attr.progressBarStyleHorizontal);
        mProgressbar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,5));
        Drawable drawable = mContext.getResources().getDrawable(R.drawable.webview_progress);
        mProgressbar.setProgressDrawable(drawable);
        mProgressbar.setProgress(10);
        this.addView(mProgressbar);
//添加webview
        mWebView = new WebView(mContext);
        mWebView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        mWebView.setBackgroundColor(getResources().getColor(R.color.view_bg));
        this.addView(mWebView);

//        mWebView.setVerticalScrollBarEnabled(true);
//        mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        mWebView.setWebChromeClient(new MyWebChromeClient());
        //是否可以缩放
        //getSettings().setSupportZoom(true);
        //getSettings().setBuiltInZoomControls(true);
        mWebView.setWebViewClient(new MyWebViewClient());
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setBlockNetworkImage(false);
        mWebView.getSettings().setUseWideViewPort(true);
        mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        mWebView.addJavascriptInterface(mContext,"android");

        mHandler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                if(msg.what == 1){
                    mOnWebViewListener.onTimeout();
                }
            }
        };
    }

    public void loadUrl(String url){
        if(mWebView==null){
            LogUtils.v("MyWebViewEx","mWebView is null");
        }
        mWebView.loadUrl(url);
    }

    public boolean canGoBack(){
        return mWebView.canGoBack();
    }

    public void goBack(){
        mWebView.goBack();
    }

    public void loadData(String str){
        mWebView.loadData(str,"text/html;charset=UTF-8", null);
    }

    public void setWebViewListener(OnWebViewListener listener){
        mOnWebViewListener = listener;
    }

    private class MyWebChromeClient extends WebChromeClient {

        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            LogUtils.v(TAG,"newProgress:"+newProgress);
            if(newProgress == 100){
                mProgressbar.setVisibility(GONE);
            }else{
                if(mProgressbar.getVisibility() == GONE){
                    mProgressbar.setVisibility(VISIBLE);
                }
                mProgressbar.setProgress(newProgress);
            }
            if(newProgress >= 30){
                mLoadingFinish = true;
                timer.cancel();
                timer.purge();
            }
            super.onProgressChanged(view, newProgress);
        }

    }

    private class MyWebViewClient extends WebViewClient {

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            mLoadingFinish = false;
            timer = new Timer();
            TimerTask tt = new TimerTask() {
                @Override
                public void run() {
                        /*
                         * 超时后,首先判断页面加载进度,超时并且进度小于100,就执行超时后的动作
                         */
                    if(!mLoadingFinish) {
                        Message msg = new Message();
                        msg.what = 1;
                        mHandler.sendMessage(msg);
                        timer.cancel();
                        timer.purge();
                    }
                }
            };
            timer.schedule(tt, timeout, 1);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            mLoadingFinish = true;
            timer.cancel();
            timer.purge();
            LogUtils.v(TAG,"onPageFinished");
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);

            return true;
            //return super.shouldOverrideUrlLoading(view, url);
        }


    }
    public interface OnWebViewListener{
//
        void onTimeout();
    }


}

可以在里面重写所有的WebView方法,这样使用方式就和正常的WebView一样，并且上方还有进度条

总结

用WebView最简单，但是也存在一些问题:

1. 用WebView的方式加载文章，会在出现一个下载移动应用的悬浮按钮，很不和谐
2. 用WebView加载一片文章会比较耗费流量，而且加载速度有点慢
3. 无法使用夜间模式，除非将网页源码下载到本地，然后修改里面的css，使用WebView的loadfile方式去加载
   所以后面我又用RecyclerView的方式重写了这个