Android 实现item可左右滑动移除的GridView

前言

　　见如下效果图，实现了如下功能：

1. 上下滑动可翻页(GridView自带的功能)

2. 左右滑动Item，可以进行移除，且有动画效果，当移除完成后，onAnimationEnd方法会被回调

3. 点击黑色区域(子View,此处为TextView)时响应点击事件

4. 点击红色区域(父View,此处为FrameLayout)时响应点击事件

　　开发期间遇到的问题：

1.事件没有传递到子view,即TextView不能响应点击事件

2.事件已传递到子view(TextView),但是父View(TaskView)不能响应点击事件

3.左右滑动item时,TaskView高概率突然接受到"ACTION_CANCEL"事件，导致item的滑动动作不受控制

　　开发期间遇到的问题解决方法：

第１和第２个问题是onInterceptTouchEvent和onTouchEvent的返回值导致的，见如下TaskView类

第３个问题：左右滑动item时突然接受到"ACTION_CANCEL"事件，是由于GridView的事件干扰导致的，解决方法：在“ACTION_MOVE”事件中加入"getParent().requestDisallowInterceptTouchEvent(true)"(不能在“ACTION_DOWN"事件中调用该方法，否则会影响GridView的上下滑动翻页事件)，在“ACTION_UP”和"ACTION_CANCEL"时需要requestDisallowInterceptTouchEvent(false)。

原文地址：http://blog.csdn.net/yelangjueqi/article/details/56021609

效果图

源码

一　grid_recents.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <GridView        android:id="@+id/grid_view"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="20dp"        android:layout_marginStart="20dp"        android:layout_marginTop="8dp"        android:columnWidth="120dp"        android:horizontalSpacing="20dp"        android:numColumns="2"        android:scrollbars="none"        android:stretchMode="columnWidth"        android:verticalSpacing="20dp" /></FrameLayout>

二　simple_list_item.xml

<?xml version="1.0" encoding="utf-8"?><com.example.android.TaskView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_marginBottom="10dp"    android:layout_marginTop="10dp"    android:background="#ff0000" >    <TextView        android:id="@+id/text"        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_gravity="center"        android:layout_marginBottom="10dp"        android:layout_marginTop="10dp"        android:background="#000000"        android:gravity="center"        android:textColor="#00ff00" /></com.example.android.TaskView>

三　TaskView.java

package com.example.android;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.ValueAnimator;import android.animation.ValueAnimator.AnimatorUpdateListener;import android.content.Context;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.VelocityTracker;import android.view.View;import android.view.ViewConfiguration;import android.view.ViewParent;import android.view.animation.AccelerateInterpolator;import android.widget.FrameLayout;import android.widget.Toast;public class TaskView extends FrameLayout {    private String TAG = "TaskView";    private ValueAnimator mValueAnimator;    private int mPosition = -1;    private int DIRECTION_LEFT_TO_RIGHT = 0;    private int DIRECTION_RIGHT_TO_LEFT = 1;    private int mSlideDirection = -1;    private int mTaskViewDownLeft;    private int mTaskViewLeft;    private int mTaskViewTop;    private int mTaskViewRight;    private int mTaskViewBottom;    private int mDownX;    private float mLastX;    private final ViewConfiguration mConfiguration;    private float mTouchSlop;    private ViewParent mViewParent;    private int offsetDistanceThreshold;    private final float BASEVELOCOTY = 100;    private VelocityTracker mVelocityTracker;    private float mVelocityX;    private boolean eventConsumed = false;    public TaskView(Context context) {        this(context, null);    }    public TaskView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public TaskView(Context context, AttributeSet attrs, int defStyleAttr) {        this(context, attrs, defStyleAttr, 0);    }    public TaskView(final Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {        super(context, attrs, defStyleAttr, defStyleRes);        mConfiguration = ViewConfiguration.get(context);        mTouchSlop = mConfiguration.getScaledTouchSlop();        setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(context, "TaskView clicked", 1000).show();            }        });    }    public void updatePositionInAdapter(int position) {        mPosition = position;    }    @Override    public boolean onInterceptTouchEvent(MotionEvent event) {        boolean consumed = handleTouchEvent(event);        Log.d(TAG, "consumed =" + consumed);        return consumed ? true : super.onInterceptTouchEvent(event);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        boolean consumed = handleTouchEvent(event);        Log.d(TAG, "consumed =" + consumed);        return consumed ? true : super.onTouchEvent(event);    }    private boolean handleTouchEvent(MotionEvent event) {        int action = event.getAction();        switch (action & MotionEvent.ACTION_MASK) {        case MotionEvent.ACTION_DOWN: {            // Save the touch down info            mDownX = (int) event.getX();            mLastX = (int) event.getRawX();            mTaskViewDownLeft = getLeft();            mTaskViewLeft = mTaskViewDownLeft;            mTaskViewTop = getTop();            mTaskViewRight = getRight();            mTaskViewBottom = getBottom();            offsetDistanceThreshold = getWidth() / 3;            if (mVelocityTracker == null) {                mVelocityTracker = VelocityTracker.obtain();            } else {                mVelocityTracker.clear();            }            mVelocityTracker.addMovement(event);            break;        }        case MotionEvent.ACTION_POINTER_DOWN: {            // TODO            break;        }        case MotionEvent.ACTION_MOVE: {            if (mVelocityTracker != null) {                mVelocityTracker.addMovement(event);                mVelocityTracker.computeCurrentVelocity(1000);                mVelocityX = mVelocityTracker.getXVelocity();            }            mViewParent = getParent();            if (mViewParent != null) {                // Avoid this view occurence unexpected "ACTION_CANCEL" event                mViewParent.requestDisallowInterceptTouchEvent(true);            }            int x = (int) event.getX();            int dx = (int) Math.abs(event.getRawX() - mLastX);            int offsetX = x - mDownX;            if (Math.abs(offsetX) > mTouchSlop && (mPosition % 2) == 0 && offsetX < 0) {                Log.d(TAG, "slide to left");                mSlideDirection = DIRECTION_RIGHT_TO_LEFT;                mTaskViewLeft = getLeft() - dx;                mTaskViewRight = getRight() - dx;            } else if (Math.abs(offsetX) > mTouchSlop && (mPosition % 2) != 0 && offsetX > 0) {                Log.d(TAG, "slide to right");                mSlideDirection = DIRECTION_LEFT_TO_RIGHT;                mTaskViewLeft = getLeft() + dx;                mTaskViewRight = getRight() + dx;            }            this.layout(mTaskViewLeft, mTaskViewTop, mTaskViewRight, mTaskViewBottom);            mLastX = (int) event.getRawX();            break;        }        case MotionEvent.ACTION_POINTER_UP: {            // TODO            break;        }        case MotionEvent.ACTION_UP:        case MotionEvent.ACTION_CANCEL: {            Log.d(TAG, (action == 1) ? "ACTION_UP" : "ACTION_CANCEL");            eventConsumed = upOrcancel();            reset();            if (mViewParent != null) {                mViewParent.requestDisallowInterceptTouchEvent(false);            }            break;        }        }        return eventConsumed;    }    private boolean upOrcancel() {        boolean consumed = false;        int offsetDistance = Math.abs(getLeft() - mTaskViewDownLeft);        boolean overstep = (offsetDistance > offsetDistanceThreshold);        int viewCurrentLeft = getLeft(); // current left position        int viewEndLeft = viewCurrentLeft; // default value        boolean fling = (Math.abs(mVelocityX) > BASEVELOCOTY);        // left column        if ((mPosition % 2) == 0 && mSlideDirection == DIRECTION_RIGHT_TO_LEFT) {            // exceed "offsetDistanceThreshold" value or fling gesture            boolean shouldDismissChildView = overstep || fling;            viewEndLeft = shouldDismissChildView ? (mTaskViewDownLeft - getWidth()) : mTaskViewDownLeft;            finishSlide(viewCurrentLeft, viewEndLeft, shouldDismissChildView);            consumed = true;            // right column        } else if ((mPosition % 2) != 0 && mSlideDirection == DIRECTION_LEFT_TO_RIGHT) {            // exceed "offsetDistanceThreshold" value or fling gesture            boolean shouldDismissChildView = overstep || fling;            viewEndLeft = shouldDismissChildView ? (mTaskViewDownLeft + getWidth()) : mTaskViewDownLeft;            finishSlide(viewCurrentLeft, viewEndLeft, shouldDismissChildView);            consumed = true;        }        return consumed;    }    private void finishSlide(int startPosition, int endPosition, final boolean shouldDismissChildView) {        mValueAnimator = ValueAnimator.ofFloat(startPosition, endPosition);        mValueAnimator.setDuration(220);        mValueAnimator.setInterpolator(new AccelerateInterpolator());        mValueAnimator.addUpdateListener(new AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float currentValue = (Float) animation.getAnimatedValue();                int left = (int) currentValue;                int right = (int) (left + getWidth());                layout(left, mTaskViewTop, right, mTaskViewBottom);            }        });        mValueAnimator.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                if (shouldDismissChildView) {                    Log.d(TAG, "--->onAnimationEnd");                    // TODO Notify other object to update by callback                }            }        });        mValueAnimator.start();    }    private void reset() {        if (mVelocityTracker != null) {            mVelocityTracker.recycle();            mVelocityTracker = null;        }        mSlideDirection = -1;    }}

四　SwipeGridViewActivity.java

package com.example.android;import java.util.ArrayList;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.GridView;import android.widget.TextView;import android.widget.Toast;public class SwipeGridViewActivity extends Activity {    private String TAG = "SwipeGridViewActivity";    private GridView mGridView;    private ArrayList<String> mAllList = new ArrayList<String>();    private GridTaskAdapter mGridTaskAdapter;    private LayoutInflater mInflater;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.grid_recents);        mInflater = LayoutInflater.from(SwipeGridViewActivity.this);        loadData();        mGridView = (GridView) findViewById(R.id.grid_view);        mGridView.setAdapter(new GridTaskAdapter());    }    private class GridTaskAdapter extends BaseAdapter {        @Override        public int getCount() {            return mAllList.size();        }        @Override        public Object getItem(int position) {            return mAllList.get(position);        }        @Override        public long getItemId(int position) {            return position;        }        @Override        public View getView(int position, View convertView, ViewGroup parent) {            TaskView taskView = (TaskView) mInflater.inflate(R.layout.simple_list_item, null);            convertView = taskView;            TextView textView = (TextView) taskView.findViewById(R.id.text);            taskView.updatePositionInAdapter(position);            textView.setText((String) getItem(position));            textView.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    Log.d(TAG, "zzz setOnClickListener");                    Toast.makeText(SwipeGridViewActivity.this, "child textView clicked", 1000).show();                }            });            return convertView;        }    }    public Object[] loadData() {        mAllList.clear();        mAllList.add("aa");        mAllList.add("ddfa");        mAllList.add("qw");        mAllList.add("sd");        mAllList.add("fd");        mAllList.add("cf");        mAllList.add("re");        mAllList.add("aa");        mAllList.add("ddfa");        mAllList.add("qw");        mAllList.add("sd");        mAllList.add("fd");        mAllList.add("cf");        mAllList.add("re");        mAllList.add("aa");        mAllList.add("ddfa");        mAllList.add("qw");        mAllList.add("sd");        mAllList.add("fd");        mAllList.add("cf");        mAllList.add("re");        mAllList.add("aa");        mAllList.add("ddfa");        mAllList.add("qw");        mAllList.add("sd");        mAllList.add("fd");        mAllList.add("cf");        mAllList.add("re");        return mAllList.toArray();    }}

源码和录制的视频地址

View滑动实现：

1.原始“相对位置”(getLeft()等方法)

2.计算偏移量(通过滑动事件“坐标差值”计算)

3.“原始相对位置” 结合 “偏移量” 得出 “新位置”，然后根据“新位置”刷新界面即可实现滑动

4. 再结合“动画”和“速率” 提升用户体验即可