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

finddreams：

为了仿微信中加载网页时带进度条的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);    }}   
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50

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

 Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);         progressbar.setProgressDrawable(drawable);
    
     1
     2

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

    
      
      <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>
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29


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

   
      <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> 
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11

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

/** * @Description:WebActivity * @author http://blog.csdn.net/finddreams */ public class BaseWebActivity extends Activity {    // private View mLoadingView;    protected ProgressWebView mWebView;    private ProgressBar web_progressbar;    @Override    protected void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_baseweb);        // mLoadingView = findViewById(R.id.baseweb_loading_indicator);        mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview);        mWebView.getSettings().setJavaScriptEnabled(true);        initData();    }    private void initData() {        Intent intent = getIntent();        String url = intent.getStringExtra("url");        if(url!=null){        mWebView.loadUrl(url);        }    }}
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31

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

/** * @Description: * @author http://blog.csdn.net/finddreams */ public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);    }    public void openUrl(View v){        Intent intent =new Intent(this,BaseWebActivity.class);        intent.putExtra("url", "http://blog.csdn.net/finddreams/article/details/43486527");    //  intent.putExtra("url", "http://www.baidu.com");        startActivity(intent);    }}
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19

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