想要亲手实现一个刷新控件,你只需要掌握这些知识

简介:

现在Android阵营里面的刷新控件很多,稂莠不齐。笔者试图从不一样的角度,在它的个性化和滚动上下一些功夫。笔者期望,这个刷新控件能像Google的SwipeRefreshLayout一样,支持大多数列表控件,有加载更多功能,最好是要很方便的支持个性化,滚动中能够越界是不是也会带来比普通的刷新控件更好的交互体验。开源库在这,TwinklingRefreshLayout,如果喜欢请star,笔者的文章也是围绕着这个控件的实现来说的。

为了方便,笔者将TwinklingRefreshLayout直接继承自FrameLayout而不是ViewGroup,可以省去onMeasure、onLayout等一些麻烦,Header和Footer则是通过LayoutParams来设置View的Gravity属性来做的。

1. View的onAttachedToWindow()方法

首先View没有明显的生命周期,我们又不能再构造函数里面addView()给控件添加头部和底部,因此这个操作比较合适的时机就是在onDraw()之前——onAttachedToWindow()方法中。

此时View被添加到了窗体上,View有了一个用于显示的Surface,将开始绘制。因此其保证了在onDraw()之前调用,但可能在调用 onDraw(Canvas) 之前的任何时刻,包括调用 onMeasure(int, int) 之前或之后。比较适合去执行一些初始化操作。(此外在屏蔽Home键的时候也会回调这个方法)

  • onDetachedFromWindow()与onAttachedToWindow()方法相对应。
  • ViewGroup先是调用自己的onAttachedToWindow()方法,再调用其每个child的onAttachedToWindow()方法,这样此方法就在整个view树中遍布开了,而visibility并不会对这个方法产生影响。
  • onAttachedToWindow方法是在Activity resume的时候被调用的,也就是act对应的window被添加的时候,且每个view只会被调用一次,父view的调用在前,不论view的visibility状态都会被调用,适合做些view特定的初始化操作;
  • onDetachedFromWindow方法是在Activity destroy的时候被调用的,也就是act对应的window被删除的时候,且每个view只会被调用一次,父view的调用在后,也不论view的visibility状态都会被调用,适合做最后的清理操作;

就TwinklingRefreshLayout来说,Header和Footer需要及时显示出来,View又没有明显的生命周期,因此在onAttachedToWindow()中进行设置可以保证在onDraw()之前添加了刷新控件。

 
 
  1. @Override 
  2.     protected void onAttachedToWindow() { 
  3.         super.onAttachedToWindow(); 
  4.  
  5.         //添加头部 
  6.         FrameLayout headViewLayout = new FrameLayout(getContext()); 
  7.         LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0); 
  8.         layoutParams.gravity = Gravity.TOP
  9.         headViewLayout.setLayoutParams(layoutParams); 
  10.  
  11.         mHeadLayout = headViewLayout; 
  12.         this.addView(mHeadLayout);//addView(view,-1)添加到-1的位置 
  13.  
  14.         //添加底部 
  15.         FrameLayout bottomViewLayout = new FrameLayout(getContext()); 
  16.         LayoutParams layoutParams2 = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0); 
  17.         layoutParams2.gravity = Gravity.BOTTOM; 
  18.         bottomViewLayout.setLayoutParams(layoutParams2); 
  19.  
  20.         mBottomLayout = bottomViewLayout; 
  21.         this.addView(mBottomLayout); 
  22.         //...其它步骤 
  23.     }  

但是当TwinklingRefreshLayout应用在Activity或Fragment中时,可能会因为执行onResume重新触发了onAttachedToWindow()方法而导致重复创建Header和Footer挡住原先添加的View,因此需要加上判断:

 
 
  1. @Override 
  2.    protected void onAttachedToWindow() { 
  3.        super.onAttachedToWindow(); 
  4.        System.out.println("onAttachedToWindow绑定窗口"); 
  5.  
  6.        //添加头部 
  7.        if (mHeadLayout == null) { 
  8.            FrameLayout headViewLayout = new FrameLayout(getContext()); 
  9.            LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0); 
  10.            layoutParams.gravity = Gravity.TOP
  11.            headViewLayout.setLayoutParams(layoutParams); 
  12.  
  13.            mHeadLayout = headViewLayout; 
  14.  
  15.            this.addView(mHeadLayout);//addView(view,-1)添加到-1的位置 
  16.  
  17.            if (mHeadView == null) setHeaderView(new RoundDotView(getContext())); 
  18.        } 
  19.        //... 
  20.    }  

2. View的事件分发机制

事件的分发过程由dispatchTouchEvent、onInterceptTouchEvent和onTouchEvent三个方法来共同完成的。由于事件的传递是自顶向下的,对于ViewGroup,笔者觉得最重要的就是onInterceptTouchEvent方法了,它关系到事件是否能够继续向下传递。看如下伪代码:

 
 
  1. public boolean dispatchTouchEvent(MotionEvenet ev){ 
  2.     boolean consume = false
  3.     if (onInterceptTouchEvent(ev)) { 
  4.         consume = onTouchEvent(ev); 
  5.     }else
  6.         consume = child.dispatchTouchEvent(ev); 
  7.     } 
  8.     return consume; 
  9.  

如代码所示,如果ViewGroup拦截了(onInterceptTouchEvent返回true)事件,则事件会在ViewGroup的onTouchEvent方法中消费,而不会传到子View;否则事件将交给子View去分发。

我们需要做的就是在子View滚动到顶部或者底部时及时的拦截事件,让ViewGroup的onTouchEvent来交接处理滑动事件。

3. 判断子View滚动达到边界

在什么时候对事件进行拦截呢?对于Header,当手指向下滑动也就是 dy>0 且子View已经滚动到顶部(不能再向上滚动)时拦截;对于bottom则是 dy<0 且子View已经滚动到底部(不能再向下滚动)时拦截:

 
 
  1. @Override 
  2.     public boolean onInterceptTouchEvent(MotionEvent ev) { 
  3.         switch (ev.getAction()) { 
  4.             case MotionEvent.ACTION_DOWN: 
  5.                 mTouchY = ev.getY(); 
  6.                 break; 
  7.             case MotionEvent.ACTION_MOVE: 
  8.                 float dy = ev.getY() - mTouchY; 
  9.  
  10.                 if (dy > 0 && !canChildScrollUp()) { 
  11.                     state = PULL_DOWN_REFRESH; 
  12.                     return true
  13.                 } else if (dy < 0 && !canChildScrollDown() && enableLoadmore) { 
  14.                     state = PULL_UP_LOAD; 
  15.                     return true
  16.                 } 
  17.                 break; 
  18.         } 
  19.         return super.onInterceptTouchEvent(ev); 
  20.     }  

判断View能不能继续向上滚动,对于sdk14以上版本,v4包里提供了方法:

 
 
  1. public boolean canChildScrollUp() { 
  2.     return ViewCompat.canScrollVertically(mChildView, -1); 
  3.  

其它情况,直接交给子View了,ViewGroup这里也管不着。

4. ViewGroup 的 onTouchEvent 方法

走到这一步,子View的滚动已经交给子View自己去搞了,ViewGroup需要处理的事件只有两个临界状态,也就是用户在下拉可能想要刷新的状态和用户在上拉可能想要加载更多的状态。也就是上面state记录的状态。接下来的事情就简单咯,监听一下ACTION_MOVE和ACTION_UP就好了。

首先在ACTION_DOWN时需要记录下最原先的手指按下的位置 mTouchY,然后在一系列ACTION_MOVE过程中,获取当前位移(ev.getY()-mTouchY),然后通过 某种计算方式 不断计算当前的子View应该位移的距离offsetY,调用mChildView.setTranslationY(offsetY)来不断设置子View的位移,同时需要给HeadLayout申请布局高度来完成顶部控件的显示。这其中笔者使用的计算方式就是插值器(Interpolator)。

在ACTION_UP时,需要判断子View的位移有没有达到进入刷新或者是加载更多状态的要求,即mChildView.getTranslationY() >= mHeadHeight - mTouchSlop,mTouchSlop是为了防止发生抖动而存在。判断进入了刷新状态时,当前子View的位移在HeadHeight和maxHeadHeight之间,所以需要让子View的位移回到HeadHeight处,否则就直接回到0处。

5. Interpolator插值器

Interpolator用于动画中的时间插值,其作用就是把0到1的浮点值变化映射到另一个浮点值变化。上面提到的计算方式如下:

 
 
  1. float offsetY = decelerateInterpolator.getInterpolation(dy / mWaveHeight / 2) * dy / 2; 

其中(dy / mWaveHeight / 2)是一个0~1之间的浮点值,随着下拉高度的增加,这个值越来越大,通过decelerateInterpolator获取到的插值也越来越大,只不过这些值的变化量是越来越小(decelerate效果)。dy表示的是手指移动的距离。这只是笔者为了滑动的柔和性使用的一种计算方式,头部位移的最大距离是mWaveHeight = dy/2,这样看的话可以发现 dy / mWaveHeight / 2 会从0到1变化。Interpolator继承自TimeInterpolator接口,源码如下:

 
 
  1. public interface TimeInterpolator { 
  2.     /** 
  3.      * Maps a value representing the elapsed fraction of an animation to a value that represents 
  4.      * the interpolated fraction. This interpolated value is then multiplied by the change in 
  5.      * value of an animation to derive the animated value at the current elapsed animation time
  6.      * 
  7.      * @param input A value between 0 and 1.0 indicating our current point 
  8.      *        in the animation where 0 represents the start and 1.0 represents 
  9.      *        the end 
  10.      * @return The interpolation value. This value can be more than 1.0 for 
  11.      *         interpolators which overshoot their targets, or less than 0 for 
  12.      *         interpolators that undershoot their targets. 
  13.      */ 
  14.     float getInterpolation(float input); 
  15.  

getInterpolation接收一个0.0~1.0之间的float参数,0.0代表动画的开始,1.0代表动画的结束。返回值则可以超过1.0,也可以小于0.0,比如OvershotInterpolator。所以getInterpolation()是用来实现输入0~1返回0~1左右的函数值的一个函数。 

6. 属性动画

上面说到了手指抬起的时候,mChildView的位移要么回到mHeadHeight处,要么回到0处。直接setTranslationY()不免太不友好,所以我们这里使用属性动画来做。本来是直接可以用mChildView.animate()方法来完成属性动画的,因为需要兼容低版本并回调一些参数,所以这里使用ObjectAnimator:

 
 
  1. private void animChildView(float endValue, long duration) { 
  2.         ObjectAnimator oa = ObjectAnimator.ofFloat(mChildView, "translationY", mChildView.getTranslationY(), endValue); 
  3.         oa.setDuration(duration); 
  4.         oa.setInterpolator(new DecelerateInterpolator());//设置速率为递减 
  5.         oa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
  6.             @Override 
  7.             public void onAnimationUpdate(ValueAnimator animation) { 
  8.                 int height = (int) mChildView.getTranslationY();//获得mChildView当前y的位置 
  9.                 height = Math.abs(height); 
  10.  
  11.                 mHeadLayout.getLayoutParams().height = height; 
  12.                 mHeadLayout.requestLayout(); 
  13.             } 
  14.         }); 
  15.     oa.start(); 
  16.  

传统的补间动画只能够实现移动、缩放、旋转和淡入淡出这四种动画操作,而且它只是改变了View的显示效果,改变了画布绘制出来的样子,而不会真正去改变View的属性。比如用补间动画对一个按钮进行了移动,只有在原位置点击按钮才会发生响应,而属性动画则可以真正的移动按钮。属性动画最简单的一种使用方式就是使用ValueAnimator:

 
 
  1. ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);   
  2. anim.start();  

它可以传入多个参数,如ValueAnimator.ofFloat(0f, 5f, 3f, 10f),他会根据设置的插值器依次计算,比如想做一个心跳的效果,用ValueAnimator来控制心的当前缩放值大小就是个不错的选择。除此之外,还可以调用setStartDelay()方法来设置动画延迟播放的时间,调用setRepeatCount()和setRepeatMode()方法来设置动画循环播放的次数以及循环播放的模式等。

如果想要实现View的位移,ValueAnimator显然是比较麻烦的,我们可以使用ValueAnimator的子类ObjectAnimator,如下:

 
 
  1. ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f, 1f);   
  2. animator.setDuration(5000);   
  3. animator.start();    

传入的第一个值是Object,不局限于View,传入的第二个参数为Object的一个属性,比如传入"abc",ObjectAnimator会去Object里面找有没有 getAbc() 和 setAbc(...) 这两个方法,如果没有,动画就没有效果,它内部应该是处理了相应的异常。另外还可以用AnimatorSet来实现多个属性动画同时播放,也可以在xml中写属性动画。

7. 个性化Header和Footer的接口

要实现个性化的Header和Footer,最最重要的当然是把滑动过程中系数都回调出来啦。在ACTION_MOVE的时候,在ACTION_UP的时候,还有在mChildView在执行属性动画的时候,而且mChildView当前所处的状态都是很明确的,写个接口就好了。

 
 
  1. public interface IHeaderView { 
  2.     View getView(); 
  3.  
  4.     void onPullingDown(float fraction,float maxHeadHeight,float headHeight); 
  5.  
  6.     void onPullReleasing(float fraction,float maxHeadHeight,float headHeight); 
  7.  
  8.     void startAnim(float maxHeadHeight,float headHeight); 
  9.  
  10.     void onFinish(); 
  11.  

getView()方法保证在TwinklingRefreshLayout中可以取到在外部设置的View,onPullingDown()是下拉过程中ACTION_MOVE时的回调方法,onPullReleasing()是下拉状态中ACTION_UP时的回调方法,startAnim()则是正在刷新时回调的方法。其中fraction=mChildView.getTranslationY()/mHeadHeight,fraction=1 时,mChildView的位移恰好是HeadLayout的高度,fraction>1 时则超过了HeadLayout的高度,其最大高度可以到达 mWaveHeight/mHeadHeight。这样我们只需要写一个View来实现这个接口就可以实现个性化了,该有的参数都有了!

8. 实现越界回弹

不能在手指快速滚动到顶部时对越界做出反馈,这是一个继承及ViewGroup的刷新控件的通病。没有继承自具体的列表控件,它没办法获取到列表控件的Scroller,不能获取到列表控件的当前滚动速度,更是不能预知列表控件什么时候能滚动到顶部;同时ViewGroup除了达到临界状态的事件被拦截了,其它事件全都交给了子View去处理。我们能获取到的有关于子View的操作,只有简简单单的手指的触摸事件。so, let's do it!

 
 
  1. mChildView.setOnTouchListener(new OnTouchListener() { 
  2.     @Override 
  3.     public boolean onTouch(View v, MotionEvent event) { 
  4.         return gestureDetector.onTouchEvent(event); 
  5.     } 
  6. });  

我们把在mChildView上的触摸事件交给了一个工具类GestureDetector去处理,它可以辅助检测用户的单击、滑动、长按、双击、快速滑动等行为。我们这里只需要重写onFling()方法并获取到手指在Y方向上的速度velocityY,要是再能及时的发现mChildView滚动到了顶部就可以解决问题了。

 
 
  1. GestureDetector gestureDetector = new GestureDetector(getContext(), new GestureDetector.SimpleOnGestureListener() { 
  2.  
  3.         @Override 
  4.         public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { 
  5.             mVelocityY = velocityY; 
  6.         } 
  7.     });  

此外获取速度还可以用VelocityTracker,比较麻烦一些:

 
 
  1. VelocityTracker tracker = VelocityTracker.obtain(); 
  2. tracker.addMovement(ev); 
  3. //然后在恰当的位置使用如下方法获取速度 
  4. tracker.computeCurrentVelocity(1000); 
  5. mVelocityY = (int)tracker.getYVelocity();  

继续来实现越界回弹。对于RecyclerView、AbsListView,它们提供有OnScrollListener可以获取一下滚动状态:

 
 
  1. if (mChildView instanceof RecyclerView) { 
  2.             ((RecyclerView) mChildView).addOnScrollListener(new RecyclerView.OnScrollListener() { 
  3.                 @Override 
  4.                 public void onScrollStateChanged(RecyclerView recyclerView, int newState) { 
  5.                     if (!isRefreshing && !isLoadingmore && newState == RecyclerView.SCROLL_STATE_IDLE) { 
  6.                         if (mVelocityY >= 5000 && ScrollingUtil.isRecyclerViewToTop((RecyclerView) mChildView)) { 
  7.                             animOverScrollTop(); 
  8.                         } 
  9.                         if (mVelocityY <= -5000 && ScrollingUtil.isRecyclerViewToBottom((RecyclerView) mChildView)) { 
  10.                             animOverScrollBottom(); 
  11.                         } 
  12.                     } 
  13.                     super.onScrollStateChanged(recyclerView, newState); 
  14.                 } 
  15.             }); 
  16.         }  

笔者选取了一个滚动速度的临界值,Y方向的滚动速度大于5000时才允许越界回弹,RecyclerView的OnScrollListener可以让我们获取到滚动状态的改变,滚动到顶部时滚动完成,状态变为SCROLL_STATE_IDLE,执行越界回弹动画。这样的策略也还有一些缺陷,不能获取到mChildView滚动到顶部时的滚动速度,也就不能根据不同的滚动速度来实现更加友好的越界效果。现在的越界高度是固定的,还需要后面进行优化,比如采用加速度来计算,是否可行还待验证。

9. 滚动的延时计算策略

上面的方法对于RecyclerView和AbsListView都好用,对于ScrollView、WebView就头疼了,只能使用延时计算一段时间看有没有到达顶部的方式来判断的策略。延时策略的思想就是通过发送一系列的延时消息从而达到一种渐进式计算的效果,具体来说可以使用Handler或View的postDelayed方法,也可以使用线程的sleep方法。另外提一点,需要不断循环计算一个数值,比如自定义View需要实现根据某个数值变化的动效,最好不要使用Thread + while 循环的方式计算,使用ValueAnimator会是更好的选择。这里笔者选择了Handler的方式。

 
 
  1. @Override 
  2. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { 
  3.     mVelocityY = velocityY; 
  4.     if (!(mChildView instanceof AbsListView || mChildView instanceof RecyclerView)) { 
  5.         //既不是AbsListView也不是RecyclerView,由于这些没有实现OnScrollListener接口,无法回调状态,只能采用延时策略 
  6.         if (Math.abs(mVelocityY) >= 5000) { 
  7.             mHandler.sendEmptyMessage(MSG_START_COMPUTE_SCROLL); 
  8.         } else { 
  9.             cur_delay_times = ALL_DELAY_TIMES; 
  10.         } 
  11.     } 
  12.     return false
  13.  

在滚动速度大于5000的时候发送一个重新计算的消息,Handler收到消息后,延时一段时间继续给自己发送消息,直到时间用完或者mChildView滚动到顶部或者用户又进行了一次Fling动作。

 
 
  1. private Handler mHandler = new Handler() { 
  2.     @Override 
  3.     public void handleMessage(Message msg) { 
  4.         switch (msg.what) { 
  5.             case MSG_START_COMPUTE_SCROLL: 
  6.                 cur_delay_times = -1; //这里没有break,写作-1方便计数 
  7.             case MSG_CONTINUE_COMPUTE_SCROLL: 
  8.                 cur_delay_times++; 
  9.  
  10.                 if (!isRefreshing && !isLoadingmore && mVelocityY >= 5000 && childScrollToTop()) { 
  11.                     animOverScrollTop(); 
  12.                     cur_delay_times = ALL_DELAY_TIMES; 
  13.                 } 
  14.  
  15.                 if (!isRefreshing && !isLoadingmore && mVelocityY <= -5000 && childScrollToBottom()) { 
  16.                     animOverScrollBottom(); 
  17.                     cur_delay_times = ALL_DELAY_TIMES; 
  18.                 } 
  19.  
  20.                 if (cur_delay_times < ALL_DELAY_TIMES) 
  21.                     mHandler.sendEmptyMessageDelayed(MSG_CONTINUE_COMPUTE_SCROLL, 10); 
  22.                 break; 
  23.             case MSG_STOP_COMPUTE_SCROLL: 
  24.                 cur_delay_times = ALL_DELAY_TIMES; 
  25.                 break; 
  26.         } 
  27.     } 
  28. };  

ALL_DELAY_TIMES是最多可以计算的次数,当Handler接收到MSG_START_COMPUTE_SCROLL消息时,如果mChildView没有滚动到边界处,则会在10ms之后向自己发送一条MSG_CONTINUE_COMPUTE_SCROLL的消息,然后继续进行判断。然后在合适的时候越界回弹就好了。

10. 实现个性化Header

这里笔者来演示一下,怎么轻轻松松的做一个个性化的Header,比如新浪微博样式的刷新Header(如下面第1图)。

  1. 创建 SinaRefreshView 继承自 FrameLayout 并实现 IHeaderView 接口
  2. getView()方法中返回this
  3. 在onAttachedToWindow()方法中获取一下需要用到的布局(笔者写到了xml中,也可以直接在代码里面写)
     
       
    1. @Override 
    2. protected void onAttachedToWindow() { 
    3.     super.onAttachedToWindow(); 
    4.  
    5.     if (rootView == null) { 
    6.         rootView = View.inflate(getContext(), R.layout.view_sinaheader, null); 
    7.         refreshArrow = (ImageView) rootView.findViewById(R.id.iv_arrow); 
    8.         refreshTextView = (TextView) rootView.findViewById(R.id.tv); 
    9.         loadingView = (ImageView) rootView.findViewById(R.id.iv_loading); 
    10.         addView(rootView); 
    11.     } 
  4. 实现其它方法
     
       
    1. @Override 
    2. public void onPullingDown(float fraction, float maxHeadHeight, float headHeight) { 
    3.     if (fraction < 1f) refreshTextView.setText(pullDownStr); 
    4.     if (fraction > 1f) refreshTextView.setText(releaseRefreshStr); 
    5.     refreshArrow.setRotation(fraction * headHeight / maxHeadHeight * 180); 
    6.  
    7. @Override 
    8. public void onPullReleasing(float fraction, float maxHeadHeight, float headHeight) { 
    9.     if (fraction < 1f) { 
    10.         refreshTextView.setText(pullDownStr); 
    11.         refreshArrow.setRotation(fraction * headHeight / maxHeadHeight * 180); 
    12.         if (refreshArrow.getVisibility() == GONE) { 
    13.             refreshArrow.setVisibility(VISIBLE); 
    14.             loadingView.setVisibility(GONE); 
    15.         } 
    16.     } 
    17.  
    18. @Override 
    19. public void startAnim(float maxHeadHeight, float headHeight) { 
    20.     refreshTextView.setText(refreshingStr); 
    21.     refreshArrow.setVisibility(GONE); 
    22.     loadingView.setVisibility(VISIBLE); 
  5. 布局文件
     
       
    1. <?xml version="1.0" encoding="utf-8"?> 
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    3.     android:orientation="horizontal" android:layout_width="match_parent" 
    4.     android:layout_height="match_parent" 
    5.     android:gravity="center"
    6.     <ImageView 
    7.         android:id="@+id/iv_arrow" 
    8.         android:layout_width="wrap_content" 
    9.         android:layout_height="wrap_content" 
    10.         android:src="@drawable/ic_arrow"/> 
    11.  
    12.     <ImageView 
    13.         android:id="@+id/iv_loading" 
    14.         android:visibility="gone" 
    15.         android:layout_width="34dp" 
    16.         android:layout_height="34dp" 
    17.         android:src="@drawable/anim_loading_view"/> 
    18.  
    19.     <TextView 
    20.         android:id="@+id/tv" 
    21.         android:layout_width="wrap_content" 
    22.         android:layout_height="wrap_content" 
    23.         android:layout_marginLeft="16dp" 
    24.         android:textSize="16sp" 
    25.         android:text="下拉刷新"/> 
    26. </LinearLayout> 

注意fraction的使用,比如上面的代码 refreshArrow.setRotation(fraction headHeight / maxHeadHeight 180),fraction * headHeight表示当前头部滑动的距离,然后算出它和最大高度的比例,然后乘以180,可以使得在滑动到最大距离时Arrow恰好能旋转180度。startAnim()方法是在onRefresh之后会自动调用的方法。

要想实现如图2所示效果,可以具体查看笔者的开源库TwinklingRefreshLayout。

总结

至此,笔者实现这个刷新控件的所有核心思想都讲完了,其中并没有用到多么高深的技术,只是需要我们多一点耐心,多去调试,不要逃避bug,多挑战一下自己。



作者:lcodecorex
来源:51CTO
目录
相关文章
|
3月前
|
网络安全 Python
我不善言辞,但还是想教你做个没用的东西
一个可以禁用任意程序的上下行网络的小工具,有倒计时功能
|
5月前
|
前端开发 定位技术
百度地图开发如何自定义控件(无敌的解决办法)
百度地图开发如何自定义控件(无敌的解决办法)
56 0
百度地图开发如何自定义控件(无敌的解决办法)
|
5月前
|
SQL 前端开发 JavaScript
终于弄懂了Layui表格重载数据(中途被女朋友劝反附聊天记录)
终于弄懂了Layui表格重载数据(中途被女朋友劝反附聊天记录)
147 0
|
小程序 开发者
如何实现一个好看的金币效果
如图,是我最新上线的游戏【彩虹星球大冒险】中的金币拾取效果,打金币作为这个游戏中的一个非常重要的体验,把金币拾取效果做的好看就显得尤为重要。今天就跟大家分享一个,如何实现一个这样好看的金币拾取效果。 观察一下上面的动图,金币从出现到消失总共是分为两个过程的。 金币从爆炸的物体中向上弹出,并进行旋转下落 玩家碰到金币后,金币放大旋转然后飞到屏幕的左上角记录金币的位置后消失 接下来我们以一个具体的实例,来逐步的实现整个金币效果。
204 0
如何实现一个好看的金币效果
|
小程序
关于游戏背景图的调整,读这篇文章就够了
嗨!大叫好,我是小蚂蚁。最近看有很多问关于游戏背景图的问题,是该选择适应还是选择拉伸?是该适配宽度还是适配高度?不想要背景图去自动适配,想要自定义怎么办?这篇文章就分享一下与调整游戏背景图有关的那些事儿。
106 0
|
前端开发 JavaScript 索引
2022年了!再来手撕一下前端瀑布流代码吧!
**前言: **知识是学不完的,可是我们为什么还是要不停的去学习呢。原因很简单,因为我们要产生更多的知识,让更多的人学不完!前端技术也是在不停的革新,我们要做那个让别人有学不完的知识的人
909 0
2022年了!再来手撕一下前端瀑布流代码吧!
不要挡住我,我要去上面
这一节里,我们要学习精灵层级的管理。概念非常的直观,而且操作起来也很简单。
136 0
不要挡住我,我要去上面
|
存储 API
好好住抓图记录
最近家里正在装修,实在是不知道怎么做,之前看好好住APP上有不少设计的图,部分还挺好看。。就去看了下有没有WEB端,结果还真有,就有了下文,我抓了几万张图片,然后根据关键字进行分类,从里面找心仪的设计。
好好住抓图记录
|
前端开发
实现九宫格布局,你能想到多少种方法?
最近看到一个面试题:实现一个九宫格布局,用尽可能多的方式去实现? 搜了一下牛客面经,腾讯、字节、百度、网易、京东等的面经中都出现过这道题目。所以今天就来实现一下,看有多少种实现方式(下面实现的九宫格布局是自适应页面大小的)
678 0
|
编译器
为何代码没错,却出不来结果,你可能...
为何代码没错,却出不来结果,你可能...
127 0
为何代码没错,却出不来结果,你可能...