Android 實現(xiàn)左滑出現(xiàn)刪除選項

更新時間：2017年06月19日 09:51:25 作者：nirean

滑動刪除的部分主要包含兩個部分，一個是內(nèi)容區(qū)域（用于放置正常顯示的view），另一個是操作區(qū)域（用于放置刪除按鈕）。下面通過本文給大家介紹Android 實現(xiàn)左滑出現(xiàn)刪除選項,需要的朋友可以參考下

滑動刪除的部分主要包含兩個部分，一個是內(nèi)容區(qū)域（用于放置正常顯示的view），另一個是操作區(qū)域（用于放置刪除按鈕）。默認(rèn)情況下，操作區(qū)域是不顯示的，內(nèi)容區(qū)域的大小是填充整個容器，操作區(qū)域始終位于內(nèi)容區(qū)域的右面。當(dāng)開始滑動的時候，整個容器中的所有子view都像左滑動，如果操作區(qū)域此時是不可見的，設(shè)置為可見。

實現(xiàn)思路就是自定義一個layout SwipeLayout繼承自FrameLayout。SwipeLayout包含兩個子view，第一個子view是內(nèi)容區(qū)域，第二個子view是操作區(qū)域?；瑒有Ч目刂?，主要就是通過檢測SwipeLayout的touch事件來實現(xiàn)，Android support庫里其實已經(jīng)提供了ViewDragHelper來進(jìn)行監(jiān)聽touch事件。

1、首先需要對LinearLayout進(jìn)行重載

具體分析看注解

package com.example.mac.agriculturemanagement;
import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
/**
 * Created by mac on 2017/6/15.
 */
//條目滑動效果
public class SlideLayout extends LinearLayout {
  private ViewDragHelper mDragHelper;
  private View contentView;
  private View actionView;
  private int dragDistance;
  private final double AUTO_OPEN_SPEED_LIMIT = 800.0;
  private int draggedX;
  public SlideLayout(Context context) {
    super(context);
    init();
  }
  public SlideLayout(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
  }
  public SlideLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }
  //初始化
  public void init (){
    mDragHelper = ViewDragHelper.create(this, new DragHelperCallback());
  }
  @Override
  public boolean callOnClick() {
    return super.callOnClick();
  }
  /*當(dāng)你觸摸屏幕，移動的時候，就會回調(diào)這個方法。
  它會返回兩個參數(shù)。第一個參數(shù)，就是你觸摸的那個控件。
  第二個就是ＩＤ。
  返回值又代表什么呢？返回ture,就是代筆允許拖動這個控件。
  返回false就代表不允許拖動這個控件.。這里我只允許拖動主控件。*/
   //把容器的事件處理委托給ViewDragHelper對象
  @Override
  public boolean onInterceptTouchEvent(MotionEvent event) {
    if (mDragHelper.shouldInterceptTouchEvent(event)) {
      return true;
    }
    return super.onInterceptTouchEvent(event);
  }
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    mDragHelper.processTouchEvent(event);
    return true;
  }
  @Override
  protected void onFinishInflate() {
    contentView = getChildAt(0);
    actionView = getChildAt(1);
    actionView.setVisibility(GONE);
  }
   //設(shè)置拖動的距離為actionView的寬度
   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    dragDistance = actionView.getMeasuredWidth();
    //System.out.println("rightTop"+actionView.getTop());
   }
  private class DragHelperCallback extends ViewDragHelper.Callback {
    //用來確定contentView和actionView是可以拖動的
    @Override
    public boolean tryCaptureView(View view, int i) {
      return view == contentView || view == actionView;
    }
    //被拖動的view位置改變的時候調(diào)用，如果被拖動的view是contentView，
    // 我們需要在這里更新actionView的位置
    @Override
    public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
      draggedX = left;
      if (changedView == contentView) {
        actionView.offsetLeftAndRight(dx);
      } else {
        contentView.offsetLeftAndRight(dx);
      }
      //actionView 是否可見
      //0  --------  VISIBLE  可見
      //4  --------  INVISIBLE  不可見但是占用布局空間
      //8  --------  GONE  不可見也不占用布局空間
      if (actionView.getVisibility() == View.GONE) {
        actionView.setVisibility(View.VISIBLE);
      }
      if (left==25)
      {
        actionView.setVisibility(View.GONE);
      }
      invalidate(); //刷新View
    }
    //用來限制view在x軸上拖動
    //@Override
    public int clampViewPositionHorizontal(View child, int left, int dx) {
      if (child == contentView) {
        final int leftBound = getPaddingLeft();
        final int minLeftBound = -leftBound - dragDistance;
        final int newLeft = Math.min(Math.max(minLeftBound, left), 25);
        //System.out.println("content "+newLeft);
        return newLeft;
      } else {
        //getMeasuredWidth()獲取全部長度 包括隱藏的
        final int minLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() - dragDistance;
        final int maxLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() + getPaddingRight();
        final int newLeft = Math.min(Math.max(left, minLeftBound), maxLeftBound);
        System.out.println("action "+newLeft);
        return newLeft;
      }
    }
    @Override
    public int clampViewPositionVertical(View child, int top, int dy) {
      //System.out.println("top "+top);
      if(top!=25)
      {
        top=25;
      }
      return top;
    }
    //用來限制view可以拖動的范圍
    //@Override
    public int getViewHorizontalDragRange(View child) {
      return dragDistance;
    }
    @Override
    public int getViewVerticalDragRange(View child) {
      return 0;
    }
    //根據(jù)滑動手勢的速度以及滑動的距離來確定是否顯示actionView。
    // smoothSlideViewTo方法用來在滑動手勢之后實現(xiàn)慣性滑動效果
    //@Override
    public void onViewReleased(View releasedChild, float xvel, float yvel) {
      super.onViewReleased(releasedChild, xvel, yvel);
      boolean settleToOpen = false;
      if (xvel > AUTO_OPEN_SPEED_LIMIT) {
        settleToOpen = false;
      } else if (xvel < -AUTO_OPEN_SPEED_LIMIT) {
        settleToOpen = true;
      } else if (draggedX <= -dragDistance / 2) {
        settleToOpen = true;
      } else if (draggedX > -dragDistance / 2) {
        settleToOpen = false;
      }
      final int settleDestX = settleToOpen ? -dragDistance : 0;
      mDragHelper.smoothSlideViewTo(contentView, settleDestX, 0);
      ViewCompat.postInvalidateOnAnimation(SlideLayout.this);
    }
  }
}

因為我給我的LinearLayout設(shè)置了外邊距，所以在向左滑動的過程，出現(xiàn)上下的滑動，并且該條目的原始位置也偏移。為了解決該問題，首先需要根據(jù)自己設(shè)置的margin值來修改一下的數(shù)據(jù)

將onViewPositionChanged中添加

if (left==25)
      {
        actionView.setVisibility(View.GONE);
      }

修改為適合的數(shù)據(jù)，來防止右側(cè)的滑塊不隱藏

再添加上

public int clampViewPositionVertical(View child, int top, int dy) {
      //System.out.println("top "+top);
      if(top!=25)
      {
        top=25;
      }
      return top;
    }

來限制其上下移動 top的值依舊需要自己琢磨

2、編寫布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">
  <com.example.mac.agriculturemanagement.SlideLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="100dp"
      android:layout_margin="10dp"
      android:background="@drawable/text_border"
      android:elevation="3dp"
      android:orientation="vertical">
      <TextView
        android:id="@+id/mark"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView"
        android:textSize="40dp" />
      <TextView
        android:id="@+id/markSquare"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:text="TextView"
        android:textSize="20dp" />
    </LinearLayout>
    <LinearLayout
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:background="#f0f0f0"
      android:layout_marginTop="10dp"
      >
      <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">
        <TextView
          android:id="@+id/showInfo"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentTop="true"
          android:layout_marginLeft="5dp"
          android:layout_toEndOf="@+id/textView6"
          android:layout_toRightOf="@+id/textView6"
          android:text="詳細(xì)信息" />
        <TextView
          android:id="@+id/textView6"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true"
          android:layout_alignParentTop="true"
          android:text="刪除" />
      </RelativeLayout>
    </LinearLayout>
  </com.example.mac.agriculturemanagement.SlideLayout>
</LinearLayout>

具體效果

這里寫圖片描述