Android开发之：Scroller的使用详解二(侧滑删除按钮的实现)

2017-06-01 约 2265 字预计阅读 5 分钟次阅读

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

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

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

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166


  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);
}

@Override
protected 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());
}

@Override
protected 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());
            }
        }
    }

}

@Override
public 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);
}

@Override
public 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);
}

@Override
public 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来实现滑动中的效果

1
2
3
4
5
6
7
8
9


 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、滑出区域小与三分之一，将其恢复；

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


   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方法使其继续滑动。

1
2
3
4
5
6
7
8
9


   @Override
public void computeScroll() {
  //判断Scroller是否执行完毕：
  if (mScroller.computeScrollOffset()) {
      scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
      //通知View重绘-invalidate()->onDraw()->computeScroll()
      invalidate();
  }
}

使用时布局文件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65


  <?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

目录

Android开发之：Scroller的使用详解二(侧滑删除按钮的实现)