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> 

.android.customtitletest>

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");  
相关文章
|
8月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
572 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
3月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
370 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
3月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
374 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
3月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
829 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
3月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
209 0
|
8月前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量,结合`PathEffect`的子类(如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等)实现路径绘制的动态变化。文章详细解析了各子类的功能与参数,并通过案例代码展示了如何使用`ComposePathEffect`组合效果,以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动,源码附于文末供参考。
163 0
|
8月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先,作者自定义了一个圆角图片控件`MellowImageView`,用于绘制圆角矩形图片。接着,通过将布局放入`HorizontalScrollView`中,实现了左右滑动功能,并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例,包括XML布局、动画文件和Java代码,最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
398 65
Android自定义view之网易云推荐歌单界面
|
8月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程,涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现(如通过三个构造函数解决焦点问题),接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例,如跑马灯、折线图、太极图等。此外,文章详细解析了View绘制流程(measure、layout、draw)和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题,并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
755 84
|
8月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下,传统View可能引发卡顿的问题,进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法,包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
252 3
|
8月前
|
Android开发 开发者
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
161 0
Android自定义view之围棋动画(化繁为简)