android仿微信 进度条,Android开发之模仿微信打开网页的进度条效果(高仿)
一,为什么说是真正的高仿?
阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是实现方法都是一样的,而且,都忽略了微信加载网页时,进度条的缓慢动画效果,它不是生硬地一滑而过,而是用户体验很好,有个速度的变化,由慢到快的效果,语言难于描述,相信各位都有下载微信,可以随便打开个公众号的文章看看效果。
好了,上面说到,之前网上的方法都是都忽略了微信加载网页时,进度条的缓慢动画效果,实现代码也是千篇一律,如下:
/** 先实例化个进度条 */
ProgressBar mProgressBar = (ProgressBar) findViewById(R.id.ProgressBar);
/** 再实例化个 webView */
WebView webView = (WebView) findViewById(R.id.webview);
/** 然后就直接在 webClient 回调函数里面set 进度,这样的做法是生硬的效果 */
webView.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
mProgressBar.setProgress(newProgress);
}
});
/** 其他是颜色样式等,不是重点 */
.....
我以为是 ProgressBar 控件可能自身提供了动画的 API,可惜,没有,故自己动手写了这个,你如果找到了,告诉下我。
二,为什么要搞缓慢效果?
对,为什么要这么麻烦,你如果要搞个网页加载进度条,上面的代码不过 10 行,妥妥地实现了。因为用户体验,我不是产品经理,我是个程序员,而且这个效果也不是有谁叫我这样去做的,我就是看着别扭,微信的成功,我相信不仅仅是个朋友圈那么简单!
程序员应该具备注重用户体验的想法。
三,我的实现思路
方法很多,这话我说在前面,我的这种肯定不是最好的,但不失一用或改进。
主要是通过改变 view 的 LayoutParam 来实现有不同速度的移动效果,在每一次的进度段,例如第一次0~24,第二次24~56,这就是两个进度段,这两个进度段,具有不同的速度,这个需要计算出来,先根据手机屏幕宽度和 0~100 的进度数值来等比计算出实际的宽度,再计算出移动的速度,计算出来每个进度段的数据后,讲它们放进一个列表容器里面,然后通过一个 handler 来循环提取同期数据,不断地发消息,不停地 setLayoutParam。在达到 100 后,就证明加载完毕。
在这个过程需要处理计算的误差,例如第一个加载 20,第二次24,24-20 = 4,4/100,程序里面是 0 ,如果计算速度的话,就会差生0,所以要稍微加个 if 判断。
四,代码,内涵注释
核心类:
package com.slowlyprogressbar;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.View;
import android.widget.RelativeLayout;
import java.util.ArrayList;
import java.util.List;
/**
* Created by 林冠宏 on 2016/7/11.
*
* 真正的仿微信网页打开的进度条
*
* 下面的所有属性都可以自己采用 get set 来自定义
*
*/
public class SlowlyProgressBar {
private static final int StartAnimation = 0x12;
private Handler handler;
private View view;
/** 当前的位移距离和速度 */
private int thisWidth = 0;
private int thisSpeed = 0;
private int progress = 0; /** 当前的进度长度 */
private int record = 0; /** 移动单位 */
private int width = 10; /** 10dp each time */
private int height = 3; /** 3dp */
private boolean isStart = false;
private int phoneWidth = 0; /** 屏幕宽度 */
private int i = 0;
/** 每次的移动记录容器,位移对应每帧时间 */
private List progressQuery = new ArrayList<>();
private List speedQuery = new ArrayList<>();
public SlowlyProgressBar(View view, int phoneWidth) {
initHandler();
this.phoneWidth = phoneWidth;
this.view = view;
}
/** 善后工作,释放引用的持有,方能 gc 生效 */
public void destroy(){
if(progressQuery!=null){
progressQuery.clear();
progressQuery = null;
}
if(speedQuery!=null){
speedQuery.clear();
speedQuery = null;
}
view = null;
handler.removeCallbacksAndMessages(null);
handler = null;
}
public void setProgress(int progress){
if(progress>100 || progress <= 0){ /** 不能超过100 */
return;
}
/** 每次传入的 width 应该是包含之前的数值,所以下面要减去 */
/** 下面记得转化比例,公式 (屏幕宽度 * progress / 100) */
this.width = (progress * phoneWidth)/100;
/** lp.width 总是获取前一次的 大小 */
/** 移动 100px 时的速度一次倍率 是 2 */
int size = progressQuery.size();
if(size != 0){
size = progressQuery.get(size-1);
}
Log.d("zzzzz","width - size = "+(width - size));
/** 计算倍率,2/100 = x/width */
int distance = width - size;
int speedTime;
if(distance<=100){
speedTime = 2;
}else{
speedTime = (int) ((2 * distance)/100.0);
}
/** 添加 */
progressQuery.add(this.width);
speedQuery.add(speedTime);
/** 开始 */
if(!isStart){
isStart = true;
handler.sendEmptyMessage(StartAnimation);
}
}
public SlowlyProgressBar setViewHeight(int height){
this.height = height;
return this;
}
private void initHandler(){
handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case StartAnimation:
/** 提取队列信息 */
if(progress >= thisWidth){ /** 如果已经跑完,那么移出 */
if(progressQuery.size() == i){
Log.d("zzzzz","break");
if(progress >= 100){ /** 全部走完,隐藏进度条 */
view.setVisibility(View.INVISIBLE);
}
isStart = false;
break;
}
Log.d("zzzzz", "size is " + progressQuery.size());
thisWidth = progressQuery.get(i);
thisSpeed = speedQuery.get(i);
i ++;
}
move(thisSpeed,view.getLayoutParams().width);
Log.d("zzzzz", "send 100 "+thisSpeed);
/** 发信息的延时长度并不会影响速度 */
handler.sendEmptyMessageDelayed(StartAnimation,1);
break;
}
}
};
}
/** 移动 */
private void move(int speedTime,int lastWidth){
if(speedTime > 9){
speedTime = 9; /** 控制最大倍率 */
}
/** 乘 3 是纠正误差 */
progress = (record * speedTime);
/** 纠正 */
if(progress >= lastWidth){
view.setLayoutParams(new RelativeLayout.LayoutParams(progress,height*3));
}else{
Log.d("zzzzz","hit "+progress+"---"+lastWidth);
}
record ++;
}
}
五,使用方法与截图
超简单引入,view 可以是随便一个,例如 TextView,给它一个 background 就行了,就有颜色了。
public class MainActivity extends AppCompatActivity {
private SlowlyProgressBar slowlyProgressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
slowlyProgressBar =
new SlowlyProgressBar
(
findViewById(R.id.p),
getWindowManager().getDefaultDisplay().getWidth()
)
.setViewHeight(3);
WebView webView = (WebView) findViewById(R.id.webview);
webView.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
slowlyProgressBar.setProgress(newProgress);
}
});
webView.loadUrl("http://www.cnblogs.com/linguanh");
}
@Override
public void finish() {
super.finish();
if(slowlyProgressBar!=null){
slowlyProgressBar.destroy();
slowlyProgressBar = null;
}
}
}
以上所述是小编给大家介绍的Android开发之模仿微信打开网页的进度条效果(高仿),如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
android仿微信 进度条,Android开发之模仿微信打开网页的进度条效果(高仿)相关推荐
- android仿微信图片上传进度,Android开发之模仿微信打开网页的进度条效果(高仿)...
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果",你会看到有很多类似的文章,不过他们有个共同点,就是实 ...
- android微信风格,Android开发实现模仿微信小窗口功能【Dialog对话框风格窗口】
本文实例讲述了Android开发实现模仿微信小窗口功能.分享给大家供大家参考,具体如下: 运用方法: 将显示窗口的风格 设置为对话框风格即可 具体效果: 具体实现: 首先我们先定义布局文件: andr ...
- 微信公众开放平台开发08---纯java 实现微信开发:编写自定义菜单
微信公众开放平台开发08---纯java 实现微信开发:编写自定义菜单 微信公众开放平台开发08---纯java 实现微信开发:编写自定义菜单 技术qq交流群:JavaDream:251572072 ...
- 个人微信号二次开发sdk协议,微信个人号开发API接口
个人微信号二次开发sdk协议,微信个人号开发API接口 微信SDK程序概要说明 个人微信号开发sdk非微信ipad协议.非mac协议,非安卓协议,api可实现微信99%功能: 无需扫码登录.可收发朋友 ...
- 企业微信SCRM系统部署_企业微信SCRM二次开发_企业微信SCRM系统独立版源码价格
企业微信SCRM系统部署_企业微信SCRM二次开发_企业微信SCRM系统独立版源码价格 点趣互动是企业微信系统的第三方应用提供厂商,用于管理员工企业微信的内一款系统软件.点趣互动企业微信scrm软件主 ...
- 微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片 背景 解决方案 文章参考 背景 微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
- 李长军android语音开发_Android模仿微信录音、发送语音效果实现
在项目开发中,有个需求:实现模仿微信录音,发送语音的功能.长按按钮录音,弹框显示语音时间,以及上滑取消发送.我重写了一个发送语音的控件,以实现该功能. 首先添加权限: AudioRecorderBut ...
- android饿了么购物车,分享一个购物车的demo(效果高仿饿了么软件的购物效果)
此次分享的是一个很常见的效果,凡是涉及到购物的app或者旅游类以及订餐类的app都有看到过这种效果,两个list view联动显示,添加购物车时的一个抛物线动画实现,以及图标或者item右上角的数字显 ...
- 【游戏开发创新】手把手教你使用Unity制作一个高仿酷狗音乐播放器,滨崎步,旋律起,爷青回(声音可视化 | 频谱 | Audio)
文章目录 一.前言 二.获取UI素材 三.使用UGUI制作界面 1.界面布局 2.账号圆形头像 3.搜索框 4.调节UI层 5.黑色按钮悬浮高亮效果 6.纯文字按钮 7.滚动列表自适应 8.歌名与视频 ...
最新文章
- Delphi 正则表达式之TPerlRegEx 类的属性与方法(3): Start、Stop
- 从传统运维到云运维演进历程之软件定义存储(五)上
- win32汇编实现拼接SQL语句
- mysql用in报错_Mysql子查询IN中使用LIMIT
- leetcode No.21 合并两个有序链表
- 视频会议平台Zoom市值近1200亿美元,投资人李嘉诚赚翻了
- linux amd64 界面,linux脚本编程---ubuntu-12.04-server-amd64如何配置图形界面
- html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效
- java pdf 文字_Java给pdf文件添加文字等信息
- 黑马vue实战项目-(四)商品分类页面的开发
- 安装stm32芯片包
- django+vue实现机器学习代码生成系统(数据清洗、数据探索、机器学习模型构建、模型评估)
- codeforces gym100851 Generators 暴力+贪心
- 【scratch高阶案例教学】scratch黄金矿工 scratch创意编程 少儿编程 手把手教小朋友们从零制作黄金矿工游戏
- mysql查找附近算法_Java+MySQL实现附近功能
- mybait——入门简单项目
- 搭建自己的技术博客系列(六)酷炫主题icarus常用配置整合版,快速搞定博客首页
- 工信部:深入推进制造和网络强国建设
- 华为mate40pro和小米10pro哪个好
- Python爬虫入门,详细讲解爬虫过程