【一个上下拉且松手回弹的自定义ScrollView】

本文介绍了如何创建一个SpringBackScrollView,它允许用户下拉到顶部继续滑动并实现下拉刷新和上拉加载效果。通过自定义控件和监听器,实现了类似QQ设置界面的布局效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


普通的scrollView下拉到顶部时就不动了,而如qq设置界面中的布局,下拉到顶端时还能下拉一段距离。本文介绍一个自定义scrollView就可以实现这样的效果。 下拉刷新,上拉加载,松手弹性恢复
效果演示

SpringBackScrollView

首先,自定义SpringBackScrollView控件。

SpringBackScrollView.java文件:

package com.example.javaprojecttest;

import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;

/**
 * 一个能持续下拉/上拉,松手回弹的ScrollView
 */
public class SpringBackScrollView extends ScrollView {

    // 移动因子, 是一个百分比, 比如手指移动了100px, 那么View就只移动50px
    // 目的是达到一个延迟的效果
    private static final float MOVE_FACTOR = 0.5f;
    // 松开手指后, 界面回到正常位置需要的动画时间
    private static final int ANIM_TIME = 300;
    // ScrollView的子View, 也是ScrollView的唯一一个子View
    private View contentView;
    // 手指按下时的Y值, 用于在移动时计算移动距离
    // 如果按下时不能上拉和下拉, 会在手指移动时更新为当前手指的Y值
    private float startY;
    float nowY;
    int deltaY;
    // 用于记录正常的布局位置
    private Rect originalRect = new Rect();
    // 手指按下时记录是否可以继续下拉
    private boolean canPullDown = false;
    // 手指按下时记录是否可以继续上拉
    private boolean canPullUp = false;
    // 在手指滑动的过程中记录是否移动了布局
    private boolean isMoved = false;

    // 给外界回调下拉刷新、上拉加载的接口
    private IPullRefreshListener mPullRefreshListener;

    public SpringBackScrollView(Context context) {
        super(context);
    }

    public SpringBackScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SpringBackScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr, defStyleAttr);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (getChildCount() > 0) {
            contentView = getChildAt(0);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (contentView == null)
            return;
        // ScrollView中的唯一子控件的位置信息, 这个位置信息在整个控件的生命周期中保持不变
        originalRect.set(contentView.getLeft(), contentView.getTop(),
                contentView.getRight(), contentView.getBottom());
    }

    /**
     * 在触摸事件中, 处理上拉和下拉的逻辑
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (contentView == null) {
            return super.dispatchTouchEvent(ev);
        }
        // 手指是否移动到了当前ScrollView控件之外
        boolean isTouchOutOfScrollView = ev.getY() >= this.getHeight()
                || ev.getY() <= 0;
        if (isTouchOutOfScrollView) { // 如果移动到了当前ScrollView控件之外
            if (isMoved) // 如果当前contentView已经被移动, 首先把布局移到原位置, 然后消费点这个事件
                boundBack();
            return true;
        }
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                // 判断是否可以上拉和下拉
                canPullDown = isCanPullDown();
                canPullUp = isCanPullUp();
                // 记录按下时的Y值
                startY = ev.getY();
                break;
            case MotionEvent.ACTION_UP:
                boundBack();
                break;
            case MotionEvent.ACTION_MOVE:
                // 在移动的过程中, 既没有滚动到可以上拉的程度, 也没有滚动到可以下拉的程度
                if (!canPullDown && !canPullUp) {
                    startY = ev.getY();
                    canPullDown = isCanPullDown();
                    canPullUp = isCanPullUp();
                    break;
                }
                // 计算手指移动的距离
                nowY = ev.getY();
                deltaY = (int) (nowY - startY);
                // 是否应该移动布局
                boolean shouldMove = (canPullDown && deltaY > 0) // 可以下拉, 并且手指向下移动
                        || (canPullUp && deltaY < 0) // 可以上拉, 并且手指向上移动
                        || (canPullUp && canPullDown); // 既可以上拉也可以下拉(这种情况出现在ScrollView包裹的控件比ScrollView还小)
                if (shouldMove) {
                    // 计算偏移量
                    int offset = (int) (deltaY * MOVE_FACTOR);
                    // 随着手指的移动而移动布局
                    contentView.layout(originalRect.left,
                            originalRect.top + offset, originalRect.right,
                            originalRect.bottom + offset);
                    isMoved = true; // 记录移动了布局
                }
                break;
            default:

                break;
        }
        return super.dispatchTouchEvent(ev);
    }

    /**
     * 将内容布局移动到原位置 可以在UP事件中调用, 也可以在其他需要的地方调用, 如手指移动到当前ScrollView外时
     */
    private void boundBack() {
        if (!isMoved)
            return; // 如果没有移动布局, 则跳过执行
        // 开启动画
        TranslateAnimation anim = new TranslateAnimation(0, 0,
                contentView.getTop(), originalRect.top);
        anim.setDuration(ANIM_TIME);
        contentView.startAnimation(anim);
        // 设置回到正常的布局位置
        contentView.layout(originalRect.left, originalRect.top,
                originalRect.right, originalRect.bottom);
        // 将标志位设回false
        canPullDown = false;
        canPullUp = false;
        isMoved = false;

        // deltaY>0是下拉;deltaY<0是上拉
        if (deltaY > 0 && mPullRefreshListener != null) {
            mPullRefreshListener.onRefresh();
        }

        if (deltaY < 0 && mPullRefreshListener != null) {
            mPullRefreshListener.onLoadMore();
        }
    }

    /**
     * 判断是否滚动到顶部
     */
    private boolean isCanPullDown() {
        return getScrollY() == 0
                || contentView.getHeight() > getHeight() + getScrollY();
    }


    /**
     * 判断是否滚动到底部
     */
    private boolean isCanPullUp() {
        return contentView.getHeight() <= getHeight() + getScrollY();
    }


    public void setListViewListener(IPullRefreshListener mListViewListener) {
        this.mPullRefreshListener = mListViewListener;
    }

    public interface IPullRefreshListener {
        public void onRefresh();
        public void onLoadMore();
    }
}

使用时,先把这个文件复制到工程中。然后在自己的布局文件中使用该控件。注意加上完整包名。

举例使用

activity_main.xml

<com.example.javaprojecttest.SpringBackScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="20dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="@string/hello_world"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="20dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="@string/hello_world"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="20dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="@string/hello_world"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="20dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="@string/hello_world"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="20dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="@string/hello_world"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </LinearLayout>
</com.example.javaprojecttest.SpringBackScrollView>

MainActivity.java文件

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;

public class MainActivity extends AppCompatActivity {

    private SpringBackScrollView mScrollView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mScrollView = (SpringBackScrollView)findViewById(R.id.main_scroll);
        mScrollView.setListViewListener(new SpringBackScrollView.IPullRefreshListener() {
            @Override
            public void onRefresh() {
                Log.i("MainActivity", "onRefresh: ");
            }

            @Override
            public void onLoadMore() {
                Log.i("MainActivity", "onLoadMore: ");
            }
        });
    }
}

运行效果

下拉前

下拉前

下拉后

下拉后

上拉

上拉

结束。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

子林Android

感谢老板,老板大气!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值