ProgressBar+WebView实现自定义浏览器

当我们使用浏览器浏览网页时，总会看到下图页面的样子，上面是一个地址栏，地址栏下面显示加载进度，加载完成后进入页面内容，带颜色的进度条总是少不了的，那样子看起来也舒服，如何实现自定义手机浏览器功能呢？

上面是360浏览器加载过程的截图，看起来也不算复杂，在做安卓开发中，经常要用到浏览器加载HTML的页面，于是想做一个demo，避免每次重复写的麻烦，效果图如下：


第一步：自定义WebView，命名ProgressWebView，在自定义ProgressWebView中添加进度条效果，代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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);     }

在这个构造方法里面，自定义进度条属性，设置为水平进度条，进度条的高度，同时定义进度条状态颜色，写在progress_bar_states.xml文件中，代码如下：

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

<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>

在这个xml文件中，可以按照自己喜好设置加载颜色，然后把进度条视图添加到WebView视图中，在使用ProgressWebView加载
HTML网页，可以像360浏览器一样显示加载进度。setWebChromeClient(new
WebChromeClient())用于加载请求的网页，支持进度条、js等效果，这里定义一个内部类WebChromeClient，代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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);         }       }

这两个getSettings().setSupportZoom(true)和getSettings().setBuiltInZoomControls(true)设置是否支持缩放。
第二步：定义显示类，命名ProgressWebActivity.java，布局文件命名main_web.xml，代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:orientation="vertical" >       <include         android:id="@+id/head_views_main"         layout="@layout/head_re" />       <com.sinolvc.zspg.view.ProgressWebView         android:id="@+id/baseweb_webview"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:fadeScrollbars="true"         android:scrollbarStyle="insideOverlay" />   </LinearLayout>

ProgressWebActivity.java代码：

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

public class ProgressWebActivity extends BaseActivity {       protected ProgressWebView mWebView;           @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_baseweb);           mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview);         mWebView.getSettings().setJavaScriptEnabled(true);         initData();                             initTitleView(getWindow().getDecorView(),R.string.load_news_detail_info,ProgressWebActivity .this);         finishMySelf();     }     private void finishMySelf(){         backll.setOnClickListener(new OnClickListener() {               @Override             public void onClick(View v) {                 ProgressWebActivity .this.finish();             }         });     }     protected void initData() {         Intent intent = getIntent();         Bundle bundle = intent.getExtras();         String url = bundle.getString("url");           if(!TextUtils.isEmpty(url)&&!TextUtils.isEmpty(title)){         mWebView.loadUrl(url);           }       }       @Override     protected void onDestroy() {         // TODO Auto-generated method stub         super.onDestroy();         mWebView = null;       }   }

initData方法获取上一个Activity传递过来的Intent数据，取出网页URL，判断连接是否为空，如果不为空，则使用自定义的ProgressWebView的loadUrl()方法加载，这个时候我们将会在APP端看到如下效果：

initTitleView用于设置浏览器顶部导航条，显示返回按钮和浏览新闻文字。
第三步：在需要使用自定义浏览器这个类ProgressWebActivity的地方，我们只需要设置Intent的数据，然后启动ProgressWebActivity加载之定义URL，实现带进度条加载指定页面的功能。

1 2 3 4 5 6 7 8

Bundle bundle = new Bundle();           bundle.putString("url", "http://www.teachcourse.cn");         bundle.putString("title", "做最好的源码分享网站");         Intent intent = new Intent(getContext(), ProgressWebActivity.class);         intent.putExtras(bundle);           startActivity(intent);

到这里，我们使用ProgressBar+WebView自定义浏览器器的功能基本完成！