ProgressBar+WebView实现自定义浏览器

2015-11-05 20:31 阅读 9,292 次 评论 2 条

摘要：

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

ProgressBar+WebView自定义浏览器

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

ProgressBar+WebView自定义浏览器
ProgressBar+WebView自定义浏览器

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

  1. public ProgressWebView(Context context, AttributeSet attrs) {  
  2. super(context, attrs);  
  3. progressbar = new ProgressBar(context, null,  
  4. android.R.attr.progressBarStyleHorizontal);  
  5. progressbar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,  
  6. 10, 0, 0));  
  7.   
  8. Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);  
  9. progressbar.setProgressDrawable(drawable);  
  10. addView(progressbar);  
  11. // setWebViewClient(new WebViewClient(){});  
  12. setWebChromeClient(new WebChromeClient());  
  13. //是否支持缩放  
  14. getSettings().setSupportZoom(true);  
  15. getSettings().setBuiltInZoomControls(true);  
  16. }  

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

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  2.   
  3. <item android:id="@android:id/background">  
  4. <shape>  
  5. <corners android:radius="2dp" />  
  6.   
  7. <gradient  
  8. android:angle="270"  
  9. android:centerColor="#E3E3E3"  
  10. android:endColor="#E6E6E6"  
  11. android:startColor="#C8C8C8" />  
  12. </shape>  
  13. </item>  
  14.   
  15. <item android:id="@android:id/progress">  
  16. <clip>  
  17. <shape>  
  18. <corners android:radius="2dp" />  
  19. <gradient  
  20. android:centerColor="#4AEA2F"  
  21. android:endColor="#31CE15"  
  22. android:startColor="#5FEC46" />  
  23. </shape>  
  24. </clip>  
  25. </item>  
  26.   
  27. </layer-list>  

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

  1. public class WebChromeClient extends android.webkit.WebChromeClient {  
  2. @Override  
  3. public void onProgressChanged(WebView view, int newProgress) {  
  4. if (newProgress == 100) {  
  5. progressbar.setVisibility(GONE);  
  6. } else {  
  7. if (progressbar.getVisibility() == GONE)  
  8. progressbar.setVisibility(VISIBLE);  
  9. progressbar.setProgress(newProgress);  
  10. }  
  11. super.onProgressChanged(view, newProgress);  
  12. }  
  13.   
  14. }  

这两个getSettings().setSupportZoom(true)和getSettings().setBuiltInZoomControls(true)设置是否支持缩放。

第二步：定义显示类，命名ProgressWebActivity.java，布局文件命名main_web.xml，代码如下：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3. android:layout_width="fill_parent"  
  4. android:layout_height="fill_parent"  
  5. android:orientation="vertical" >  
  6.   
  7. <include  
  8. android:id="@+id/head_views_main"  
  9. layout="@layout/head_re" />  
  10.   
  11. <com.sinolvc.zspg.view.ProgressWebView  
  12. android:id="@+id/baseweb_webview"  
  13. android:layout_width="fill_parent"  
  14. android:layout_height="fill_parent"  
  15. android:fadeScrollbars="true"  
  16. android:scrollbarStyle="insideOverlay" />  
  17.   
  18. </LinearLayout>  

ProgressWebActivity.java

  1. public class ProgressWebActivity extends BaseActivity {  
  2.   
  3. protected ProgressWebView mWebView;  
  4.   
  5. @Override  
  6. protected void onCreate(Bundle savedInstanceState) {  
  7. super.onCreate(savedInstanceState);  
  8. setContentView(R.layout.activity_baseweb);  
  9.   
  10. mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview);  
  11. mWebView.getSettings().setJavaScriptEnabled(true);  
  12. initData();  
  13.   
  14. initTitleView(getWindow().getDecorView(),R.string.load_news_detail_info,ProgressWebActivity .this);  
  15. finishMySelf();  
  16. }  
  17. private void finishMySelf(){  
  18. backll.setOnClickListener(new OnClickListener() {  
  19.   
  20. @Override  
  21. public void onClick(View v) {  
  22. ProgressWebActivity .this.finish();  
  23. }  
  24. });  
  25. }  
  26. protected void initData() {  
  27. Intent intent = getIntent();  
  28. Bundle bundle = intent.getExtras();  
  29. String url = bundle.getString("url");  
  30.   
  31. if(!TextUtils.isEmpty(url)&&!TextUtils.isEmpty(title)){  
  32. mWebView.loadUrl(url);  
  33.   
  34. }  
  35.   
  36. }  
  37.   
  38. @Override  
  39. protected void onDestroy() {  
  40. // TODO Auto-generated method stub  
  41. super.onDestroy();  
  42. mWebView = null;  
  43.   
  44. }  
  45.   
  46. }  

initData方法获取上一个Activity传递过来的Intent数据，取出网页URL，判断连接是否为空，如果不为空，则使用自定义的ProgressWebView的loadUrl()方法加载，这个时候我们将会在APP端看到如下效果：
ProgressBar+WebView自定义浏览器
initTitleView用于设置浏览器顶部导航条，显示返回按钮和浏览新闻文字。

第三步：在需要使用自定义浏览器这个类ProgressWebActivity的地方，我们只需要设置Intent的数据，然后启动ProgressWebActivity加载之定义URL，实现带进度条加载指定页面的功能。

  1. Bundle bundle = new Bundle();  
  2.   
  3. bundle.putString("url", "https://www.teachcourse.cn");  
  4. bundle.putString("title", "源码分享网站");  
  5. Intent intent = new Intent(getContext(), ProgressWebActivity.class);  
  6. intent.putExtras(bundle);  
  7.   
  8. startActivity(intent);  

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

你可能感兴趣的文章

来源：TeachCourse， 每周一次，深入学习Android教程，关注（QQ158#9359$239或公众号TeachCourse）
转载请注明出处： https://www.teachcourse.cn/634.html ，谢谢支持！

资源分享

源码下载
分类：Android 标签：
浅谈ActionBar的使用 浅谈ActionBar的使用
浅谈RoboVM 浅谈RoboVM
让您的站点主页与WordPress安装目录不同 让您的站点主页与WordPress安装
Android常用基本控件属性总结 Android常用基本控件属性总结