Scroller的使用详解二(侧滑删除按钮的实现)

来源：互联网发布：c gui qt 4编程源码编辑：程序博客网时间：2024/06/05 08:48

更对分享：http://www.cherylgood.cn

我们在前面Scroller的使用详解一中学习了Scroller的基本使用，当时的demo的滚动是跳跃式的，并没有实现我们预期中的平滑滚动，在接下来的内容中，我们将通过一个侧滑删除按钮的demo来继续学习Scroller的相关知识。
没图啥也不用说，先上图吧！

2017-04-18 13_07_58.gif

Scroller的使用主要可以分为以下几个步骤：
1. 创建Scroller实例
2. 调用Scroller对象的startScroll()方法来初始化滚动数据并
  调用invalidate方法刷新界面
3. 重写computeScroll()方法，并在其内部完成平滑滚动的逻辑，刷新时也需调用 invalidate刷新界面

废话不多说，直接上代码：
我们创建一个EasySwipeMenuLayout继承自ViewGroup

  package guanaj.com.scrollerdemo;  import android.content.Context;  import android.util.AttributeSet;  import android.util.Log;  import android.view.MotionEvent;  import android.view.View;  import android.view.ViewConfiguration;  import android.view.ViewGroup;  import android.widget.Scroller;  /**   * Created by guanaj on 2017/4/18.   */  public class EasySwipeMeunLayout extends ViewGroup {private static final String TAG = "EasySwipeMeunLayout";private int mScaledTouchSlop;private int mContentWidth;private float lastx;private float lasty;private float firstx;private float firsty;private Scroller mScroller;private int mRightMenuWidths;public EasySwipeMeunLayout(Context context) {    this(context, null);}public EasySwipeMeunLayout(Context context, AttributeSet attrs) {    this(context, attrs, 0);}public EasySwipeMeunLayout(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    init(context, attrs, defStyleAttr);}private void init(Context context, AttributeSet attrs, int defStyleAttr) {    //创建辅助类对象    //用户需滑动的最小的距离才被认为是滑动了，单位像素    ViewConfiguration viewConfiguration = ViewConfiguration.get(context);    mScaledTouchSlop = viewConfiguration.getScaledTouchSlop();    mScroller = new Scroller(context);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    int mHeight = 0;    mContentWidth = 0;    //获取child view 数量    int childCount = getChildCount();    for (int i = 0; i < childCount; i++) {        View childView = getChildAt(i);        childView.setClickable(true);        if (childView.getVisibility() != GONE) {            //测量child view            measureChild(childView, widthMeasureSpec, heightMeasureSpec);            mHeight = Math.max(mHeight, childView.getMeasuredHeight());            if (i == 0) {                //第一个为内容view                mContentWidth = childView.getMeasuredWidth();            } else {                //第二个为左滑按钮                mRightMenuWidths = childView.getMeasuredWidth();            }        }    }    setMeasuredDimension(getPaddingLeft() + getPaddingRight() + mContentWidth,            mHeight + getPaddingTop() + getPaddingBottom());}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {    int childCount = getChildCount();    for (int i = 0; i < childCount; i++) {        View childView = getChildAt(i);        if (childView.getVisibility() != GONE) {            if (i == 0) {                childView.layout(getPaddingLeft(), getPaddingTop(), getPaddingLeft() + childView.getMeasuredWidth(), getPaddingTop() + childView.getMeasuredHeight());            } else {                childView.layout(mContentWidth, getPaddingTop(), mContentWidth + childView.getMeasuredWidth(), getPaddingTop() + childView.getMeasuredHeight());            }        }    }}@Overridepublic boolean onInterceptTouchEvent(MotionEvent event) {    Log.d(TAG, "dispatchTouchEvent() called with: " + "ev = [" + event + "]");    switch (event.getAction()) {        case MotionEvent.ACTION_DOWN: {            lastx = event.getRawX();            lasty = event.getRawY();            firstx = event.getRawX();            firsty = event.getRawY();            break;        }        case MotionEvent.ACTION_MOVE: {            //对左边界进行处理            float distance = lastx - event.getRawX();            if (Math.abs(distance) > mScaledTouchSlop) {                // 当手指拖动值大于mScaledTouchSlop值时，认为应该进行滚动，拦截子控件的事件                return true;            }            break;        }    }    return super.onInterceptTouchEvent(event);}@Overridepublic boolean onTouchEvent(MotionEvent event) {    switch (event.getAction()) {        case MotionEvent.ACTION_MOVE: {            float distance = lastx - event.getRawX();            Log.d(TAG, "onTouchEvent() ACTION_MOVE getScrollX:" + getScrollX());            lastx = event.getRawX();            lasty = event.getRawY();            scrollBy((int) distance, 0);            break;        }        case MotionEvent.ACTION_UP:            if (getScrollX() <= 0) {                //对右边界进行处理，不让其滑出                mScroller.startScroll(getScrollX(), 0, -getScrollX(), 0);            } else if (getScrollX() > 0 && getScrollX() >= mRightMenuWidths / 3) {                //删除按钮滑出区域大于1／3，滑出删除按钮                mScroller.startScroll(getScrollX(), 0, mRightMenuWidths-getScrollX(), 0);            } else {                //删除按钮滑出区域小于1／3，滑回原来的位置                mScroller.startScroll(getScrollX(), 0, -getScrollX(), 0);            }            invalidate();            //通知View重绘-invalidate()->onDraw()->computeScroll()            break;    }    return super.onTouchEvent(event);}@Overridepublic void computeScroll() {    //判断Scroller是否执行完毕：    if (mScroller.computeScrollOffset()) {        scrollTo(mScroller.getCurrX(), mScroller.getCurrY());        //通知View重绘-invalidate()->onDraw()->computeScroll()        invalidate();    }}}

过程讲解：
- 第一步：重写三个构造方法，并在第三个构造方法中调用init方法初始化必要的对象；
- 第二步：在onMeasure方法中测量子view的大小，获得内容view的宽度以及删除按钮的宽度
- 第三步：在onLayout方法中设置child view的位置，
- 第四步：重写onInterceptTouchEvent方法，获取首次触摸位置以及在滑动距离大于滑动的最小距离mScaledTouchSlop 拦截子控件的触摸事件
- 第五步：重写onTouchEvent方法，在里面进行滑动效果的实现，从下面代码中我们可以看到，主要是通过scrollBy来实现滑动中的效果
case MotionEvent.ACTION_MOVE: {
float distance = lastx - event.getRawX();
Log.d(TAG, “onTouchEvent() ACTION_MOVE getScrollX:” + getScrollX());

            lastx = event.getRawX();            lasty = event.getRawY();            scrollBy((int) distance, 0);            break;        }

而在用户松开手的时候，我们主要处理三种情况，如下代码：

1、左边区域被滑出，我们应将其恢复；

2、右边删除按钮被滑出，我们这里假设滑出三分之一以上即为滑出，所以需判断是否滑出可视区域占其三分之一以上；

3、滑出区域小与三分之一，将其恢复；
case MotionEvent.ACTION_UP:
if (getScrollX() <= 0) {
//对右边界进行处理，不让其滑出
mScroller.startScroll(getScrollX(), 0, -getScrollX(), 0);
} else if (getScrollX() > 0 && getScrollX() >= mRightMenuWidths / 3) {
//删除按钮滑出区域大于1／3，滑出删除按钮
mScroller.startScroll(getScrollX(), 0, mRightMenuWidths-getScrollX(), 0);
} else {
//删除按钮滑出区域小于1／3，滑回原来的位置
mScroller.startScroll(getScrollX(), 0, -getScrollX(), 0);
}
invalidate();
//通知View重绘-invalidate()->onDraw()->computeScroll()
break;

第六步：重写computeScroll方法，通过mScroller.computeScrollOffset犯法判断滑动是否完成，未完成则调用scrollTo方法使其继续滑动。
@Override
public void computeScroll() {
//判断Scroller是否执行完毕：
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
//通知View重绘-invalidate()->onDraw()->computeScroll()
invalidate();
}
}

使用时布局文件：

  <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical"tools:context="guanaj.com.scrollerdemo.MainActivity"><LinearLayout    android:id="@+id/ll_content"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@android:color/holo_green_light">    <TextView        android:id="@+id/txt"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_marginBottom="6dp"        android:layout_marginTop="6dp"        android:background="@android:color/holo_red_dark"        android:gravity="center"        android:text="我滚" /></LinearLayout><Button    android:id="@+id/start_scrollby"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_marginTop="20dp"    android:text="scrollBy" /><Button    android:id="@+id/start_scrollto"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="scrollTO" /><guanaj.com.scrollerdemo.EasySwipeMeunLayout    android:layout_width="match_parent"    android:layout_height="60dp">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#cccccc">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content" />    </LinearLayout>    <TextView        android:layout_width="100dp"        android:layout_height="match_parent"        android:background="#ff0000"        android:gravity="center"        android:text="删除"        android:textColor="@android:color/white"        android:textSize="20sp" /></guanaj.com.scrollerdemo.EasySwipeMeunLayout></LinearLayout>

代码已上传马云https://git.oschina.net/osczaizai/AndroidDemo

0 0