android仿QQ下拉回弹效果

最新推荐文章于 2024-04-29 23:58:13 发布

itchenlin

最新推荐文章于 2024-04-29 23:58:13 发布

阅读量1.2k

点赞数

分类专栏：经典例子

经典例子专栏收录该内容

35 篇文章

订阅专栏

本文将介绍如何在Android应用中实现类似QQ的ScrollView，通过在ScrollView中添加手势响应事件，使得用户在滑动顶部时触发动画效果，从而提升用户体验。包括获取初始和末尾触摸位置，计算滑动偏移量，以及判断是否需要开启动画或移动布局。

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

最近在做android页面总觉得QQ的scrollView还是比较好的。下拉到顶部的时候，往上拉了一点然后添了点动画这种感觉能够增加用户体验的感觉。因此觉得想着来实现一下。看一下QQ里面的效果。

闲话少说，动手干吧。百度搜了一下，感觉还是比较晕，因为比较散，不过大概得到两到思路。一个offsetTopAndBottom这个方法。另一个就是重写ScrollView。按照道理来讲，两种都可以实现，但是我选择了第二种。这时候去看看ScrollView 的源码了。首先要清楚的是ViewGoup提供了屏幕触控的方法onTouchEvent。当我手触摸屏幕往下滑时这时候应该记录初始位置，当手离开屏幕时记录末尾位置。这样做主要是为了计算滑动顶部是布局的偏移量的多少。

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;

public class MainScrollView extends ScrollView {


	private View inner;
	private float y;
	private Rect normal = new Rect();
	private static final int size = 3;

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

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

	/**
	 * 获得第一个view
	 */
	@Override
	protected void onFinishInflate() {
		if (getChildCount() > 0) {
			inner = getChildAt(0);
		}
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		if (inner == null) {
			return super.onTouchEvent(ev);
		} else {
			commOnTouchEvent(ev);
		}
		return super.onTouchEvent(ev);
	}

	/**
	 * 添加手势响应事件
	 * @param ev
	 */
	public void commOnTouchEvent(MotionEvent ev) {
		int action = ev.getAction();
		switch (action) {
		case MotionEvent.ACTION_DOWN:
			y = ev.getY();
			break;
		case MotionEvent.ACTION_UP:
			if (isNeedAnimation()) {
				animation();
			}
			break;
		case MotionEvent.ACTION_MOVE:
			final float preY = y;
			float nowY = ev.getY();
			int deltaY = (int) (preY - nowY) / size;
			y = nowY;
			// 当滚动到最上或者最下时就不会再滚动，这时移动布局
			if (isNeedMove()) {
				if (normal.isEmpty()) {
					// 保存正常的布局位置
					normal.set(inner.getLeft(), inner.getTop(),
							inner.getRight(), inner.getBottom());
					return;
				}
				//这里移动布局
				inner.layout(inner.getLeft(), inner.getTop() - deltaY, inner.getRight(),
						inner.getBottom() - deltaY);
			}
			break;
		}
	}

	// 开启动画移动
	public void animation() {
		// 开启移动动画
		TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop()	- normal.top, 0);
		ta.setDuration(200);
		inner.startAnimation(ta);
		// 设置回到正常的布局位置
		inner.layout(normal.left, normal.top, normal.right, normal.bottom);
		normal.setEmpty();
	}

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

	// 是否需要移动布局
	public boolean isNeedMove() {
		int offset = inner.getMeasuredHeight() - getHeight();
		int scrollY = getScrollY();
		if (scrollY == 0 || scrollY == offset) {
			return true;
		}
		return false;
	}

}<strong>
</strong>