要实现ScrollView的回弹效果,需要对其进行触摸事件处理。先来看一下简单的效果:

根据Android的View事件分发处理机制,下面对dispatchTouchEvent进行详细分析:

在加载布局完成之后,获取ScrollView的第一个子元素,保存它的参数,left top right bottom参数,根据顶部下拉操作和底部上拉操作进行子View的布局参数根据滑动距离改变,ACTION_UP的时候判断是否存在回弹,如果需要则进行动画回弹到原来的位置,可以添加一个回弹结束监听,比如监听回弹处理跳转到其他的页面的操作等。

具体的实现如下,添加了是否禁用顶部和底部回弹的参数设置,以及回弹效果结束监听。

/**
* A Simple Rebound ScrollView
* @author Denluoyia
*/
public class ReboundScrollView extends ScrollView{ private boolean mEnableTopRebound = true;
private boolean mEnableBottomRebound = true;
private OnReboundEndListener mOnReboundEndListener;
private View mContentView;
private Rect mRect = new Rect(); public ReboundScrollView(Context context) {
super(context);
} public ReboundScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
} public ReboundScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
} /** after inflating view, we can get the width and height of view */
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mContentView = getChildAt(0);
} @Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if (mContentView == null) return;
// to remember the location of mContentView
mRect.set(mContentView.getLeft(), mContentView.getTop(), mContentView.getRight(), mContentView.getBottom());
} public ReboundScrollView setOnReboundEndListener(OnReboundEndListener onReboundEndListener){
this.mOnReboundEndListener = onReboundEndListener;
return this; } public ReboundScrollView setEnableTopRebound(boolean enableTopRebound){
this.mEnableTopRebound = enableTopRebound;
return this;
} public ReboundScrollView setEnableBottomRebound(boolean mEnableBottomRebound){
this.mEnableBottomRebound = mEnableBottomRebound;
return this;
} private int lastY;
private boolean rebound = false;
private int reboundDirection = 0; //<0 表示下部回弹 >0 表示上部回弹 0表示不回弹 @Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (mContentView == null){
return super.dispatchTouchEvent(ev);
}
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
lastY = (int) ev.getY();
break; case MotionEvent.ACTION_MOVE:
if (!isScrollToTop() && !isScrollToBottom()){
lastY = (int) ev.getY();
break;
}
//处于顶部或者底部
int deltaY = (int) (ev.getY() - lastY);
//deltaY > 0 下拉 deltaY < 0 上拉 //disable top or bottom rebound
if ((!mEnableTopRebound && deltaY > 0) || (!mEnableBottomRebound && deltaY < 0)){
break;
} int offset = (int) (deltaY * 0.48);
mContentView.layout(mRect.left, mRect.top + offset, mRect.right, mRect.bottom + offset);
rebound = true;
break; case MotionEvent.ACTION_UP:
if (!rebound) break;
reboundDirection = mContentView.getTop() - mRect.top;
TranslateAnimation animation = new TranslateAnimation(0, 0, mContentView.getTop(), mRect.top);
animation.setDuration(300);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) { } @Override
public void onAnimationEnd(Animation animation) {
if (mOnReboundEndListener != null){
if (reboundDirection > 0){
mOnReboundEndListener.onReboundTopComplete();
}
if (reboundDirection < 0){
mOnReboundEndListener.onReboundBottomComplete();
}
reboundDirection = 0;
}
} @Override
public void onAnimationRepeat(Animation animation) { }
});
mContentView.startAnimation(animation);
mContentView.layout(mRect.left, mRect.top, mRect.right, mRect.bottom);
rebound = false;
break;
}
return super.dispatchTouchEvent(ev);
} @Override
public void setFillViewport(boolean fillViewport) {
super.setFillViewport(true); //默认是填充ScrollView 或者再XML布局文件中设置fillViewport属性
} /**
* 判断当前ScrollView是否处于顶部
*/
private boolean isScrollToTop(){
return getScrollY() == 0;
} /**
* 判断当前ScrollView是否已滑到底部
*/
private boolean isScrollToBottom(){
return mContentView.getHeight() <= getHeight() + getScrollY();
} /**
* listener for top and bottom rebound
* do your implement in the following methods
*/
public interface OnReboundEndListener{ void onReboundTopComplete(); void onReboundBottomComplete();
}
}

使用:

直接在XML布局文件中把ScrollView替换成ReboundScrollView就可以了。还可以拓展把回弹顶部和底部添加其他的动画效果(之后再拓展试下)。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".TestActivity"> <com.denluoyia.dtils.widget.ReboundScrollView
android:id="@+id/reboundScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eefade"
android:padding="16dp"> <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="15sp"
android:lineSpacingExtra="5dp"
android:text="@string/content"/>
</LinearLayout>
</com.denluoyia.dtils.widget.ReboundScrollView> </LinearLayout>

如果需要禁用回弹,可以直接设置enableTopRebound和enableBottomRebound参数,同样设置回弹结束(或开始)监听。

public class TestActivity extends AppCompatActivity {

    private ReboundScrollView reboundScrollView;

    @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test); reboundScrollView = findViewById(R.id.reboundScrollView);
//reboundScrollView.setEnableTopRebound(false);
//reboundScrollView.setEnableBottomRebound(false);
reboundScrollView.setOnReboundEndListener(new ReboundScrollView.OnReboundEndListener() {
@Override
public void onReboundTopComplete() {
Toast.makeText(TestActivity.this, "顶部回弹", Toast.LENGTH_SHORT).show();
} @Override
public void onReboundBottomComplete() {
Toast.makeText(TestActivity.this, "底部回弹", Toast.LENGTH_SHORT).show();
}
});
}
}

ScrollView的顶部下拉和底部上拉回弹效果的更多相关文章

  1. 微信小程序开发之 下拉刷新,上拉加载更多

    本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面 大致如此的界面吧. 这个Demo使用了微信的几个Api和事件,我先列出来. 1.wx.request (获取远程服务器的数据, ...

  2. ListView下拉刷新及上拉更多两种状态

    一.前言: 很多应用都会用到ListView,当然如果是iOS就会用UITableViewController,这两个控件在不同的OS上,功能是一样的,只是有些细微的不同(iOS的UITableVie ...

  3. Taro下拉刷新,上拉加载更多

    1.引入插件 import Taro, { Component } from '@tarojs/taro' import { View, Text, ScrollView } from '@taroj ...

  4. react + iscroll5 实现完美 下拉刷新,上拉加载

    经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插件开发的组件.但是开发过程中,发现 ...

  5. Android打造(ListView、GridView等)通用的下拉刷新、上拉自动加载的组件

    原文 http://blog.csdn.net/bboyfeiyu/article/details/39253051       前言 下 拉刷新组件在开发中使用率是非常高的,基本上联网的APP都会采 ...

  6. DCloud-MUI:下拉刷新、上拉加载

    ylbtech-DCloud-MUI:下拉刷新.上拉加载 1. 下拉刷新返回顶部 0. http://dev.dcloud.net.cn/mui/pulldown/ 1. 概述 为实现下拉刷新功能,大 ...

  7. 【Android - 自定义View】之自定义可下拉刷新或上拉加载的ListView

    首先来介绍一下这个自定义View: (1)这个自定义View的名称叫做 RefreshableListView ,继承自ListView类: (2)在这个自定义View中,用户可以设置是否支持下拉刷新 ...

  8. vue移动端下拉刷新、上拉加载

    由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...

  9. iOS MJRefresh下拉刷新(上拉加载)使用详解

    下拉刷新控件目前比较火的有好几种,本人用过MJRefresh 和 SVPullToRefresh,相对而言,前者比后者可定制化.拓展新都更高一点. 因此本文着重讲一下MJRefresh的简单用法. 导 ...

随机推荐

  1. Sql Server服务远程过程调用失败

    由于开发系统,需要vs版本统一,于是经过了昨天一整天艰苦卓绝的斗争,小编终于成功的写在了13版本的vs,重新装上了12版本的vs,本来想着,12版本的vs搭建成功了,就赶快搭建框架,然后敲例子,可是天 ...

  2. Android初级教程三个Dialog对话框小案例

    这里把三个对话框形式写在一个项目程序里面,用三个按钮控制显示什么样式的对话框. 先看布局文件代码: <LinearLayout xmlns:android="http://schema ...

  3. SQL join 语句 画图果然更容易理解

    我认为 Ligaya Turmelle 的关于SQL联合(join)语句的帖子对于新手开发者来说是份很好的材料.SQL 联合语句好像是基于集合的,用韦恩图来解释咋一看是很自然而然的.不过正如在她的帖子 ...

  4. ubuntu16.04中可以用于教学的有趣的应用

    ubuntu16.04中可以用于教学的有趣的应用 在ubuntu自带的软件中心里,内置了非常丰富的教育应用,可以用于物理,化学等科学课教学,只选取我用过用于教学的软件,优秀的软件不止这些,可以慢慢发掘 ...

  5. 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

    方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...

  6. 菜鸟玩云计算之十四:克隆虚拟机及ssh登录的问题

    菜鸟玩云计算之十四:克隆虚拟机及ssh登录的问题 今天早上,我的Ubuntu12.04.3LTS Desktop提示升级,升级. 从vm-ubuntu12.04克隆出虚拟机vm-thrift: $ s ...

  7. 视音频编解码学习工程:TS封装格式分析器

    =====================================================视音频编解码学习工程系列文章列表: 视音频编解码学习工程:H.264分析器 视音频编解码学习工 ...

  8. python的list

    1.定义list >>> li = ["a", "b", "mpilgrim", "z", " ...

  9. Makefile学习(三)[第二版]

    make常用内嵌函数 1.函数调用 $(function arguments) #$引用的结果就是函数生成的结果 2.Makefile下常用的函数 1)$(wildcard PATTERN) #匹配当 ...

  10. AP INVOICES IMPORT API(NOT request)

    PROCEDURE process_cux_to_ap(x_return_status OUT NOCOPY VARCHAR2, x_msg_count OUT NOCOPY NUMBER, x_ms ...