Android Custom View－SlideListView

ListView is one of the most used controls in Android. ListView has many usages and handles events, such as item click and long press events. In many applications, click is jump, long press will pop up some selection menus, etc. Here I want to introduce a custom control for ListView to slide out menus.

The effect diagram is as follows:
Normal state

Slide out menu status

analyze

The Scroller sliding class is mainly used. At the beginning, when the touch event is intercepted at action == MotionEvent.ACTION_DOWN, the itemView we clicked is obtained according to the exit point, and then the left or right width is automatically obtained according to the sliding mode (left sliding or right sliding);

In action == MotionEvent.ACTION_MOVE, determine whether it is possible to slide and the direction of the slide based on the movement, and use itemView.scrollTo(deltaX, 0); to move itemView;

*** In action == MotionEvent.ACTION_UP, determine the mode and moving distance to complete the slide or restore to the initial state.
accomplish

The first step is to initialize Scroller

 scroller = new Scroller(context);
 mTouchSlop = ViewConfiguration .get(getContext()).getScaledTouchSlop();

Step 2 action == MotionEvent.ACTION_DOWN

 case MotionEvent.ACTION_DOWN:
                if ( this.mode == MOD_FORBID) {
                    return super.onTouchEvent(ev);
 }
 // If the slide is completed, slide back and return directly
                if (isSlided) {
                    scrollBack();
                    return false;
 }
 // If the scroller has not finished scrolling, we return directly
                if (!scroller.isFinished()) {
                    return false;
 } 
   
                 downX = (int) ev.getX(); 
                 downY = (int) ev.getY(); 
   
                 slidePosition = pointToPosition (downX, downY);
 // Invalid position, no processing
                if ( slidePosition == AdapterView.INVALID_POSITION) {
                    return super.onTouchEvent(ev);
 } 
   
 // Get the item view we clicked 
                 itemView = getChildAt (slidePosition - getFirstVisiblePosition());
 /*Here, automatically get the length of the left or right menu according to the set sliding mode*/
                if ( this.mode == MOD_BOTH) { 
                     this.leftLength = -itemView.getPaddingLeft(); 
                     this.rightLength = -itemView.getPaddingRight();
                } else if ( this.mode == MOD_LEFT) { 
                     this.leftLength = -itemView.getPaddingLeft();
                } else if ( this.mode == MOD_RIGHT) { 
                     this.rightLength = -itemView.getPaddingRight();
 }
 break;

Step 3 action == MotionEvent.ACTION_MOVE

 case MotionEvent.ACTION_MOVE:
 if (!canMove
                        && slidePosition != AdapterView.INVALID_POSITION
                        && (Math.abs(ev.getX() - downX) > mTouchSlop && Math.abs(ev
                        .getY() - downY) <   mTouchSlop )) {
                    if (mSwipeLayout != null)
                        mSwipeLayout.setEnabled(false);
                    int offsetX = downX - lastX;
                    if (offsetX > 0 && ( this.mode == MOD_BOTH || this.mode == MOD_RIGHT)) {
 /*Slide from right to left*/ 
                         canMove = true ;
                    } else if (offsetX <   0 && ( this.mode == MOD_BOTH || this.mode == MOD_LEFT)) {
 /*Slide from left to right*/ 
                         canMove = true ;
 } else { 
                         canMove = false ;
 }
 /*This code is to avoid triggering the OnItemClickListener event of ListView when sliding sideways*/
                    MotionEvent cancelEvent = MotionEvent .obtain(ev);
                    cancelEvent
                            .setAction(MotionEvent.ACTION_CANCEL
                                    | (ev.getActionIndex() < <   MotionEvent.ACTION_POINTER_INDEX_SHIFT ));
                    onTouchEvent(cancelEvent);
 }
                if (canMove) {
 /*Set this property to prevent the ListView from scrolling up and down when sliding sideways*/
                    requestDisallowInterceptTouchEvent(true);
 // Drag itemView with your finger to scroll, if deltaX is greater than 0, scroll left, and if deltaX is less than 0, scroll right
                    int deltaX = downX - lastX;
                    if (deltaX <   0 && ( this.mode == MOD_BOTH || this.mode == MOD_LEFT)) {
 /*Slide left*/
                        itemView.scrollTo(deltaX, 0);
                    } else if (deltaX > 0 && ( this.mode == MOD_BOTH || this.mode == MOD_RIGHT)) {
 /*Slide right*/
                        itemView.scrollTo(deltaX, 0);
 } else {
                        itemView.scrollTo(0, 0);
 }
                    return true;
 }
 break;

Step 4 action == MotionEvent.ACTION_UP

 case MotionEvent.ACTION_UP:
                if (mSwipeLayout != null)
                    mSwipeLayout.setEnabled(true);
                //requestDisallowInterceptTouchEvent(false);
 if (canMove){ 
                     canMove = false ;
                    scrollByDistanceX();
 }
 break;

Complete code

Here is the complete code

 package com.jwenfeng.fastdev.view; 
   
 import android.content.Context;
 import android.support.v4.widget.SwipeRefreshLayout;
 import android.util.AttributeSet;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewConfiguration;
 import android.widget.AdapterView;
 import android.widget.ListView;
 import android.widget.Scroller; 
   
 /**
 * Current class comment: ListView slide-out menu
 * Project name: fastdev
 * Package name: com.jwenfeng.fastdev.view
 * Author: jinwenfeng on 16/4/11 10:55
 * Email: [email protected]
 * QQ: 823546371
 * Company: Nanjing Muzun Information Technology Co., Ltd.
 * © 2016 jinwenfeng
 * © All rights reserved. No distribution without permission
 */
 public class SlideListView extends ListView { 
   
 /**Pull down to refresh view*/
    private SwipeRefreshLayout mSwipeLayout;
 /**
 * Disable side sliding mode
 */
    public static int MOD_FORBID = 0 ;
 /**
 * Slide from left to right to exit menu mode
 */
    public static int MOD_LEFT = 1 ;
 /**
 * Slide out of menu mode from right to left
 */
    public static int MOD_RIGHT = 2 ;
 /**
 * You can slide out the menu mode on the left or right
 */
    public static int MOD_BOTH = 3 ;
 /**
 * Current mode
 */
    private int mode = MOD_FORBID ;
 /**
 * Length of the left menu
 */
    private int leftLength = 0 ;
 /**
 * The length of the right menu
 */
    private int rightLength = 0 ; 
   
 /**
 * The current sliding ListView position
 */
    private int slidePosition;
 /**
 * The X coordinate where the finger presses
 */
 private int downY;
 /**
 * The Y coordinate where the finger presses
 */
 private int downX;
 /**
 * ListView items
 */
 private View itemView;
 /**
 * Sliding
 */
    private Scroller scroller;
 /**
 * Considered to be the minimum distance that the user can slide
 */
 private int mTouchSlop; 
   
 /**
 * Determine whether it can slide sideways
 */
    private boolean canMove = false ;
 /**
 * Indicates whether the slide is completed
 */
    private boolean isSlided = false ; 
   
    public SlideListView(Context context) {
 this(context, null);
 } 
   
    public SlideListView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
 } 
   
    public SlideListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr); 
         scroller = new Scroller(context); 
         mTouchSlop = ViewConfiguration .get(getContext()).getScaledTouchSlop();
 } 
   
 /**
 * Initialize the menu's slide-out mode
 *
 * @param mode
 */
    public void initSlideMode(int mode) { 
         this.mode = mode;
 } 
   
 /**
 * Handle the logic of dragging ListView item
 */
 @Override
    public boolean onTouchEvent(MotionEvent ev) {
        final int action = ev .getAction();
        int lastX = (int) ev.getX(); 
   
 switch (action) {
            case MotionEvent.ACTION_DOWN:
                if ( this.mode == MOD_FORBID) {
                    return super.onTouchEvent(ev);
 }
 // If the slide is completed, slide back and return directly
                if (isSlided) {
                    scrollBack();
                    return false;
 }
 // If the scroller has not finished scrolling, we return directly
                if (!scroller.isFinished()) {
                    return false;
 } 
   
                 downX = (int) ev.getX(); 
                 downY = (int) ev.getY(); 
   
                 slidePosition = pointToPosition (downX, downY);
 // Invalid position, no processing
                if ( slidePosition == AdapterView.INVALID_POSITION) {
                    return super.onTouchEvent(ev);
 } 
   
 // Get the item view we clicked 
                 itemView = getChildAt (slidePosition - getFirstVisiblePosition());
 /*Here, automatically get the length of the left or right menu according to the set sliding mode*/
                if ( this.mode == MOD_BOTH) { 
                     this.leftLength = -itemView.getPaddingLeft(); 
                     this.rightLength = -itemView.getPaddingRight();
                } else if ( this.mode == MOD_LEFT) { 
                     this.leftLength = -itemView.getPaddingLeft();
                } else if ( this.mode == MOD_RIGHT) { 
                     this.rightLength = -itemView.getPaddingRight();
 }
 break;
            case MotionEvent.ACTION_MOVE:
 if (!canMove
                        && slidePosition != AdapterView.INVALID_POSITION
                        && (Math.abs(ev.getX() - downX) > mTouchSlop && Math.abs(ev
                        .getY() - downY) <   mTouchSlop )) {
                    if (mSwipeLayout != null)
                        mSwipeLayout.setEnabled(false);
                    int offsetX = downX - lastX;
                    if (offsetX > 0 && ( this.mode == MOD_BOTH || this.mode == MOD_RIGHT)) {
 /*Slide from right to left*/ 
                         canMove = true ;
                    } else if (offsetX <   0 && ( this.mode == MOD_BOTH || this.mode == MOD_LEFT)) {
 /*Slide from left to right*/ 
                         canMove = true ;
 } else { 
                         canMove = false ;
 }
 /*This code is to avoid triggering the OnItemClickListener event of ListView when sliding sideways*/
                    MotionEvent cancelEvent = MotionEvent .obtain(ev);
                    cancelEvent
                            .setAction(MotionEvent.ACTION_CANCEL
                                    | (ev.getActionIndex() < <   MotionEvent.ACTION_POINTER_INDEX_SHIFT ));
                    onTouchEvent(cancelEvent);
 }
                if (canMove) {
 /*Set this property to prevent the ListView from scrolling up and down when sliding sideways*/
                    requestDisallowInterceptTouchEvent(true);
 // Drag itemView with your finger to scroll, if deltaX is greater than 0, scroll left, and if deltaX is less than 0, scroll right
                    int deltaX = downX - lastX;
                    if (deltaX <   0 && ( this.mode == MOD_BOTH || this.mode == MOD_LEFT)) {
 /*Slide left*/
                        itemView.scrollTo(deltaX, 0);
                    } else if (deltaX > 0 && ( this.mode == MOD_BOTH || this.mode == MOD_RIGHT)) {
 /*Slide right*/
                        itemView.scrollTo(deltaX, 0);
 } else {
                        itemView.scrollTo(0, 0);
 }
                    return true;
 }
 break; 
   
            case MotionEvent.ACTION_UP:
                if (mSwipeLayout != null)
                    mSwipeLayout.setEnabled(true);
                //requestDisallowInterceptTouchEvent(false);
 if (canMove){ 
                     canMove = false ;
                    scrollByDistanceX();
 }
 break;
 } 
   
        return super.onTouchEvent(ev);
 } 
   
    private void scrollByDistanceX() {
        if( this.mode == MOD_FORBID){
 return;
 }
        if(itemView.getScrollX() > 0 && ( this.mode == MOD_BOTH || this.mode == MOD_RIGHT)){
 /*Slide from right to left*/
            if (itemView.getScrollX() > = rightLength / 2) {
 scrollLeft();
 } else {
 // Scroll back to the original position
 scrollBack();
 }
        }else if(itemView.getScrollX() <   0 && ( this.mode == MOD_BOTH || this.mode == MOD_LEFT)){
 /*Slide from left to right*/
            if (itemView.getScrollX() < = -leftLength / 2) {
                scrollRight();
 } else {
 // Scroll back to the original position
 scrollBack();
 }
 }else{
 // Scroll back to the original position
 scrollBack();
 }
 } 
   
 /**
 * When sliding to the right, getScrollX() returns the distance to the left edge, which is the distance from the left edge of the View to the start of sliding, so sliding to the right is a negative value
 */
    private void scrollRight() { 
         isSlided = true ;
        final int delta = (leftLength + itemView.getScrollX());
 // Call the startScroll method to set some scrolling parameters. We call scrollTo in the computeScroll() method to scroll the item.
        scroller.startScroll(itemView.getScrollX(), 0, -delta, 0,
                Math.abs(delta));
 postInvalidate(); // Refresh itemView
 } 
   
 /**
 * Slide to the left. According to the above, we know that sliding to the left is a positive value.
 */
    private void scrollLeft() { 
         isSlided = true ;
        final int delta = (rightLength - itemView.getScrollX());
 // Call the startScroll method to set some scrolling parameters. We call scrollTo in the computeScroll() method to scroll the item.
        scroller.startScroll(itemView.getScrollX(), 0, delta, 0,
                Math.abs(delta));
 postInvalidate(); // Refresh itemView 
   
 } 
   
    private void scrollBack() { 
         isSlided = false ;
        scroller.startScroll(itemView.getScrollX(), 0, -itemView.getScrollX(),
                0, Math.abs(itemView.getScrollX()));
 postInvalidate(); // Refresh itemView
 } 
   
 @Override
    public void computeScroll() {
 // When startScroll is called, scroller.computeScrollOffset() returns true.
        if (scroller.computeScrollOffset()) {
 // Let the ListView item scroll according to the current scroll offset
            itemView.scrollTo(scroller.getCurrX(), scroller.getCurrY());
 postInvalidate();
 }
 } 
   
 /**
 * Provided for external calls to slide the slide back
 */
 public void slideBack() {
 this.scrollBack();
 } 
   
    public void setSwipeLayout(SwipeRefreshLayout mSwipeLayout) { 
         this.mSwipeLayout = mSwipeLayout;
 }
 }