devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

自定义 View 之富有弹性的 NestedScrollView_vue 仿 nestedscrollview 原理

作者：盐析白兔 | 2024-06-16 03:17:42

赞

踩

vue 仿 nestedscrollview 原理

博主声明：

转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 威威喵 原创，请多支持与指教。

本文首发于此   博主：威威喵  |  博客主页：https://blog.csdn.net/smile_running

    首先简单的介绍一下 NestedScrollView 这个控件，它是继承自 FrameLayout 的一个可以滚动视图的控件，其位置是在我们的 support v4 包下面，其使用的方式也异常简单，但是它规定 NestedScrollView 内部只能包含一个 View，通常来说，我们都是包含着一个 LinearLayout 或者其他父容器，这样才能存放更多的子 View 

    介绍了一下 NestedScrollView 的相关知识点，它和 ScrollView 的使用方式一模一样。但是呢，我们在应用当中可能存在这样的需求，就是让我们的滚动视图富有一定的弹性动画效果，有点类似于 QQ 列表中那种弹性的效果，我们给 NestedScrollView 添加了一定的弹性动画之后，用户体验明显就增加了。

    接下来，我们来看看要实现的一个 NestedScrollView 的弹性效果

    其最终效果就是这个样子了，其中那个粉红色的背景是 LinearLayout，内容存放着两个 TextView 用于测试，这部分代码没什么好介绍的，如下

  1.    <nd.no.xww.qqmessagedragview.ElasticScrollView
  2.         android:layout_width="match_parent"
  3.         android:layout_height="match_parent">
  4.  
  5.         <LinearLayout
  6.             android:background="#ffccff"
  7.             android:layout_width="match_parent"
  8.             android:layout_height="wrap_content"
  9.             android:layout_margin="16dp"
  10.             android:orientation="vertical">
  11.  
  12.             <TextView
  13.                 android:layout_width="match_parent"
  14.                 android:layout_height="1000dp"
  15.                 android:gravity="center"
  16.                 android:text="@string/app_name"
  17.                 android:textColor="#ffffff" />
  18.  
  19.             <TextView
  20.                 android:layout_width="match_parent"
  21.                 android:layout_height="1000dp"
  22.                 android:gravity="center"
  23.                 android:text="@string/app_name"
  24.                 android:textColor="#ffffff" />
  25.         </LinearLayout>
  26.     </nd.no.xww.qqmessagedragview.ElasticScrollView>

    接下来，我们看如何去实现它的动画效果。首先，我们的 View 是一个可以滚动的视图，直接继承现有的 NestedScrollView 即可，然后给它添加一下弹性的动画就好了。

    因为 NestedScrollView 内部只能有一个直接的子 View，所以要想让里面的内容可以拖动的话，我们需要获取这个 View，代码如下：

  1.     @Override
  2.     protected void onFinishInflate() {
  3.         super.onFinishInflate();
  4.         //获取的就是 scrollview 的第一个子 View
  5.         if (getChildCount() > 0) {
  6.             mInnerView = getChildAt(0);
  7.         }
  8.     }

    接下来是一个滑动的监听情况，有两种可能。第一种是：NestedScrollView 移动到了顶部 top 处，这时候可以继续拖动，内容位置也会随着改变，当手指松开的刹那，我们拿到它原来的坐标和拖动的距离进行比较，将它还原回去即可，期间可以开启动画效果，设置一个插值器，效果更佳。

    还有第二种可能，就是 NestedScrollView 移动到了底部 bottom 处，其处理方式与上面一致，我就不再重复了。当然，还有就是正常情况下，既不是顶部、也不是底部，那就不去处理，正常来就好了。

    这里判断是否在 top 或 bottom 处，需要根据子 View( LinearLayout) 的宽度减去控件的宽度，如果有 margin 的话，还有减去 margin 的大小，代码如下：

  1.    @Override
  2.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  3.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  4.  
  5.         mWidth = MeasureSpec.getSize(widthMeasureSpec);
  6.         mHeight = MeasureSpec.getSize(heightMeasureSpec);
  7.  
  8.         MarginLayoutParams lp = (MarginLayoutParams) mInnerView.getLayoutParams();
  9.         //减去 margin 的值
  10.         offset = mInnerView.getMeasuredHeight() - lp.topMargin - lp.bottomMargin - mHeight;
  11.     }

    判断是否处于 top 或 bottom 代码

  1.     // 判断是否处于顶部或者底部
  2.     public boolean isNeedMove() {
  3.         // 0是顶部，offset是底部
  4.         if (getScrollY() == 0 || getScrollY() >= offset) {
  5.             return true;
  6.         }
  7.         return false;
  8.     }

    最后，根据我们的触摸事件拿到的偏移量，开启动画即可

  1.     public void translateAnimator() {
  2.         TranslateAnimation animation = new TranslateAnimation(0, 0, mInnerView.getTop(), mRect.top);
  3.         animation.setDuration(500);
  4.         animation.setInterpolator(new AnticipateInterpolator(3f));
  5.         mInnerView.startAnimation(animation);
  6.         // 设置回到正常的布局位置
  7.         mInnerView.layout(mRect.left, mRect.top, mRect.right, mRect.bottom);
  8.         mRect.setEmpty();
  9.     }

    下面是完整的代码，运行一下就会看到上面动态图的效果。

  1. package nd.no.xww.qqmessagedragview;
  2.  
  3. import android.content.Context;
  4. import android.graphics.Rect;
  5. import android.support.annotation.NonNull;
  6. import android.support.annotation.Nullable;
  7. import android.support.v4.widget.NestedScrollView;
  8. import android.util.AttributeSet;
  9. import android.view.MotionEvent;
  10. import android.view.View;
  11. import android.view.animation.AnticipateInterpolator;
  12. import android.view.animation.TranslateAnimation;
  13.  
  14. /**
  15.  * @author xww
  16.  * @desciption : 一个具有弹性的 NestedScrollView
  17.  * @date 2019/8/4
  18.  * @time 22:00
  19.  * 博主：威威喵
  20.  * 博客：https://blog.csdn.net/smile_Running
  21.  */
  22. public class ElasticScrollView extends NestedScrollView {
  23.  
  24.     private View mInnerView;// 孩子View
  25.  
  26.     private float mDownY;// 点击时y坐标
  27.  
  28.     private Rect mRect = new Rect();
  29.     private int offset;
  30.  
  31.     private boolean isCount = false;// 是否开始计算
  32.  
  33.     private int mWidth;
  34.     private int mHeight;
  35.  
  36.     public ElasticScrollView(@NonNull Context context) {
  37.         this(context, null);
  38.     }
  39.  
  40.     public ElasticScrollView(@NonNull Context context, @Nullable AttributeSet attrs) {
  41.         this(context, attrs, 0);
  42.     }
  43.  
  44.     public ElasticScrollView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  45.         super(context, attrs, defStyleAttr);
  46.     }
  47.  
  48.     @Override
  49.     protected void onFinishInflate() {
  50.         super.onFinishInflate();
  51.         //获取的就是 scrollview 的第一个子 View
  52.         if (getChildCount() > 0) {
  53.             mInnerView = getChildAt(0);
  54.         }
  55.     }
  56.  
  57.     @Override
  58.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  59.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  60.  
  61.         mWidth = MeasureSpec.getSize(widthMeasureSpec);
  62.         mHeight = MeasureSpec.getSize(heightMeasureSpec);
  63.  
  64.         MarginLayoutParams lp = (MarginLayoutParams) mInnerView.getLayoutParams();
  65.         //减去 margin 的值
  66.         offset = mInnerView.getMeasuredHeight() - lp.topMargin - lp.bottomMargin - mHeight;
  67.     }
  68.  
  69.     @Override
  70.     public boolean onTouchEvent(MotionEvent e) {
  71.         if (mInnerView != null) {
  72.             commOnTouchEvent(e);
  73.         }
  74.         return super.onTouchEvent(e);
  75.     }
  76.  
  77.     public void commOnTouchEvent(MotionEvent e) {
  78.         switch (e.getAction()) {
  79.             case MotionEvent.ACTION_DOWN:
  80.                 break;
  81.             case MotionEvent.ACTION_MOVE:
  82.                 final float preY = mDownY;// 按下时的y坐标
  83.                 float nowY = e.getY();// 时时y坐标
  84.                 int deltaY = (int) (preY - nowY);// 滑动距离
  85.                 //排除出第一次移动计算无法得知y坐标
  86.                 if (!isCount) {
  87.                     deltaY = 0;
  88.                 }
  89.  
  90.                 mDownY = nowY;
  91.                 // 当滚动到最上或者最下时就不会再滚动，这时移动布局
  92.                 if (isNeedMove()) {
  93.                     if (mRect.isEmpty()) {
  94.                         // 保存正常的布局位置
  95.                         mRect.set(mInnerView.getLeft(), mInnerView.getTop(),
  96.                                 mInnerView.getRight(), mInnerView.getBottom());
  97.                     }
  98.                     // 移动布局
  99.                     mInnerView.layout(mInnerView.getLeft(), mInnerView.getTop() - deltaY / 2,
  100.                             mInnerView.getRight(), mInnerView.getBottom() - deltaY / 2);
  101.                 }
  102.                 isCount = true;
  103.                 break;
  104.             case MotionEvent.ACTION_UP:
  105.                 if (isNeedAnimation()) {
  106.                     translateAnimator();
  107.                     isCount = false;
  108.                 }
  109.                 break;
  110.         }
  111.     }
  112.  
  113.     public void translateAnimator() {
  114.         TranslateAnimation animation = new TranslateAnimation(0, 0, mInnerView.getTop(), mRect.top);
  115.         animation.setDuration(500);
  116.         animation.setInterpolator(new AnticipateInterpolator(3f));
  117.         mInnerView.startAnimation(animation);
  118.         // 设置回到正常的布局位置
  119.         mInnerView.layout(mRect.left, mRect.top, mRect.right, mRect.bottom);
  120.         mRect.setEmpty();
  121.     }
  122.  
  123.     // 是否需要开启动画
  124.     public boolean isNeedAnimation() {
  125.         return !mRect.isEmpty();
  126.     }
  127.  
  128.     // 判断是否处于顶部或者底部
  129.     public boolean isNeedMove() {
  130.         // 0是顶部，offset是底部
  131.         if (getScrollY() == 0 || getScrollY() >= offset) {
  132.             return true;
  133.         }
  134.         return false;
  135.     }
  136.  
  137. }

    代码不难理解，我刚开始并没有注意这个 Margin 的值，导致的情况可能会在底部的时候，无法继续向上拉，也就是底部没有弹性效果，所以要在测量时把 margin 也处理一下就能解决问题了。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号