Android 自定义标题栏 显示网页加载进度的方法实例

nana精彩

nana精彩

2016-02-19 09:32

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享Android 自定义标题栏 显示网页加载进度的方法实例的教程,热爱PS的朋友们快点看过来吧!

这阵子在做Lephone的适配,测试组提交一个bug:标题栏的文字较长时没有显示完全,其实这并不能算个bug,并且这个问题在以前其他机器也没有出现,只是说在Lephone的这个平台上显示得不怎么美观,因为联想将原生的标题栏UI进行了修改。修改的过程中遇到了一个难题,系统自带的那个标题栏进度总能够到达100%后渐退,但是我每次最后到100%那一段显示不全,尝试了用线程程序死了卡主了不说,还是一样的效果,后来同事一句话提醒了我用动画。确实是这样我猜系统的也是这样实现的,等进度到达100%后,用动画改变它的透明度就ok了。
实现的效果:标题栏显示网页标题并且滚动,并且用进度条显示网页的加载进度(重新自定义标题栏,lephone修改后的都带有一个返回按钮,并且标题文本和进度条是Frame布局的不怎么好看)。
1、首先定义一个RelativeLayout布局文件 broser_custom_title.xml (AlwaysMarqueeTextView这个类重写了TextView,实现一个跑马灯的效果,网上能够找到
 代码如下:

?xml version="1.0" encoding="utf-8"?
RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"

    com.android.CustomTitleTest.AlwaysMarqueeTextView
            android:id="@+id/tvtitle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:focusableInTouchMode="true"
            android:singleLine="true" android:ellipsize="marquee"
            android:focusable="false" android:marqueeRepeatLimit="marquee_forever"
            android:layout_centerVertical="true"/

    ProgressBar android:id="@+id/pb"
        android:layout_width="fill_parent" android:layout_height="2sp"
        style="?android:attr/progressBarStyleHorizontal"
        android:visibility="gone" android:layout_alignParentBottom="true"
        /ProgressBar
/RelativeLayout
 
2、继承WebChromeClient,重写onProgressChanged和onReceivedTitle事件(进度条加载完成后使用动画渐退)
 代码如下:

public class MyWebChromeClient extends WebChromeClient {

    private Activity activity;
    private ProgressBar pb;
    private TextView tvtitle;
    public MyWebChromeClient(Activity activity) {
        this.activity = activity;
    }
    Animation animation;
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        pb=(ProgressBar)activity.findViewById(R.id.pb);
        pb.setMax(100);
        if(newProgress100){
            if(pb.getVisibility()==View.GONE)
                pb.setVisibility(View.VISIBLE);
            pb.setProgress(newProgress);
        }else{
            pb.setProgress(100);
            animation=AnimationUtils.loadAnimation(activity, R.anim.animation);
            // 运行动画 animation
            pb.startAnimation(animation);
            // 将 spinner 的可见性设置为不可见状态
            pb.setVisibility(View.INVISIBLE);
        }

        super.onProgressChanged(view, newProgress);
    }

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/bianchengyuyan/)

    @Override
    public void onReceivedTitle(WebView view, String title) {
        tvtitle=(TextView)activity.findViewById(R.id.tvtitle);
        tvtitle.setText(title);
        super.onReceivedTitle(view, title);
    }

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/bianchengyuyan/)

}
 
3、进度条的动画样式 res/anim/animation.xml
代码如下:

?xml version="1.0" encoding="utf-8"?

set xmlns:android="http://schemas.android.com/apk/res/android"

       alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="700"/ 
/set

4、码设置自定义的标题栏
 代码如下:

    private WebView browser;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CUSTOM_TITLE);
        setContentView(R.layout.main);
        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.broser_custom_title);
        browser = (WebView) findViewById(R.id.my_browser);
        // currentWebView=browser;
        browser.setWebChromeClient(new MyWebChromeClient(Main.this));
        browser.loadUrl("https://m.tulaoshi.com");
    }

展开更多 50%)
分享

猜你喜欢

Android 自定义标题栏 显示网页加载进度的方法实例

编程语言 网络编程
Android 自定义标题栏 显示网页加载进度的方法实例

QQ空间如何自定义标题栏?

电脑入门
QQ空间如何自定义标题栏?

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

在Authorware中实现自定义标题栏

设计软件 平面设计软件 广告设计软件
在Authorware中实现自定义标题栏

教你自定义Win10窗口标题栏颜色

电脑入门
教你自定义Win10窗口标题栏颜色

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

android dialog自定义实例详解

编程语言 网络编程
android dialog自定义实例详解

在中望CAD中绘图怎样自定义标题栏?教程

autocad教程
在中望CAD中绘图怎样自定义标题栏?教程

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

js之点击 超连接,提示一个层.点击空白层消失

js之点击 超连接,提示一个层.点击空白层消失

莪苦笑着等待 已没有未来 - QQ伤感分组

莪苦笑着等待 已没有未来 - QQ伤感分组
下拉加载更多内容 ↓