我们看到手机中的各种APP的花样繁多的下拉刷新是不是有点心动呢,想着自己定制自己的专门的下拉刷新,市场上比如,58同城,京东,天猫,美团等下拉刷新都是在下拉头部执行帧动画,我最近看到一个APP,就是慕课网的Android客户端,平时有时候看这个网站的学习视频,就下了一个,发现它的头部是一个圆形的水波纹效果:
看起来很Cool,正好公司有需求做官网的APP,正好可以用上公司的Logo做一个水波纹的下拉刷新,首先要实现水波纹的效果,通过解压慕课网的客户端,发现它的实现其实也是用帧动画,就是假的水波纹,但是我们不想这么早,要做一个完整的水波纹下拉刷新,那么就要实现水波纹的效果,在github上很多水波纹的实现,实现原理是用正弦与余弦曲线,这里放一个链接,有兴趣的可以看看https://github.com/john990/WaveView
然后用美工切的图往上一盖,基本雏形就出来了
ok,下面就是往下拉刷新上集成了。这里介绍一个比较牛逼的下拉刷新框架android-Ultra-Pull-to-Refresh,这个框架可以方便的定制下拉刷新的头部,接口强大,值得研究,下面我们就进行移植实现:
首先使用这个框架定制头部,需要我们把头部的View先实现出来,只要实现PtrUIHandler接口即可:
package cn.zmit.ow.widget; import in.srain.cube.views.ptr.PtrFrameLayout; import in.srain.cube.views.ptr.PtrUIHandler; import android.annotation.SuppressLint; import android.content.Context; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.widget.FrameLayout; import cn.zmit.ow.R; import cn.zmit.ow.widget.waveview.WaveView; /** * 自定义下拉刷新头部 * * @author Robin time 2015-02-11 14:06:33 * */ public class CustomPtrHeader extends FrameLayout implements PtrUIHandler { WaveView wave_view; int i; public CustomPtrHeader(Context context) { super(context); init(); } public CustomPtrHeader(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CustomPtrHeader(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } @SuppressLint("NewApi") public CustomPtrHeader(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(); } /** * 初始化 */ private void init() { View view = LayoutInflater.from(getContext()).inflate( R.layout.custom_ptr_header, this); wave_view = (WaveView) view.findViewById(R.id.wave_view); } @Override public void onUIReset(PtrFrameLayout frame) { } @Override public void onUIRefreshPrepare(PtrFrameLayout frame) { } @Override public void onUIRefreshBegin(PtrFrameLayout frame) { /* if (wave_view.getProgress()==0) { for (i = 0; i < 100; i++) { new Thread(){ public void run() { UIKit.runOnMainThreadAsync(new Runnable() { @Override public void run() { wave_view.setProgress(i); if (wave_view.getProgress()==100) { wave_view.setProgress(0); } } }); try { Thread.sleep(200); } catch (InterruptedException e) { e.printStackTrace(); } }; }.start(); } }*/ } @Override public void onUIRefreshComplete(PtrFrameLayout frame) { } @Override public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, int oldPosition, int currentPosition, float oldPercent, float currentPercent) { float percent = Math.min(1f, currentPercent); // if (status == PtrFrameLayout.PTR_STATUS_PREPARE) { wave_view.setProgress((int) (percent * 100 * 1.0)); invalidate(); // } } /** * 设置波纹进度 * @param progress 进度 */ public void setWaveProgress(int progress){ wave_view.setProgress(progress); } }
头部定义好之后,就可以调用下拉刷新的代码
/* 创建自定义刷新头部view */ header = new CustomPtrHeader(this); /* 设置刷新头部view */ ptr_view.setHeaderView(header); /* 设置回调 */ ptr_view.addPtrUIHandler(header); /* 设置下拉刷新监听 */ ptr_view.setPtrHandler(new PtrHandler() { @Override public void onRefreshBegin(PtrFrameLayout frame) { refresh(); } @Override public boolean checkCanDoRefresh(PtrFrameLayout frame, View content, View header) { if (!StringUtils.isEmpty(mCurrentUrl)) { return mCurrentUrl.equals("http://m.zmit.cn/") || mCurrentUrl.equals("http://m.zmit.cn/index.php") ? false : mWebView.getScrollY() == 0; } else { return mWebView.getScrollY() == 0; } } }); /* 延时100秒 */ ptr_view.postDelayed(new Runnable() { @Override public void run() { ptr_view.autoRefresh(); } }, 100); /* 下拉时阻止事件分发 */ ptr_view.setInterceptEventWhileWorking(true);
这样就完成了,看下最终实现效果
转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/7787.html


微信打赏

支付宝打赏
感谢您对作者wangbin的打赏,我们会更加努力! 如果您想成为作者,请点我