android-侧滑菜单

引子

移动平台上很常见的侧滑菜单布局，本文将给出控件源码，以及调用的代码。

效果动态图

 

 源代码

自定义ViewGroup ： Swipe2DeleteViewGroup.java

package com.example.administrator.technologystackapp.activities.custom;

import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.Scroller;


/**
 * Created by wupengjian on 16/11/9.
 * <p/>
 */
public class Swipe2DeleteViewGroup extends ViewGroup {

    private static final int STATUS_NORMAL = 0;
    private static final int STATUS_EXPAND = 1;
    private static final int HOVER_TAP_SLOP = 10;
    private static final int HOVER_TAP_TIMEOUT = 150;
    private View mCenterView;
    private Scroller mScroller;
    private VelocityTracker mVelocityTracker = null;
    private ViewConfiguration mViewConfiguration;
    private float mLastTouchX, mScrollX;
    private int mMaxScrollDistance, mMinScrollDistance;
    private int mStatus = STATUS_NORMAL;
    private MotionEvent mMoveDownEvent;
    private OnItemClickListener mOnItemClickListener;

    public Swipe2DeleteViewGroup(Context context) {
        this(context, null);
    }

    public Swipe2DeleteViewGroup(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public Swipe2DeleteViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mScroller = new Scroller(context);
        mViewConfiguration = ViewConfiguration.get(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        mCenterView = null;
        mMaxScrollDistance = 0;

        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
            int childWidth;
            if (mCenterView == null) {
                mCenterView = child;
                childWidth = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY);
            } else {
                childWidth = heightMeasureSpec;
                //最大滚动距离就是所有菜单item的宽度的和
                mMaxScrollDistance += MeasureSpec.getSize(childWidth);
            }
            child.measure(childWidth, heightMeasureSpec);
        }
        setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        int childCount = getChildCount();
        int offset = 0;
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
            setChildFrame(child, offset, 0, child.getMeasuredWidth(), child.getMeasuredHeight());
            offset += child.getMeasuredWidth();
        }
    }

    private void setChildFrame(View child, int left, int top, int width, int height) {
        child.layout(left, top, left + width, top + height);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mMoveDownEvent = MotionEvent.obtain(event);
                if (mVelocityTracker == null) {
                    mVelocityTracker = VelocityTracker.obtain();
                } else {
                    mVelocityTracker.clear();
                }
                mVelocityTracker.addMovement(event);
                break;
            case MotionEvent.ACTION_MOVE:

                mVelocityTracker.addMovement(event);
                updateScrollX(mLastTouchX - event.getRawX());
                break;
            case MotionEvent.ACTION_UP:
                int downX = (int) mMoveDownEvent.getRawX();
                int downY = (int) mMoveDownEvent.getRawY();
                //如果事件坐标在以按下时坐标为中心的宽度为 2 * HOVER_TAP_SLOP 的正方形内,则认为这个事件是点击事件
                Rect rect = new Rect(downX - HOVER_TAP_SLOP, downY - HOVER_TAP_SLOP, downX + HOVER_TAP_SLOP, downY + HOVER_TAP_SLOP);
                //如果按下手指和抬起手指时的 坐标和时间 相差不是很大,则可以认为是点击
                boolean intent2Click = rect.contains((int) event.getRawX(), (int) event.getRawY());
                boolean isTimeNotTooLong = event.getEventTime() - event.getDownTime() < HOVER_TAP_TIMEOUT;
                if (intent2Click && isTimeNotTooLong) {

                    handleClickEvent(event);
                } else {

                    mVelocityTracker.computeCurrentVelocity(1000);
                    float velocityX = mVelocityTracker.getXVelocity();
                    if (Math.abs(velocityX) > mViewConfiguration.getScaledMinimumFlingVelocity()) {
                        if (velocityX > 0) {
                            hideMenu();
                        } else {
                            showMenu();
                        }
                    } else {

                        toggleStatus();
                    }
                }
                if (mVelocityTracker != null) {
                    mVelocityTracker.recycle();
                    mVelocityTracker = null;
                }
                break;
            case MotionEvent.ACTION_CANCEL:
                toggleStatus();
                break;
        }
        mLastTouchX = event.getRawX();
        return true;
    }

    /**
     * 处理点击事件
     *
     * @param event
     */
    private void handleClickEvent(MotionEvent event) {

        int index = 0;
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
            if (isMotionEventInView(child, event)) {
                //如果点击的是主item,如果当前是菜单展开状态,则先收起菜单,并消费此次点击
                if (child == mCenterView && mStatus != STATUS_NORMAL) {

                    hideMenu();
                } else if (null != mOnItemClickListener) {

                    mOnItemClickListener.onItemClick(child, index, child == mCenterView);
                }
                break;
            }
            index++;
        }
    }

    /**
     * 判断点击事件是否在view中
     *
     * @param view
     * @param event
     * @return
     */
    private boolean isMotionEventInView(View view, MotionEvent event) {
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        int x = location[0];
        int y = location[1];
        boolean isBeyondLeft = event.getRawX() < x;
        boolean isBeyondTop = event.getRawY() < y;
        boolean isBeyondRight = event.getRawX() > (x + view.getMeasuredWidth());
        boolean isBeyondBottom = event.getRawY() > (y + view.getMeasuredHeight());
        return !isBeyondLeft && !isBeyondTop && !isBeyondRight && !isBeyondBottom;
    }

    private void toggleStatus() {
        int scrollThreshold = getMeasuredHeight();
        if (mScrollX < scrollThreshold) {

            hideMenu();
        } else if (mScrollX > scrollThreshold) {

            showMenu();
        }
    }

    /**
     * 显示菜单
     */
    private void showMenu() {

        mStatus = STATUS_EXPAND;
        updateScrollX(mMaxScrollDistance);
    }

    /**
     * 隐藏菜单
     */
    private void hideMenu() {

        mStatus = STATUS_NORMAL;
        updateScrollX(-mMaxScrollDistance);
    }

    private void updateScrollX(float distance) {

        float dx = mScrollX + distance;
        if (dx < mMinScrollDistance) {

            dx = mMinScrollDistance;
        } else if (dx > mMaxScrollDistance) {

            dx = mMaxScrollDistance;
        }
        mScrollX = dx;
        smoothScrollTo((int) dx, 0);
    }

    private void smoothScrollTo(int fx, int fy) {
        int dx = fx - mScroller.getFinalX();
        int dy = fy - mScroller.getFinalY();
        smoothScrollBy(dx, dy);
    }

    private void smoothScrollBy(int dx, int dy) {
        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy);
        invalidate();
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
        super.computeScroll();
    }

    public void setOnItemClickListener(OnItemClickListener listener) {
        mOnItemClickListener = listener;
    }

    public interface OnItemClickListener {
        void onItemClick(View view, int index, boolean isCenterView);
    }
}

布局文件  swip_delete.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv"
        android:layout_width="2000dp"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:padding="10dp"
        android:text="侧滑删除菜单" />

    <com.example.administrator.technologystackapp.activities.custom.Swipe2DeleteViewGroup
        android:id="@+id/swipe2delete"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@android:color/white">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="主布局" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_green_light"
            android:gravity="center"
            android:text="置顶"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_green_light"
            android:gravity="center"
            android:text="测试"
            android:textColor="@android:color/white"
            android:visibility="gone" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_red_light"
            android:gravity="center"
            android:text="删除"
            android:textColor="@android:color/white" />

    </com.example.administrator.technologystackapp.activities.custom.Swipe2DeleteViewGroup>
</LinearLayout>

 MainActivity.java 

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import com.example.administrator.technologystackapp.R;
import com.example.administrator.technologystackapp.activities.activity.manager.BaseActivity;
import com.example.administrator.technologystackapp.activities.custom.Swipe2DeleteViewGroup;

public class ActivitySwipe2delete extends BaseActivity {

    private Swipe2DeleteViewGroup mSwipe2Delete;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.swip_delete);
        mSwipe2Delete = (Swipe2DeleteViewGroup) findViewById(R.id.swipe2delete);
        mSwipe2Delete.setOnItemClickListener(new Swipe2DeleteViewGroup.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int index, boolean isCenterView) {
                if (view instanceof TextView) {
                    TextView textView = (TextView) view;
                    String str = textView.getText().toString();
                    Toast.makeText(ActivitySwipe2delete.this, String.format("%s , isCenterView: %s", str, isCenterView), Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

}

鸣谢

　　源代码是参考了CSDN大神的思路写出来的，但是他的博客地址，找不到了╮(￣▽￣")╭

　　不过感谢一下这位大神，代码我已经贡献出来了，各位看官请自便。