- 我们在前面 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>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于