新手自定义控件,创建属于自己的下拉刷新(一)---Android,ListView实现IOS的弹性效果
前言
相信很多童鞋对于控件的下拉刷新都比较熟悉吧,常用的PullToRefresh开源库和Google自带的SwipeRefreshLayout大家肯定也很熟悉吧,但作为一个Android开发新手,对于自定义控件和自定义View来实现一些效果肯定还是比较恐惧,无从下手,笔者也是如此.但万事开头难,只要理清楚想要实现的效果,按照步骤来分布来具体代码实施就OK了.
其实下拉刷新,感觉万变不离其宗,对普通的下拉刷新有很多可以延伸的地方,比如:带帧动画的下拉刷新.美团,大众点评,汽车之家.从listview延伸到所有控件的下拉刷新.笔者近期想要实现的就是ViewPager左右滑动刷新加载带弹性的效果.笔者打算通过几篇日志来记录整个实现过程,供各位参考.
效果
本文想要实现的效果是,Android中的ListView下拉的时候有弹性的效果,类似IOS的ListView,但与IOS不一样,android想要实现这一的效果需要重写Listview.我们先来看看效果图,如下:
实现思路
我们想要的目的清楚了,然后就是具体实现思路.
核心:在ListView的顶部增加一个headView.并且在下拉的过程中动态改变HeadView的高度.并且在用户手松开的时候,将ListView回滚到顶部,headView隐藏.
具体实现步骤:
1.在ListView的顶部增加一个headView,将headView的初始位置隐藏在ListView的上方.(即:在ListView里面addHeaderView);
注:这一步的实现,需要在ListView里面测绘headView的高宽,方可显示出来.有点类似继承View里面的onmeasure()方法,不过因为是重写ListView,这里也要去measure,HeadView的高宽;具体代码如下:
private void measureView(View headview) {
//设定LayoutParams来设定width和height;
ViewGroup.LayoutParams p = headview.getLayoutParams();
if (p == null){
p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}
//这边宽度就是p的宽度,也就是父容器的width,listView是限制宽度的，所以需要getChildMeasureSpec这个方法
int childWidthSpec = ViewGroup.getChildMeasureSpec(0,0,p.width);
//接下来是高度
int lpheight = p.height;
int childHeightSpec;
if (lpheight > 0){
//通过makeMeasureSpec方法来获取高度
childHeightSpec = MeasureSpec.makeMeasureSpec(lpheight,MeasureSpec.EXACTLY);//精确模式
}else{
childHeightSpec = MeasureSpec.makeMeasureSpec(0,MeasureSpec.UNSPECIFIED);//不指定大小
}
//宽高赋值给headview
headview.measure(childWidthSpec, childHeightSpec);
}2.添加进去之后,那就是最初的显示,把headview隐藏到listview上,视图不可见;
addHeaderView(headview);//添加到父布局的headView
headviewHeight = headview.getMeasuredHeight();//获取到测量的高度
headview.setPadding(0,-headviewHeight,0,0);//隐藏到上面3.在listview处于顶部的时候,监听用户滑动的过程监听用户手势进行下拉,否则,就不能下拉,那么就会用到AbsListView.OnScrollListener这个监听,当当前可见item的postion=0的时候,才下拉:
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
//在移动的过程中,把可见的第一项赋值给全局变量,方便后面下拉刷新
mFirstVisibleItem = firstVisibleItem;
}4.就是我们的下拉回滚,主要是重写当前listview的ontouch事件来具体实现.ACTION_MOVE的代码主要是来实现listview随手势下拉,headview高度增加;ACTION_UP的代码主要是listview回滚的弹性特效,其实也监简单就一句代码就搞定,主要用了这个smoothScrollBy()方法,代码:
//重写onTouch方法,实现listview下拉回滚特效
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
//如果当前listview处于初始状态,也就是第一个可见item的postion为0的时候,记录手指滑动的Y轴坐标
if (mFirstVisibleItem == 0){
startY = ev.getY();
}
break;
case MotionEvent.ACTION_MOVE:
float tempY = ev.getY();
//在顶部时,给偏移量赋值
if (mFirstVisibleItem == 0){
// startY = tempY;
offsetY = tempY - startY;
float currentHeight = (-headviewHeight+offsetY/3);
headview.setPadding(0, (int) currentHeight, 0, 0);//这一步就是实现listView随手势下拉,headview高度增加
}
break;
case MotionEvent.ACTION_UP:
// this.smoothScrollBy((int)(-headviewHeight+offsetY/3)+headviewHeight, 500);
//恢复到headView隐藏的高度
this.smoothScrollBy(-headviewHeight, 500);
headview.setPadding(0,-headviewHeight,0,0);//headview隐藏到上面
break;
}
return super.onTouchEvent(ev);
}demo下载
http://download.csdn.net/detail/qq_28690547/9398483
注:demo是android-studio项目,如果还在用eclipse的同学,直接把res和java目录文件拷过去就能跑了哈,不过建议大家还是多用android-studio,真的很方便.
结语
整个过程就完整实现了,是不是很简单了.其实自定义View我总结的,就跟咱们以前美术课拿笔在纸上作画一样,首先要明确想要画什么,其次你就会思考为了实现这个目标,我们第一步第二步第三步要做些什么.最后就是具体实现这些步骤,与画画不一样,咱们就是用代码来实现它而已.不过你这样理解了,以后就对自定义控件不那么恐惧了.
补充
其实一个很简单的方法,也可以实现ListView的弹性效果,重写ListView里面的overScrollBy的方法,设定maxOverScrollY的值也可以简单实现效果,(不过下拉刷新涉及不同状态改变其中的值,还是得用headview),代码:
/** * 重写overScrollBy方法里面的maxOverScrollY实现ListView的弹性效果 * Created by max on 2016/1/10. */
public class DouListView extends ListView{
public DouListView(Context context) {
super(context);
}
public DouListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, 300, isTouchEvent);//这个300可以根据屏幕density来满足多分布需求.
}
}