仿微信中加载网页时带线行进度条的WebView的实现

finddreams：http://blog.csdn.net/finddreams/article/details/44172639


为了仿微信中加载网页时带进度条的WebView的实现，首先我们来看一下微信中的效果是什么样的：

明确需求之后，我们来开始动手做，首先我们来自定义一个带进度条的WebView,名字为ProgressWebView：


 /**
 * @Description:带进度条的WebView
 * @author http://blog.csdn.net/finddreams
 */
@SuppressWarnings("deprecation")
public class ProgressWebView extends WebView {

    private ProgressBar progressbar;

    public ProgressWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        progressbar = new ProgressBar(context, null,
                android.R.attr.progressBarStyleHorizontal);
        progressbar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
                10, 0, 0));

        Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);
        progressbar.setProgressDrawable(drawable);
        addView(progressbar);
        // setWebViewClient(new WebViewClient(){});
        setWebChromeClient(new WebChromeClient());
        //是否可以缩放
        getSettings().setSupportZoom(true);
        getSettings().setBuiltInZoomControls(true);
    }

    public class WebChromeClient extends android.webkit.WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress == 100) {
                progressbar.setVisibility(GONE);
            } else {
                if (progressbar.getVisibility() == GONE)
                    progressbar.setVisibility(VISIBLE);
                progressbar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }

    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        LayoutParams lp = (LayoutParams) progressbar.getLayoutParams();
        lp.x = l;
        lp.y = t;
        progressbar.setLayoutParams(lp);
        super.onScrollChanged(l, t, oldl, oldt);
    }
}  

从这个类中可以看出，我们在自定义的WebView中加入了一个水平方向的progressbar，然后为这个progressbar设置progressDrawable,这是一个很关键的地方：

<span style="font-size:14px;"><code class="hljs avrasm has-numbering"></code></span><pre name="code" class="java"> Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);
        progressbar.setProgressDrawable(drawable);

下面我们来看一下drawable目录下的progress_bar_states.xml是如何写的：


    <?xml version="1.0" encoding="utf-8"?>
<!-- 层叠 -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="2dp" />

            <gradient
                android:angle="270"
                android:centerColor="#E3E3E3"
                android:endColor="#E6E6E6"
                android:startColor="#C8C8C8" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />

                <gradient
                    android:centerColor="#4AEA2F"
                    android:endColor="#31CE15"
                    android:startColor="#5FEC46" />
            </shape>
        </clip>
    </item>

</layer-list>

<layer-list>这个标签可能我们不是很熟悉，因为我们一般常用的就是<shape>和<selector>这两个，layer-list是将多个图片或上面两种效果按照顺序层叠起来，layer就像photoshop中的图层一样。
其中有个<clip>标签，是可以用来剪载图片显示，例如，可以通过它来做进度度。你可以选择是从水平或垂直方向剪载。
自定义好ProgressWebView之后，我们只需要在xml布局文件中声明就可以使用了：

<span style="font-size:14px;"><code class="hljs xml has-numbering">
</code></span><pre name="code" class="html">   <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <com.finddreams.progresswebview.ProgressWebView
     android:id="@+id/baseweb_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout> 

接着我们定义一个BaseWebActivity来显示我们自定义的WebView：

<span style="font-size:14px;"><code class="hljs java has-numbering"><span class="hljs-javadoc">/**
 *<span class="hljs-javadoctag"> @Description</span>:WebActivity
 *<span class="hljs-javadoctag"> @author</span> http://blog.csdn.net/finddreams
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BaseWebActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Activity</span> {</span>

    <span class="hljs-comment">// private View mLoadingView;</span>
    <span class="hljs-keyword">protected</span> ProgressWebView mWebView;
    <span class="hljs-keyword">private</span> ProgressBar web_progressbar;

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-comment">// TODO Auto-generated method stub</span>
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        setContentView(R.layout.activity_baseweb);
        <span class="hljs-comment">// mLoadingView = findViewById(R.id.baseweb_loading_indicator);</span>
        mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview);
        mWebView.getSettings().setJavaScriptEnabled(<span class="hljs-keyword">true</span>);
        initData();
    }

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initData</span>() {
        Intent intent = getIntent();

        String url = intent.getStringExtra(<span class="hljs-string">"url"</span>);
        <span class="hljs-keyword">if</span>(url!=<span class="hljs-keyword">null</span>){
        mWebView.loadUrl(url);
        }
    }

}</code>

</span>

然后调用这个Activity即可，例如：

<span style="font-size:14px;"><code class="hljs java has-numbering"><span class="hljs-javadoc">/**
 *<span class="hljs-javadoctag"> @Description</span>:
 *<span class="hljs-javadoctag"> @author</span> http://blog.csdn.net/finddreams
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Activity</span> {</span>

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">openUrl</span>(View v){
        Intent intent =<span class="hljs-keyword">new</span> Intent(<span class="hljs-keyword">this</span>,BaseWebActivity.class);
        intent.putExtra(<span class="hljs-string">"url"</span>, <span class="hljs-string">"http://blog.csdn.net/finddreams/article/details/43486527"</span>);
    <span class="hljs-comment">//  intent.putExtra("url", "http://www.baidu.com");</span>
        startActivity(intent);
    }
}</code></span>

好吧，到这里你应该学会怎么做带线行进度条的WebView了吧！