Android自定义标题栏:显示网页加载进度

移动开发 Android
本文的作者是一位Android开发者,在做联想Lephone的适配的过程中,遇到了一个难题,系统自带标题栏进度不能显示100%。通过这个实例,作者在本文中介绍了在Android开发中如何用进度条显示网页的加载进度。

这阵子在做Lephone的适配,测试组提交一个bug:标题栏的文字较长时没有显示完全,其实这并不能算个bug,并且这个问题在以前其他机器也没有出现,只是说在Lephone的这个平台上显示得不怎么美观,因为联想将原生的标题栏UI进行了修改。修改的过程中遇到了一个难题,系统自带的那个标题栏进度总能够到达100%后渐退,但是我每次***到100%那一段显示不全,尝试了用线程程序死了卡主了不说,还是一样的效果,后来同事一句话提醒了我用动画。确实是这样我猜系统的也是这样实现的,等进度到达100%后,用动画改变它的透明度就ok了。

实现的效果:标题栏显示网页标题并且滚动,并且用进度条显示网页的加载进度(重新自定义标题栏,lephone修改后的都带有一个返回按钮,并且标题文本和进度条是Frame布局的不怎么好看)。

1、首先定义一个RelativeLayout布局文件 broser_custom_title.xml (AlwaysMarqueeTextView这个类重写了TextView,实现一个跑马灯的效果,网上能够找到)

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout  
  3.   xmlns:android="http://schemas.android.com/apk/res/android" 
  4.   android:layout_width="fill_parent" 
  5.   android:layout_height="fill_parent">  
  6.       <com.android.CustomTitleTest  
  7.             android:id="@+id/tvtitle" 
  8.             android:layout_width="fill_parent" 
  9.             android:layout_height="wrap_content" 
  10.  android:focusableInTouchMode="true" 
  11.             android:singleLine="true" 
  12.  android:ellipsize="marquee" 
  13.             android:focusable="false" 
  14.  android:marqueeRepeatLimit="marquee_forever" 
  15.             android:textSize="20sp" 
  16.  android:layout_centerVertical="true"/>  
  17.     <ProgressBar android:id="@+id/pb" 
  18.          android:layout_width="fill_parent" 
  19.  android:layout_height="wrap_content" 
  20.         style="?android:attr/progressBarStyleHorizontal" 
  21.         android:visibility="gone" 
  22.  android:layout_alignParentBottom="true" 
  23.  
  24.                 ></ProgressBar>  
  25. </RelativeLayout> 

2、继承WebChromeClient,重写onProgressChanged和onReceivedTitle事件(进度条加载完成后使用动画渐退)

 

  1. public class MyWebChromeClient extends WebChromeClient {  
  2.     private Activity activity;  
  3.     private ProgressBar pb;  
  4.     private TextView tvtitle;  
  5.     public MyWebChromeClient(Activity activity) {  
  6.         this.activity = activity;  
  7.     }  
  8.     Animation animation;  
  9.       @Override 
  10.     public void onProgressChanged(WebView view, int newProgress) {  
  11.         pb=(ProgressBar)activity.findViewById(R.id.pb);  
  12.         pb.setMax(100);  
  13.         if(newProgress<100){  
  14.             if(pb.getVisibility()==View.GONE)  
  15.                 pb.setVisibility(View.VISIBLE);  
  16.             pb.setProgress(newProgress);  
  17.         }else{  
  18.             pb.setProgress(100);  
  19.             animation=AnimationUtils.loadAnimation(activity, R.anim.animation);  
  20.             // 运行动画 animation  
  21.               pb.startAnimation(animation);  
  22.               // 将 spinner 的可见性设置为不可见状态  
  23.               pb.setVisibility(View.INVISIBLE);  
  24.          }  
  25.                 super.onProgressChanged(view, newProgress);  
  26.     }  
  27.     @Override 
  28.     public void onReceivedTitle(WebView view, String title) {  
  29.         tvtitle=(TextView)activity.findViewById(R.id.tvtitle);  
  30.         tvtitle.setText(title);  
  31.         super.onReceivedTitle(view, title);  
  32.     }  

3、进度条的动画样式 res/anim/animation.xml

  1. <?xml version="1.0" encoding="utf-8"?> 
  2.     <set xmlns:android="http://schemas.android.com/apk/res/android"> 
  3.          <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="700"/> 
  4.    </set> 

4、码设置自定义的标题栏

  1. private WebView browser;  
  2. @Override 
  3. public void onCreate(Bundle savedInstanceState)  
  4.       super.onCreate(savedInstanceState);  
  5.     getWindow().requestFeature(Window.FEATURE_CUSTOM_TITLE);  
  6.     setContentView(R.layout.main);  
  7.     getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.broser_custom_title);  
  8.     browser = (WebView) findViewById(R.id.my_browser);  
  9.     // currentWebView=browser;  
  10.     browser.setWebChromeClient(new MyWebChromeClient(Main.this));  
  11.     browser.loadUrl("http://www.163.com");  

 

【编辑推荐】

  1. 深入理解Android消息处理系统原理
  2. Android用户界面设计:框架布局
  3. Android游戏开发:如何实现爆炸效果
  4. 盘点Android开发者必备的十大开发工具
  5. Android设计趋势分析10则
责任编辑:佚名 来源: 博客园
相关推荐

2011-02-22 14:53:41

titlebar标题栏Android

2017-02-13 17:17:48

Android标题栏控件

2013-12-19 14:16:46

Android ApiAndroid开发Android SDK

2017-05-03 16:30:38

AndroidScrollView滚动视图

2021-10-26 10:07:02

鸿蒙HarmonyOS应用

2017-03-14 15:09:18

AndroidView圆形进度条

2013-07-18 16:09:10

自定义iOS状态栏iOS开发iOS学习

2021-08-24 15:25:59

鸿蒙HarmonyOS应用

2015-08-14 17:47:35

Windows 10标题栏

2016-12-26 15:25:59

Android自定义View

2016-11-16 21:55:55

源码分析自定义view androi

2009-11-03 18:05:00

VB.NET窗体标题栏

2012-12-24 14:42:48

iOS自定义状态栏

2021-09-06 14:58:23

鸿蒙HarmonyOS应用

2013-04-01 14:35:10

Android开发Android自定义x

2013-12-26 17:08:36

Android开发Android应用自定义Adapter显

2021-03-09 15:23:45

鸿蒙HarmonyOS应用开发

2016-04-12 10:07:55

AndroidViewList

2017-05-19 10:03:31

AndroidBaseAdapter实践

2017-05-18 12:36:16

android万能适配器列表视图
点赞
收藏

51CTO技术栈公众号