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

  发布日期:   2017-06-01
  最新修改:   2020-05-14
  阅读次数:   102 次

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

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

  • Scroller的使用主要可以分为以下几个步骤:
  • 创建Scroller实例
  • 调用Scroller对象的startScroll()方法来初始化滚动数据并 调用invalidate方法刷新界面
  • 重写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);
}

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

     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


   转载规则

《Android开发之:Scroller的使用详解二(侧滑删除按钮的实现)字》GajAngels 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。