前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android ScrollView的顶部下拉和底部上拉回弹效果

Android ScrollView的顶部下拉和底部上拉回弹效果

作者头像
砸漏
发布2020-11-05 15:34:39
2.7K0
发布2020-11-05 15:34:39
举报
文章被收录于专栏:恩蓝脚本恩蓝脚本

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

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

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

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

代码语言:javascript
复制
/**
* 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就可以了。还可以拓展把回弹顶部和底部添加其他的动画效果(之后再拓展试下)。

代码语言:javascript
复制
<?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参数,同样设置回弹结束(或开始)监听。

代码语言:javascript
复制
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();
}
});
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档