Android自定义下拉刷新控件RefreshableView
这是在了解下拉刷新功能原理下的产物,下拉刷新可以说是国产app里面必有的功能,连google都为此出了swiperefreshlayout,一种md风格的下拉刷新。
不过,md风格在国内似乎很是艰难,不单单是国内系统主流仍是4.4的原因,也有用户习惯的问题,扯的有点多了,在看了许多博客之后,我突然想写一个能仿照 swiperefreshlayout 的兼容所有控件的下拉刷新,不单单只是 listview,希望它也可以包容普通的view和scrollview,经过两天的奋斗,终于搞定了,因为我的目的只是想要下拉刷新,所以功能很少,不过,如果能把下拉刷新搞定了,其它的功能,就可以慢慢堆砌起来了。
新系统的原因,无法给出合适的gif,只能截图了:
第一张图片展示的是textview:
第二章图片展示的是listview:
第三章图片展示的是scrollview:
基本上这就是我测试的成功的控件,兼容普通的view是最简单的,复杂一点的就是listview和scrollview。
思路:我的思路和大部分博客都是一样的,自定义一个viewgroup,然后将包含的要拖拽的控件的touch事件交给 refreshableview 处理,动态改变 headview 的 margintop 的值,以上。当然,这其中会有一些细节要注意,比如 ontouch 方法的返回值的处理,还有子 view 的 margintop 值的处理。
源码
先是headview的布局文件:
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <imageview android:id="@+id/imageview_down" android:layout_width="14dp" android:layout_height="24dp" android:padding="2dp" android:src="@drawable/svg_down" /> <progressbar android:visibility="gone" android:id="@+id/progressbar" style="?android:attr/progressbarstyle" android:layout_width="20dp" android:layout_height="20dp" android:progressdrawable="@drawable/progressbar" /> <textview android:padding="15dp" android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/pull_to_refresh" android:textsize="16sp" /> </linearlayout>
接下来就是至关重要的类 refreshableview:
package com.pull2refresh; import android.animation.objectanimator; import android.animation.valueanimator; import android.annotation.targetapi; import android.content.context; import android.os.build; import android.util.attributeset; import android.util.log; import android.view.layoutinflater; import android.view.motionevent; import android.view.view; import android.view.viewconfiguration; import android.view.viewgroup; import android.view.animation.rotateanimation; import android.widget.imageview; import android.widget.linearlayout; import android.widget.progressbar; import android.widget.textview; import shike.xianrou.com.pull2refresh.r; /** * created by cjh on 16-9-6. */ public class refreshableview extends linearlayout implements view.ontouchlistener { private static final string tag = "refreshableview"; private static final int refreshing = 0;//正在刷新 private static final int original = refreshing + 1;//初始状态 private static final int release_to_refreshing = original + 1;//释放即将刷新的状态 private int current_status = original;//当前最新状态 private linearlayout headview;//刷新layout private textview textview;//刷新layout中的文字提示 private imageview imageview;//刷新layout中的箭头 private progressbar progressbar;//刷新layout中的进度条 private view view;//手指控制的下拉的view private int hideheight;//刷新layout要隐藏的高度 private boolean isablepull;//是否可以下拉,例如当 current_status = refreshiing 时是不可以下拉拖拽的 private float ydown;//手指按下的坐标 private int touchslop = viewconfiguration.get(getcontext()).getscaledtouchslop();//界限值,防止手指误触,过于灵敏 private boolean firstlayout = true;//第一次调用onlayout的时候置为false private int maxmargintop;//刷新layout能拉下的最大距离 private marginlayoutparams marginlayoutparams;//刷新layout的marginlayoutparams private string pull_to_refresh = "下拉可以刷新"; private string release_to_refresh = "释放立即刷新"; private string refreshing = "正在刷新…"; private int original_margin = 0;//针对下拉的view存在margintop这中特殊值的处理 public interface pulltorefreshlistener { void onrefresh(); } private pulltorefreshlistener pulltorefreshlistener; public void addpulltorefreshlistener(pulltorefreshlistener pulltorefreshlistener) { this.pulltorefreshlistener = pulltorefreshlistener; } public refreshableview(context context) { super(context); init(); } public refreshableview(context context, attributeset attrs) { super(context, attrs); init(); } public refreshableview(context context, attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); init(); } @targetapi(build.version_codes.lollipop) public refreshableview(context context, attributeset attrs, int defstyleattr, int defstyleres) { super(context, attrs, defstyleattr, defstyleres); init(); } private void init() { headview = (linearlayout) layoutinflater.from(getcontext()).inflate(r.layout.refresh_layout, null, true); imageview = (imageview) headview.findviewbyid(r.id.imageview_down); progressbar = (progressbar) headview.findviewbyid(r.id.progressbar); textview = (textview) headview.findviewbyid(r.id.textview); progressbar.setvisibility(view.gone); setorientation(vertical); addview(headview, 0); } @override protected void onlayout(boolean changed, int l, int t, int r, int b) { super.onlayout(changed, l, t, r, b); log.d(tag, "onlayout"); if (changed && firstlayout) { //将view的touch时间的处理交给refreshableview去处理 view = getchildat(1); view.setontouchlistener(this); //刷新layout的 margintop 的最大值设为刷新头的高度 maxmargintop = headview.getheight(); //要将控件完全隐藏起来,那么隐藏的高度就设置为控件的高度 hideheight = -headview.getheight(); marginlayoutparams = (marginlayoutparams) headview.getlayoutparams(); marginlayoutparams.topmargin = hideheight; headview.setlayoutparams(marginlayoutparams); //这里必须将firstlayout设置为false,否则在处理touch是件的过程中,headview在怎么调用setlayoutparams都会被置为初始的隐藏状态 firstlayout = false; //如果子view是一个viewgroup 那么就需要计算出子view的margintop的值,因为如果margintop不为0,那么子view的y轴坐标和父view的坐标是不一样的 if (view instanceof viewgroup) { int[] childlocations = new int[2]; int[] viewlocations = new int[2]; view.getlocationonscreen(viewlocations); ((viewgroup) view).getchildat(0).getlocationonscreen(childlocations); original_margin = childlocations[1] - viewlocations[1]; log.d(tag, "onlayout viewlocations[1] " + viewlocations[1]); log.d(tag, "onlayout locations[1] " + childlocations[1]); log.d(tag, "onlayout original_margin " + original_margin); } } } @override public boolean ontouch(view view, motionevent motionevent) { if (pulltorefreshlistener != null) { isablepull(); if (isablepull) { switch (motionevent.getaction()) { case motionevent.action_down: ydown = motionevent.getrawy(); break; case motionevent.action_move: float ymove = motionevent.getrawy(); float distance = ymove - ydown; //如果手势是向上的,并且手势在y轴的移动距离小于界限值,那么就不处理 if (distance < 0 || math.abs(distance) < touchslop) return false; //margintop的距离是手势距离的1/2,形成费力延迟的效果 marginlayoutparams.topmargin = (int) (distance / 2 + hideheight); log.d(tag, "topmargin " + marginlayoutparams.topmargin); //如果大于最大的margintop的值的时候,就将值置为 maxmargintop if (marginlayoutparams.topmargin >= maxmargintop) marginlayoutparams.topmargin = maxmargintop; if (marginlayoutparams.topmargin >= 0) { //当刷新头完全显示的时候,改变状态,置为 释放刷新的状态 if (current_status != release_to_refreshing) { rotate(0, 180); textview.settext(release_to_refresh); } current_status = release_to_refreshing; } else { //否则就置为初始状态 if (current_status != original) { rotate(180, 360); textview.settext(pull_to_refresh); } current_status = original; } headview.setlayoutparams(marginlayoutparams); break; case motionevent.action_cancel: case motionevent.action_up: float yup = motionevent.getrawy(); float dis = yup - ydown; if (dis > 0 && math.abs(dis) > touchslop) switch (current_status) { //释放刷新 case release_to_refreshing: animatemargintop(marginlayoutparams.topmargin, 0); imageview.clearanimation(); imageview.setvisibility(view.gone); progressbar.setvisibility(view.visible); textview.settext(refreshing); pulltorefreshlistener.onrefresh(); break; //初始化 case original: reset(); //从当前的margintop的值,转变到隐藏所需的 margintop animatemargintop(marginlayoutparams.topmargin, hideheight); break; } else return false; break; } return true; } } return false; } /** * 判断是否可以下拉 * * @return */ public boolean isablepull() { //统一判断,其实主要是对于view是普通view的判断 if (current_status != refreshing) isablepull = true; else isablepull = false; if (view instanceof viewgroup) { isablepull = false; view childview = ((viewgroup) view).getchildat(0); int[] viewlocations = new int[2]; int[] childviewlocations = new int[2]; view.getlocationonscreen(viewlocations); childview.getlocationonscreen(childviewlocations); //这一步中的 original_margin 至关重要,就是用来兼容 子view 有margintop属性的值,当childview 的y轴坐标 和 计算出了 margin 值后的父view坐标相等时,说明此时处于可下拉的状态 if (viewlocations[1] + original_margin == childviewlocations[1]) isablepull = true; else isablepull = false; } return isablepull; } private void rotate(int from, int to) { rotateanimation rotateanimation = new rotateanimation(from, to, imageview.getwidth() / 2, imageview.getheight() / 2); rotateanimation.setduration(100); rotateanimation.setfillafter(true); imageview.startanimation(rotateanimation); } private void animatemargintop(int from, int to) { objectanimator objectanimator = objectanimator.ofint(headview, "cjh", from, to); objectanimator.setduration(300); objectanimator.addupdatelistener(new valueanimator.animatorupdatelistener() { @override public void onanimationupdate(valueanimator valueanimator) { int margin = (int) valueanimator.getanimatedvalue(); marginlayoutparams.topmargin = margin; headview.setlayoutparams(marginlayoutparams); } }); objectanimator.start(); } public void complete() { animatemargintop(0, hideheight); reset(); } private void reset() { rotate(180, 360); textview.settext(pull_to_refresh); imageview.setvisibility(view.visible); progressbar.setvisibility(view.gone); } }
使用:
<com.pull2refresh.refreshableview android:id="@+id/refreshableview" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center"> <com.pull2refresh.mtextview android:id="@+id/mtextview" android:layout_width="match_parent" android:layout_height="100dp" android:background="@color/colorprimary" android:gravity="center" android:text="hello world!" android:textsize="22sp" /> </com.pull2refresh.refreshableview>
... refreshableview.addpulltorefreshlistener(new refreshableview.pulltorefreshlistener() { @override public void onrefresh() { setdata(); } }); ... private void setdata() { objectanimator objectanimator = objectanimator.offloat(textview, "text", 1f, 100f); objectanimator.setduration(3000); objectanimator.addupdatelistener(new valueanimator.animatorupdatelistener() { @override public void onanimationupdate(valueanimator valueanimator) { textview.settext((float) valueanimator.getanimatedvalue()); } }); objectanimator.addlistener(new animator.animatorlistener() { @override public void onanimationstart(animator animator) { } @override public void onanimationend(animator animator) { refreshableview.complete(); } @override public void onanimationcancel(animator animator) { } @override public void onanimationrepeat(animator animator) { } }); objectanimator.start(); }
在我自定义的 refreshableview 中,如果不设置下拉的监听,就没有下拉的效果,也就是不支持下拉
源码下载:android下拉刷新控件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。