2. 程式人生 > 程式設計 >Android實現左滑刪除控制元件

Android實現左滑刪除控制元件

阿新 • • 發佈：2020-09-23

背景：在android開發中，列表是經常會使用到的一個主要控制元件，列表中可以展示大量的資料，像訂單、商品、通訊錄、瀏覽記錄或者關注列表等等。可能產品一開始需求只做簡單的資料展示，但後期隨著功能越來越多，越來越完善，產品可能說在列表裡面增加一些互動能力。比如說訂單列表裡面，一開始只是展示訂單資料，後面需要加上刪除訂單的功能，以前Android中這種功能要的很多的可能就是長按操作這種的，因為程式猿只需要很少的程式碼就能實現。但是ios的習慣操作是左滑刪除，為了保持統一的操作習慣，兩端保持一致，最終產品會讓Android程式猿去實現一種和ios一模一樣的功能。如果你的程式碼已經維護了很久，程式碼量比較大，不願意去大改，那麼今天這個控制元件就能輕鬆的助你完成左滑刪除的功能。

先上效果圖：

Android實現左滑刪除控制元件

設計思路：最好以最小的程式碼侵入來實現左滑刪除的功能，在不破壞原來邏輯的基礎上，只需稍加改造便可具備左滑刪除的能力。

首先分析下左滑刪除的基礎原理：

Android實現左滑刪除控制元件

原理分析:

1. 正常狀態下，我們看到的是完整的內容部分，右側選單部分因為超出螢幕所以不在視線範圍內。

2. 手指滑動過程中，容器的內容跟隨手指移動，從而拉出在螢幕外面的選單區域。

3. 當手指鬆開的時候，我們先假定一種邏輯，如果選單區域顯示超過一半，那就全部顯示；如果少於一半那就滑出隱藏。

滑動原理分析完了之後，我們大概就有了實現思路了：

首先我們的控制元件裡面需要兩塊區域，因為以前可能已經實現了列表item的顯示，如果能不做任何改動，直接把以前的item包含到我們的內容區域裡面來，那麼我們內容區域就輕鬆搞定了。

選單區域，需要什麼能力，就把相關的View也傳遞給我容器，然後容器放到相應位置。
談笑間，簡單兩步我們的左滑刪除容器已經完成一個簡單的雛形了！

接下來就是程式碼實現：

步驟一：內容和選單分別加入容器

/**
   * 設定內容區域
   * @param contentView
   */
  public void addContentView(View contentView) {
    this.mContentView = contentView;
    this.mContentView.setTag("contentView");
    
    View cv = findViewWithTag("contentView");
    if (cv != null) {
      this.removeView(cv);
    }
    LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT
    );
    this.addView(this.mContentView,layoutParams);
  }
  
  /**
   * 設定右邊選單區域
   */
  public void addMenuView(View menuView) {
    this.mMenuView = menuView;
    this.mMenuView.setTag("menuView");
    
    View mv = findViewWithTag("menuView");
    if (mv != null) {
      this.removeView(mv);
    }
    LayoutParams layoutParams = new LayoutParams(mRightCanSlide,ViewGroup.LayoutParams.MATCH_PARENT);
    this.addView(this.mMenuView,layoutParams);
}

步驟二：左滑處理

/**
   * 攔截觸控事件
   *
   * @param ev
   * @return
   */
  @Override
  public boolean onInterceptTouchEvent(MotionEvent ev) {
    
    int actionMasked = ev.getActionMasked();
    
    Log.e(TAG,"onInterceptTouchEvent: actionMasked = " + actionMasked);
    
    switch (actionMasked) {
      case MotionEvent.ACTION_DOWN:
        mInitX = ev.getRawX() + getScrollX();
        mInitY = ev.getRawY();
        clearAnim();
        
        if (mViewPager != null) {
          mViewPager.requestDisallowInterceptTouchEvent(true);
        }
        
        if (mCardView != null) {
          mCardView.requestDisallowInterceptTouchEvent(true);
        }
        
        break;
      
      case MotionEvent.ACTION_MOVE:
        
        if (mInitX - ev.getRawX() < 0) {
          
          // 讓父級容器攔截
          if (mRecyclerView != null && isReCompute) {
            mRecyclerView.requestDisallowInterceptTouchEvent(false);
            isReCompute = false;
          }
          
          // 阻止ViewPager攔截事件
          if (mViewPager != null) {
            mViewPager.requestDisallowInterceptTouchEvent(true);
          }
          
          return false;
        }
        
        // y軸方向上達到滑動最小距離,x 軸未達到
        if (Math.abs(ev.getRawY() - mInitY) >= mTouchSlop
            && Math.abs(ev.getRawY() - mInitY) > Math.abs(mInitX - ev.getRawX() - getScrollX())) {
          
          // 讓父級容器攔截
          if (mRecyclerView != null && isReCompute) {
            mRecyclerView.requestDisallowInterceptTouchEvent(false);
            isReCompute = false;
          }
          
          return false;
          
        }
        
        // x軸方向達到了最小滑動距離，y軸未達到
        if (Math.abs(mInitX - ev.getRawX() - getScrollX()) >= mTouchSlop
            && Math.abs(ev.getRawY() - mInitY) <= Math.abs(mInitX - ev.getRawX() - getScrollX())) {
          
          // 阻止父級容器攔截
          if (mRecyclerView != null && isReCompute) {
            mRecyclerView.requestDisallowInterceptTouchEvent(true);
            isReCompute = false;
          }
          
          return true;
        }
        
        break;
      
      case MotionEvent.ACTION_UP:
      case MotionEvent.ACTION_CANCEL:
        
        if (mRecyclerView != null) {
          mRecyclerView.requestDisallowInterceptTouchEvent(false);
          isReCompute = true;
        }
        break;
      default:
        break;
    }
    
    return super.onInterceptTouchEvent(ev);
}
/**
   * 處理觸控事件
   * 需要注意何時處理左滑，何時不處理
   *
   * @param ev
   * @return
   */
  @Override
  public boolean onTouchEvent(MotionEvent ev) {
    
    int actionMasked = ev.getActionMasked();
    
    switch (actionMasked) {
      case MotionEvent.ACTION_DOWN:
        mInitX = ev.getRawX() + getScrollX();
        mInitY = ev.getRawY();
        clearAnim();
        
        if (mViewPager != null) {
          mViewPager.requestDisallowInterceptTouchEvent(true);
        }
        
        if (mCardView != null) {
          mCardView.requestDisallowInterceptTouchEvent(true);
        }
        
        break;
      
      case MotionEvent.ACTION_MOVE:
        
        if (mInitX - ev.getRawX() < 0) {
          
          // 讓父級容器攔截
          if (mRecyclerView != null && isReCompute) {
            mRecyclerView.requestDisallowInterceptTouchEvent(false);
            isReCompute = false;
          }
          
          // 阻止ViewPager攔截事件
          if (mViewPager != null) {
            mViewPager.requestDisallowInterceptTouchEvent(true);
            isReCompute = false;
          }
        }
        
        // y軸方向上達到滑動最小距離,x 軸未達到
        if (Math.abs(ev.getRawY() - mInitY) >= mTouchSlop
            && Math.abs(ev.getRawY() - mInitY) > Math.abs(mInitX - ev.getRawX() - getScrollX())) {
          
          // 讓父級容器攔截
          if (mRecyclerView != null && isReCompute) {
            mRecyclerView.requestDisallowInterceptTouchEvent(false);
            isReCompute = false;
          }
        }
        
        // x軸方向達到了最小滑動距離，y軸未達到
        if (Math.abs(mInitX - ev.getRawX() - getScrollX()) >= mTouchSlop
            && Math.abs(ev.getRawY() - mInitY) <= Math.abs(mInitX - ev.getRawX() - getScrollX())) {
          
          // 阻止父級容器攔截
          if (mRecyclerView != null && isReCompute) {
            mRecyclerView.requestDisallowInterceptTouchEvent(true);
            isReCompute = false;
          }
        }
        
        
        /** 如果手指移動距離超過最小距離 */
        float translationX = mInitX - ev.getRawX();
        
        // 如果滑動距離已經大於右邊可伸縮的距離後,應該重新設定initx
        if (translationX > mRightCanSlide) {
          mInitX = ev.getRawX() + mRightCanSlide;
          
        }
        
        // 如果互動距離小於0，那麼重新設定初始位置initx
        if (translationX < 0) {
          mInitX = ev.getRawX();
        }
        
        translationX = translationX > mRightCanSlide ? mRightCanSlide : translationX;
        translationX = translationX < 0 ? 0 : translationX;
        
        // 向左滑動
        if (translationX <= mRightCanSlide && translationX >= 0) {
          
          scrollTo((int) translationX,0);
          
          return true;
        }
        
        break;
      
      case MotionEvent.ACTION_UP:
      case MotionEvent.ACTION_CANCEL:
        
        if (mRecyclerView != null) {
          mRecyclerView.requestDisallowInterceptTouchEvent(false);
          isReCompute = true;
        }
        
        upAnim();
        
        return true;
        
        default:
          break;
    }
    
    return true;
}

以上兩個方法主要處理了左滑移動功能以及滑動衝突問題，如果用的是RecyclerView那麼為了防止垂直方向的同向衝突，那麼需要將外層的RecyclerView傳入左滑容器，在這個容器中會處理滑動衝突。

到這就已經實現了左滑功能，並且解決掉了垂直方向上的滑動衝突，然後我們還要實現一個功能是：如果有一個item向左滑動並顯示出右邊的選單區域，當手指再次按下或者列表滑動的時候，需要將已經顯示選單區域的item收起，恢復原來的狀態。為了提供這個能力，左滑容器裡面提供一個選單狀態變化的監聽：

/**
   * 刪除按鈕狀態變化監聽
   */
  public interface OnDelViewStatusChangeLister {
    
    /**
     * 狀態變化監聽
     * @param show 是否正在顯示
     */
    void onStatusChange(boolean show);
  }


/**
   * 重置 選單展開/選單收起 狀態
   */
  public void resetDelStatus() {
    
    int scrollX = getScrollX();
    
    if (scrollX == 0) {
      return;
    }
    
    clearAnim();
    
    mValueAnimator = ValueAnimator.ofInt(scrollX,0);
    mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        int value = (int) animation.getAnimatedValue();
        
        scrollTo(value,0);
      }
    });
    
    mValueAnimator.setDuration(mAnimDuring);
    mValueAnimator.start();
  }

選單展開或者收起都會呼叫這個方法，方便第三方呼叫者處理狀態。

再者還有就是加上動畫，讓滑動更加柔和：

/**
   * 手指抬起執行動畫
   */
  private void upAnim() {
    int scrollX = getScrollX();
    
    if (scrollX == mRightCanSlide || scrollX == 0) {
      
      if (mStatusChangeLister != null) {
        mStatusChangeLister.onStatusChange(scrollX == mRightCanSlide);
      }
      
      return;
    }
    
    clearAnim();
    
    // 如果顯出一半鬆開手指，那麼自動完全顯示。否則完全隱藏
    if (scrollX >= mRightCanSlide / 2) {
      mValueAnimator = ValueAnimator.ofInt(scrollX,mRightCanSlide);
      mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
          int value = (int) animation.getAnimatedValue();
          
          scrollTo(value,0);
        }
      });
      
      mValueAnimator.setDuration(mAnimDuring);
      mValueAnimator.start();
      
      if (mStatusChangeLister != null) {
        mStatusChangeLister.onStatusChange(true);
      }
    }
    else {
      mValueAnimator = ValueAnimator.ofInt(scrollX,0);
      mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
          int value = (int) animation.getAnimatedValue();
          
          scrollTo(value,0);
        }
      });
      
      mValueAnimator.setDuration(mAnimDuring);
      mValueAnimator.start();
      
      if (mStatusChangeLister != null) {
        mStatusChangeLister.onStatusChange(false);
      }
    }
  }

#最後貼上左滑刪除容器的完整程式碼：

/**
 * @author luowang
 * @date 2020-08-19 17:31
 * 左滑刪除View
 */
public class LeftSlideView extends LinearLayout {
  
  /**
   * tag
   */
  public static final String TAG = "LeftSlideView";
  
  /**
   * 上下文
   */
  private Context mContext;
  
  
  /**
   * 最小觸控距離
   */
  private int mTouchSlop;
  
  
  /**
   * 右邊可滑動距離
   */
  private int mRightCanSlide;
  
  
  /**
   * 按下x
   */
  private float mInitX;
  
  /**
   * 按下y
   */
  private float mInitY;
  
  
  /**
   * 屬性動畫
   */
  private ValueAnimator mValueAnimator;
  
  
  /**
   * 動畫時長
   */
  private int mAnimDuring = 200;
  
  /**
   * 刪除按鈕的長度
   */
  private int mDelLength = 76;
  
  /**
   * ViewPager
   */
  private ViewPager mViewPager;
  
  /**
   * RecyclerView
   */
  private RecyclerView mRecyclerView;
  
  /** CardView */
  private CardView mCardView;
  
  /** 是否重新計算 */
  private boolean isReCompute = true;
  
  
  /** 狀態監聽 */
  private OnDelViewStatusChangeLister mStatusChangeLister;
  
  /**
   * 內容區域View
   */
  private View mContentView;
  
  /**
   * 選單區域View
   */
  private View mMenuView;
  
  
  
  public LeftSlideView(Context context) {
    this(context,null);
  }
  
  public LeftSlideView(Context context,@Nullable AttributeSet attrs) {
    this(context,attrs,0);
  }
  
  public LeftSlideView(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {
    super(context,defStyleAttr);
    this.mContext = context;
    
    init();
  }
  
  
  /**
   * 初始化
   */
  private void init() {
    mTouchSlop = ViewConfiguration.get(mContext).getScaledTouchSlop();
    mRightCanSlide = DPIUtil.dip2px(mContext,mDelLength);
    setBackgroundColor(Color.TRANSPARENT);
    // 水平佈局
    setOrientation(LinearLayout.HORIZONTAL);
    initView();
  }
  
  /**
   * 設定內容區域
   * @param contentView
   */
  public void addContentView(View contentView) {
    this.mContentView = contentView;
    this.mContentView.setTag("contentView");
    
    View cv = findViewWithTag("contentView");
    if (cv != null) {
      this.removeView(cv);
    }
    LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,layoutParams);
  }
  
  
  /**
   * 設定Viewpager
   */
  public void setViewPager(ViewPager viewPager) {
    mViewPager = viewPager;
  }
  
  /**
   * 設定RecyclerView
   */
  public void setRecyclerView(RecyclerView recyclerView) {
    mRecyclerView = recyclerView;
  }
  
  /** 設定CardView */
  public void setCardView(CardView cardView) {
    mCardView = cardView;
  }
  
  /** 設定狀態監聽 */
  public void setStatusChangeLister(OnDelViewStatusChangeLister statusChangeLister) {
    mStatusChangeLister = statusChangeLister;
  }
  
  /**
   * 初始化View
   */
  private void initView() {
    
  
  
  }
  
  
  /**
   * 攔截觸控事件
   *
   * @param ev
   * @return
   */
  @Override
  public boolean onInterceptTouchEvent(MotionEvent ev) {
    
    int actionMasked = ev.getActionMasked();
    
    Log.e(TAG,x 軸未達到
        if (Math.abs(ev.getRawY() - mInitY) >= mTouchSlop
            && Math.abs(ev.getRawY() - mInitY) > Math.abs(mInitX - ev.getRawX() - getScrollX())) {
          
          // 讓父級容器攔截
          if (mRecyclerView != null && isReCompute) {
            mRecyclerView.requestDisallowInterceptTouchEvent(false);
            isReCompute = false;
          }
          
          return false;
          
        }
        
        // x軸方向達到了最小滑動距離，y軸未達到
        if (Math.abs(mInitX - ev.getRawX() - getScrollX()) >= mTouchSlop
            && Math.abs(ev.getRawY() - mInitY) <= Math.abs(mInitX - ev.getRawX() - getScrollX())) {
          
          // 阻止父級容器攔截
          if (mRecyclerView != null && isReCompute) {
            mRecyclerView.requestDisallowInterceptTouchEvent(true);
            isReCompute = false;
          }
          
          return true;
        }
        
        break;
      
      case MotionEvent.ACTION_UP:
      case MotionEvent.ACTION_CANCEL:
        
        if (mRecyclerView != null) {
          mRecyclerView.requestDisallowInterceptTouchEvent(false);
          isReCompute = true;
        }
        break;
      default:
        break;
    }
    
    return super.onInterceptTouchEvent(ev);
  }
  
  /**
   * 處理觸控事件
   * 需要注意何時處理左滑，何時不處理
   *
   * @param ev
   * @return
   */
  @Override
  public boolean onTouchEvent(MotionEvent ev) {
    
    int actionMasked = ev.getActionMasked();
    
    switch (actionMasked) {
      case MotionEvent.ACTION_DOWN:
        mInitX = ev.getRawX() + getScrollX();
        mInitY = ev.getRawY();
        clearAnim();
        
        if (mViewPager != null) {
          mViewPager.requestDisallowInterceptTouchEvent(true);
        }
        
        if (mCardView != null) {
          mCardView.requestDisallowInterceptTouchEvent(true);
        }
        
        break;
      
      case MotionEvent.ACTION_MOVE:
        
        if (mInitX - ev.getRawX() < 0) {
          
          // 讓父級容器攔截
          if (mRecyclerView != null && isReCompute) {
            mRecyclerView.requestDisallowInterceptTouchEvent(false);
            isReCompute = false;
          }
          
          // 阻止ViewPager攔截事件
          if (mViewPager != null) {
            mViewPager.requestDisallowInterceptTouchEvent(true);
            isReCompute = false;
          }
        }
        
        // y軸方向上達到滑動最小距離,0);
          
          return true;
        }
        
        break;
      
      case MotionEvent.ACTION_UP:
      case MotionEvent.ACTION_CANCEL:
        
        if (mRecyclerView != null) {
          mRecyclerView.requestDisallowInterceptTouchEvent(false);
          isReCompute = true;
        }
        
        upAnim();
        
        return true;
        
        default:
          break;
    }
    
    return true;
  }
  
  
  /**
   * 清除動畫
   */
  private void clearAnim() {
    if (mValueAnimator == null) {
      return;
    }
    
    mValueAnimator.end();
    mValueAnimator.cancel();
    mValueAnimator = null;
  }
  
  
  /**
   * 手指抬起執行動畫
   */
  private void upAnim() {
    int scrollX = getScrollX();
    
    if (scrollX == mRightCanSlide || scrollX == 0) {
      
      if (mStatusChangeLister != null) {
        mStatusChangeLister.onStatusChange(scrollX == mRightCanSlide);
      }
      
      return;
    }
    
    clearAnim();
    
    // 如果顯出一半鬆開手指，那麼自動完全顯示。否則完全隱藏
    if (scrollX >= mRightCanSlide / 2) {
      mValueAnimator = ValueAnimator.ofInt(scrollX,0);
        }
      });
      
      mValueAnimator.setDuration(mAnimDuring);
      mValueAnimator.start();
      
      if (mStatusChangeLister != null) {
        mStatusChangeLister.onStatusChange(false);
      }
    }
  }
  
  /**
   * 重置
   */
  public void resetDelStatus() {
    
    int scrollX = getScrollX();
    
    if (scrollX == 0) {
      return;
    }
    
    clearAnim();
    
    mValueAnimator = ValueAnimator.ofInt(scrollX,0);
      }
    });
    
    mValueAnimator.setDuration(mAnimDuring);
    mValueAnimator.start();
  }
  
  /**
   * 刪除按鈕狀態變化監聽
   */
  public interface OnDelViewStatusChangeLister {
    
    /**
     * 狀態變化監聽
     * @param show 是否正在顯示
     */
    void onStatusChange(boolean show);
  }
  
}

完整DEMO直通車

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

Android實現左滑刪除控制元件

背景：在android開發中，列表是經常會使用到的一個主要控制元件，列表中可以展示大量的資料，像訂單、商品、通訊錄、瀏覽記錄或者關注列表等等。可能產品一開始需求只做簡單的資料展示，但後期隨著功能越來越多，越來

小程式實現左滑刪除的效果的例項程式碼

前言:實現小程式滑動刪除有幾種方式,文章會簡單列舉兩種實現,先看效果。 一、使用movable-view實現滑動

微信小程式實現左滑刪除效果

微信小程式實現左滑刪除效果的具體程式碼，供大家參考，具體內容如下 .wxml

Android實現左滑退出Activity（完美封裝）

1：定義一個自己的父級容器，讓它繼承自一個佈局（LinearLayout、RelativeLayout都可以）

Android實現左滑退出Activity的完美封裝

1：定義一個自己的父級容器，讓它繼承自一個佈局（LinearLayout、RelativeLayout都可以）

vue專案實現左滑刪除功能(完整程式碼)

實現效果 程式碼如下 html <template> <div> <div class=\"biggestBox\"> <ul> <!-- data-type=0 隱藏刪除按鈕 data-type=1 顯示刪除按鈕 -->

微信小程式uniapp實現左滑刪除效果(完整程式碼)

微信小程式uniapp實現左滑刪除效果 實現效果 1，列表中側滑刪除 2，刪除不同時存在

Android BottomSheet實現可拉伸控制元件

一、簡介 Bottom Sheet是Design Support Library23.2 版本引入的一個類似於對話方塊的控制元件。 Bottom Sheet中的內容預設是隱藏起來的，只顯示很小一部分，可以通過在程式碼中設定其狀態或者手勢操作將其完全展開，

Android開發之基於RecycleView實現的頭部懸浮控制元件

RecyclerView是一種類似於ListView的一個滑動列表，但是RecyclerView和ListView相比，RecyclerView比ListView更好，RecyclerView支援橫向滑動，RecyclerView沒有點選事件，需要自己加入，還可以做出各種炫酷的效果動

android通過程式碼動態新增和刪除控制元件

原文：https://blog.csdn.net/chadeltu/article/details/42390047# 1.概述 android開發當中有可能會碰到以下這種情況，某個頁面，內容不確定，根據使用者需求增加或減少相應控制元件數。這種情況一般發生在編輯

vue移動端實現左滑編輯與刪除的全過程

前言 根據專案需要使用vue-touch 實現了一個vue移動端的左滑編輯和刪除功能，廢話不多說，先看效果圖，然後上程式碼吧！

[Android Studio] 如何在Button控制元件中實現包邊效果

<LinearLayoutandroid:layout_width=\"match_parent\"android:layout_height=\"wrap_content\"android:orientation=\"vertical\"android:layout_marginTop=\"669dp\"android:background=\"#00000000\"><Bu

微信小程式實現列表項左滑刪除效果

本文例項為大家分享了微信小程式實現列表項左滑刪除效果的具體程式碼，供大家參考，具體內容如下

js佈局實現單選按鈕控制元件

本文例項為大家分享了javascript佈局實現單選按鈕控制元件的具體程式碼，供大家參考，具體內容如下

Taro UI框架開發小程式實現左滑喜歡右滑不喜歡效果

Taro 就是可以用 React 語法寫小程式的框架，擁有多端轉換能力，一套程式碼可編譯為微信小程式、百度小程式、支付寶小程式、H5、RN等

Android實現側滑選單DrawerLayout

本文例項為大家分享了Android實現側滑選單的具體程式碼，供大家參考，具體內容如下

MFC實現對話方塊編輯控制元件上拖拽檔案

本文例項為大家分享了MFC實現對話方塊編輯控制元件上拖拽檔案的具體程式碼，供大家參考，具體內容如下

Android Studio 建立自定義控制元件的方法

我們知道，當系統控制元件並不能滿足我們的需求時，我們就需要來建立自定義控制元件，主要有兩種方法

OpenLayers實現圖層切換控制元件

OpenLayers並沒有封裝圖層切換的控制元件，所以我們需要自己來實現圖層控制元件。

android約束佈局動態新增控制元件或者動態修改佈局 記錄筆記

ConstraintSet constraintSet =new ConstraintSet(); //第一個按鈕 View ivLeft = getLayoutInflater().inflate(R.layout.item_262, null);