自定义 View 之富有弹性的 NestedScrollView

最新推荐文章于 2024-09-06 22:59:52 发布

威威貓

最新推荐文章于 2024-09-06 22:59:52 发布

阅读量1.1w

点赞数 10

分类专栏： # 自定义View Android 文章标签： NestedScrollView 弹性十足

本文链接：https://blog.csdn.net/smile_Running/article/details/81513483

版权

Android 同时被 2 个专栏收录

70 篇文章 16 订阅

订阅专栏

自定义View

29 篇文章 7 订阅

订阅专栏

博主声明：

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

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

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

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

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

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

   <nd.no.xww.qqmessagedragview.ElasticScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:background="#ffccff"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1000dp"
                android:gravity="center"
                android:text="@string/app_name"
                android:textColor="#ffffff" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1000dp"
                android:gravity="center"
                android:text="@string/app_name"
                android:textColor="#ffffff" />
        </LinearLayout>
    </nd.no.xww.qqmessagedragview.ElasticScrollView>

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

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

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        //获取的就是 scrollview 的第一个子 View
        if (getChildCount() > 0) {
            mInnerView = getChildAt(0);
        }
    }

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

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

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

   @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);

        MarginLayoutParams lp = (MarginLayoutParams) mInnerView.getLayoutParams();
        //减去 margin 的值
        offset = mInnerView.getMeasuredHeight() - lp.topMargin - lp.bottomMargin - mHeight;
    }

判断是否处于 top 或 bottom 代码

    // 判断是否处于顶部或者底部
    public boolean isNeedMove() {
        // 0是顶部，offset是底部
        if (getScrollY() == 0 || getScrollY() >= offset) {
            return true;
        }
        return false;
    }

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

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

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

package nd.no.xww.qqmessagedragview;

import android.content.Context;
import android.graphics.Rect;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.widget.NestedScrollView;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.TranslateAnimation;

/**
 * @author xww
 * @desciption : 一个具有弹性的 NestedScrollView
 * @date 2019/8/4
 * @time 22:00
 * 博主：威威喵
 * 博客：https://blog.csdn.net/smile_Running
 */
public class ElasticScrollView extends NestedScrollView {

    private View mInnerView;// 孩子View

    private float mDownY;// 点击时y坐标

    private Rect mRect = new Rect();
    private int offset;

    private boolean isCount = false;// 是否开始计算

    private int mWidth;
    private int mHeight;

    public ElasticScrollView(@NonNull Context context) {
        this(context, null);
    }

    public ElasticScrollView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ElasticScrollView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        //获取的就是 scrollview 的第一个子 View
        if (getChildCount() > 0) {
            mInnerView = getChildAt(0);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);

        MarginLayoutParams lp = (MarginLayoutParams) mInnerView.getLayoutParams();
        //减去 margin 的值
        offset = mInnerView.getMeasuredHeight() - lp.topMargin - lp.bottomMargin - mHeight;
    }

    @Override
    public boolean onTouchEvent(MotionEvent e) {
        if (mInnerView != null) {
            commOnTouchEvent(e);
        }
        return super.onTouchEvent(e);
    }

    public void commOnTouchEvent(MotionEvent e) {
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
                final float preY = mDownY;// 按下时的y坐标
                float nowY = e.getY();// 时时y坐标
                int deltaY = (int) (preY - nowY);// 滑动距离
                //排除出第一次移动计算无法得知y坐标
                if (!isCount) {
                    deltaY = 0;
                }

                mDownY = nowY;
                // 当滚动到最上或者最下时就不会再滚动，这时移动布局
                if (isNeedMove()) {
                    if (mRect.isEmpty()) {
                        // 保存正常的布局位置
                        mRect.set(mInnerView.getLeft(), mInnerView.getTop(),
                                mInnerView.getRight(), mInnerView.getBottom());
                    }
                    // 移动布局
                    mInnerView.layout(mInnerView.getLeft(), mInnerView.getTop() - deltaY / 2,
                            mInnerView.getRight(), mInnerView.getBottom() - deltaY / 2);
                }
                isCount = true;
                break;
            case MotionEvent.ACTION_UP:
                if (isNeedAnimation()) {
                    translateAnimator();
                    isCount = false;
                }
                break;
        }
    }

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

    // 是否需要开启动画
    public boolean isNeedAnimation() {
        return !mRect.isEmpty();
    }

    // 判断是否处于顶部或者底部
    public boolean isNeedMove() {
        // 0是顶部，offset是底部
        if (getScrollY() == 0 || getScrollY() >= offset) {
            return true;
        }
        return false;
    }

}

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