Android自定义带进度条WebView仿微信加载过程

在正常开发中,我们客户端需要用webView加载网页,再遇到网络慢或者访问的服务器响应时,页面是空白的,所以为了用户更好的体验,我们可以提供一个正在加载的进度条,提示用户正在加载。

本文结构:

1、自定义webView
2、在应用中的使用
3、效果展示

一、自定义webView

1、首先定义一个类,继承webView,并首先构造方法

public class ProgressBarWebView extends WebView{}

自定义控件,先实现构造方法,
第一中是程序内部实例化采用,传入context

public ProgressBarWebView(Context context) {
    super(context);
  }

第二种用于layout实例化,会把xml的参数通过AttributeSet带入View内

public ProgressBarWebView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

第三种主题的style信息,也从XML带入

public ProgressBarWebView(Context context, AttributeSet attrs,
      int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }

而我们需要加载进度条布局,所以我们需要在第二中构造方法中进行操作,如下:

//首选创建一个进度条,我们这里创建的是一个横向的进度条
progressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal);
//设置该进度条的位置参数
progressBar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 10, 0, 0));
//我们想要设置该进度条的背景样式
Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);
//设置背景样式
progressBar.setProgressDrawable(drawable);
//调用本身的addView(其实是调用ViewManager里的方法,看源码)方法讲进度条添加到当前布局视图中
addView(progressBar);
//正常想获取或这进行交互一般要实现一下两个方法,Myweblient()可以限制不用手机本身的浏览器,MyChromeClient()可以获得网页加载的进度,title等
setWebViewClient(new Myweblient());
setWebChromeClient(new MyChromeClient());
//是否可以缩放
getSettings().setSupportZoom(true);
getSettings().setBuiltInZoomControls(true);

2、重写WebViewClient,设置再本身的webview打开,不调用系统的浏览器:

//需要自己设置要不会打开手机浏览器
  private class Myweblient extends WebViewClient{
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
      view.loadUrl(url);
      return true;
    }
  }

3、重写WebChromeClient,获取相应进度信息,并设置

private class MyChromeClient extends WebChromeClient{
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
      if (newProgress == 100) { //当网页全部加载完毕时
        progressBar.setVisibility(GONE);
      } else {
        if (progressBar.getVisibility() == GONE)
          progressBar.setVisibility(VISIBLE);
        progressBar.setProgress(newProgress);
      }
      super.onProgressChanged(view, newProgress);
    } 

  }

4、前文构造器我们提到的进度条背景R.drawable.progress_bar_states,需要再xml中定义;

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <!-- 进度条背景 -->
  <item android:id="@android:id/background">
    <shape>
      <corners android:radius="2dp" /> 

      <gradient
        android:angle="270"
        android:centerColor="#E3E3E3"
        android:endColor="#E6E6E6"
        android:startColor="#C8C8C8" />
    </shape>
  </item>
  <!-- 绿色的进度值 -->
  <item android:id="@android:id/progress">
    <clip>
      <shape>
        <corners android:radius="2dp" /> 

        <gradient
          android:centerColor="#4AEA2F"
          android:endColor="#31CE15"
          android:startColor="#5FEC46" />
      </shape>
    </clip>
  </item>

</layer-list>

二、在页面中的使用

//布局中
<com.example.videodemo.ProgressBarWebView
    android:id="@+id/ss"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Activity中使用

ProgressBarWebView webView=(ProgressBarWebView) findViewById(R.id.ss);
webView.loadUrl("http://www.baidu.com/");

三、最终效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Android自定义带加载动画效果的环状进度条
  • Android开发之ProgressBar字体随着进度条的加载而滚动
  • Android 自定义view实现进度条加载效果实例代码
  • Android自定义View仿华为圆形加载进度条
  • Android中WebView加载网页设置进度条
  • Android Material加载进度条制作代码
  • Android自定义View基础开发之图片加载进度条
  • Android Webview添加网页加载进度条实例详解
  • Android中实现Webview顶部带进度条的方法
  • Android WebView线性进度条实例详解
时间: 2018-03-24

Android中实现Webview顶部带进度条的方法

写这篇文章,做份备忘,简单滴展示一个带进度条的Webview示例,进度条位于Webview上面. 示例图如下: 主Activity代码: 复制代码 代码如下: package com.droidyue.demo.webviewprogressbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.vi

Android开发之ProgressBar字体随着进度条的加载而滚动

在网上翻阅了很多关于ProgressBar滚动效果,但是始终没有找到适合项目中的这种效果,故自己写这篇文章,记录一下写作过程,给大家做一个参考.先看下最终效果效果图 我这里用的是LICEcap软件录制的gif图,效果有点掉帧,哪位仁兄有比较好的录制gif的软件烦请相告,小弟在此先行谢过. 首先看下xml代码,只有两个系统控件,一个TextView和一个ProgressBar,Button只是为了方便触发进度条的效果,实际项目中可以根据需求来做.首先看下xml中的代码: <?xml version

Android WebView线性进度条实例详解

推荐阅读:Android Webview添加网页加载进度条实例详解 先给大家展示下效果图:这个效果图大家一看就懂,在生活经常见到 1.wevbview_progressbar.xml <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 背景 --> <item android:id="@android:id/background"&g

Android 自定义view实现进度条加载效果实例代码

这个其实很简单,思路是这样的,就是拿view的宽度,除以点的点的宽度+二个点 之间的间距,就可以算出大概能画出几个点出来,然后就通过canvas画出点,再然后就是每隔多少时间把上面移动的点不断的去改变它的坐标就可以, 效果如下: 分析图: 代码如下: package com.example.dotloadview; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bit

Android Material加载进度条制作代码

最近看了几款APP的加载进度都是这种风格,感觉还不错,在网上找了一些资料,自己小练兵了一把: 主要运用的开源框架: /ViewPagerIndicator_library  主要就是tab页切换指示器 /ptr-lib 进度条 下载地址:https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh 一.使用方法 布局文件 <?xml version="1.0" encoding="utf-8"?>

Android自定义View基础开发之图片加载进度条

学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义View的实现: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.co

Android中WebView加载网页设置进度条

本文实例为大家分享了Android中WebView加载网页设置进度条的具体代码,供大家参考,具体内容如下 效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" a

Android自定义带加载动画效果的环状进度条

最近闲来无事,自定义了一个环状进度条,话不多说直接上代码 : public class CircleProgressView extends View{ private Paint mCirPaint; private Paint mArcPaint; private Paint mTextPaint; private float radius=200; private int textsize=60; private int progress=68; private int stokeWidt

Android Webview添加网页加载进度条实例详解

推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

Android自定义View仿华为圆形加载进度条

View仿华为圆形加载进度条效果图 实现思路 可以看出该View可分为三个部分来实现 最外围的圆,该部分需要区分进度圆和底部的刻度圆,进度部分的刻度需要和底色刻度区分开来 中间显示的文字进度,需要让文字在View中居中显示 旋转的小圆点,小圆点需要模拟小球下落运动时的加速度效果,开始下落的时候慢,到最底部时最快,上来时速度再逐渐减慢 具体实现 先具体细分讲解,博客最后面给出全部源码 (1)首先为View创建自定义的xml属性 在工程的values目录下新建attrs.xml文件 <resourc

Android自定义view实现阻尼效果的加载动画

效果: 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又称减幅振动.衰减振动.[1] 不论是弹簧振子还是单摆由于外界的摩擦和介质阻力总是存在,在振动过程中要不断克服外界阻力做功,消耗能量,振幅就会逐渐减小,经过一段时间,振动就会完全停下来.这种振幅随时间减小的振动称为阻尼振动.因为振幅与振动的能量有关,阻尼振动也就是能量不断减少的振动.阻尼振动是非简谐运

Android自定义View实现loading动画加载效果

项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. 先自定义一个View,继承自LinearLayout,在Layout中,添加布局控件 /** * Created by xiedong on 2017/3/7. */ public class Loading_view extends LinearLayout { private Context m

Android 自定义view和属性动画实现充电进度条效果

近期项目中需要使用到一种类似手机电池充电进度的动画效果,以前没学属性动画的时候,是用图片+定时器的方式来完成的,最近一直在学习动画这一块,再加上复习一下自定义view的相关知识点,所以打算用属性动画和自定义view的方式来完成这个功能,将它开源出来,供有需要的人了解一下相关的内容. 本次实现的功能类似下面的效果: 接下来便详细解析一下如何完成这个功能,了解其中的原理,这样就能举一反三,实现其他类似的动画效果了. 详细代码请看大屏幕 https://github.com/crazyandcoder

android自定义view仿今日头条加载文字变色效果

本文实例为大家分享了android自定义view加载文字变色效果的具体代码,供大家参考,具体内容如下 不分析了,很简单,直接贴代码: package com.loading; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import

Android自定义View实现圆环带数字百分比进度条

分享一个自己制作的Android自定义View.是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动.以下是效果图: 这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小. 先说一下思路:这个View一共分为三部分:第一部分也就是灰色的圆环部分,代表未完成的进度:第二部分是蓝色的圆弧部分,代表已经完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 下面是View的编写思路: ①:定义三个画笔,分别画灰色圆环,蓝色圆弧,红色文字: ②:

Android自定义View实现水平带数字百分比进度条

这个进度条可以反映真实进度,并且完成百分比的文字时随着进度增加而移动的,所在位置也恰好是真实完成的百分比位置,效果如下: 思路如下:第一部分是左侧的蓝色直线,代表已经完成的进度:第二部分是右侧灰色的直线,代表未完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 最关键的部分就是要确定百分比文本的确切位置,这里用了paint的getTextBounds方法,得到文本的宽高,然后再精确确定它的位置. view代码如下: public class NumberProgress

Android自定义View实现加载进度条效果

上一篇文章总结了下自定义View的几个步骤,如果还有不清楚的同学可以先去看看Android自定义View(一),这篇文章和大家分享一下自定义加载进度条,效果如下 下面就以水平的进度条为列进行讲解: 1.首先还是在attrs.xml文件中自定义我们需要的属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="GradientP

Android使用View Animation实现动画加载界面

之前分别介绍了View Animation和Drawable Animation,学了就要用啊,今天给大家一个使用View Animation实现动画加载界面的实现. 首先先看一下实现效果. 下面是实现代码 package com.example.animationloading; import java.util.Timer; import java.util.TimerTask; import android.annotation.SuppressLint; import android.a