前言

既然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的方式重寫了這個