ProgressBar+WebView实现自定义浏览器

2015-11-05 20:31 阅读 4,441 次 评论 2 条
版权声明:本文著作权归TeachCourse所有,未经许可禁止转载,谢谢支持!
转载请注明出处:http://teachcourse.cn/634.html

摘要:

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

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. 1000));  
  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""http://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自定义浏览器器的功能基本完成!

关注公众号 扫一扫二维码,加我QQ

如果文章对你有帮助,欢迎点击上方按钮关注作者

来源:TeachCourse每周一次,深入学习Android教程,关注(QQ1589359239或公众号TeachCourse)
转载请注明出处:http://teachcourse.cn/634.html

资源分享

源码下载
分类:Android 标签:
Android Spinner控件自定义样式分析 Android Spinner控件自定义样式
Android手机如何快速接入周围无线网络 Wifi密码快速破解 Wifi工具 Android手机如何快速接入周围无
夏天适合喝冰凉的水、饮料吗?为什么喝冰凉的水反而不解渴 夏天适合喝冰凉的水、饮料吗?为
Android开发之gravity和layout_gravity之间的区别-案例演示 Android开发之gravity和layout_

发表评论

呲牙 憨笑 坏笑 偷笑 色 微笑 抓狂 睡觉 酷 流汗 鼓掌 大哭 可怜 疑问 晕 惊讶 得意 尴尬 发怒 奋斗 衰 骷髅 啤酒 吃饭 礼物 强 弱 握手 OK NO 勾引 拳头 差劲 爱你

表情

  1. 全球舆论
    全球舆论 【农民】 @回复

    站长是个程序员么?好奇!