撸个侧滑控件

作者: Passon_Fang | 来源:发表于2018-01-25 13:47 被阅读8次

撸个侧滑控件
Item侧滑控件
DrawerLayout-侧滑菜单
你见过微信侧滑返回的联动效果，但开门效果、百叶窗效果见过吗？
安卓控件——DrawerLayout
MMDrawerController侧滑控件记录
ios侧滑菜单控件
侧滑效果[第二篇]：DrawerLayout源码分析
DrawerLayout(官方侧滑菜单)的简单使用
Android 新控件学习

title: 撸个侧滑控件
date: 2018-01-25 11:38:14
tags: [View]
categories: android

img

基本库

SlideFrameLayoutTranslation.class


public class SlideFrameLayoutTranslation extends FrameLayout implements View.OnClickListener {

    private static final String TAG = SlideFrameLayoutTranslation.class.getSimpleName();

    private static final int MOVE_TYPE_LEFT = 0;
    private static final int MOVE_TYPE_RIGHT = 1;
    private static final int MOVE_TYPE_TOP = 2;
    private static final int MOVE_TYPE_BOTTOM = 3;
    private static final int MOVE_TYPE_UNKNOW = -1;


    private static final int STATE_EXPAND = 0;
    private static final int STATE_CLOSE = 1;


    private int mExpandScrollX;
    private int mCloseScrollX = 0;


    private float mLastX;
    private float mLastY;
    private int mState;
    private View mConfirm;
    private View mCancel;
    /**
     * 背景 控件，滑动后看到的内容
     */
    private View mViewSlideBg;
    /**
     * 覆盖在背景之上的控件
     */
    private View mViewContent;

    public SlideFrameLayoutTranslation(@NonNull Context context) {
        this(context, null);
    }

    public SlideFrameLayoutTranslation(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SlideFrameLayoutTranslation(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        addBgView(context);
    }

    private void addBgView(Context context) {
        mViewSlideBg = LayoutInflater.from(context).inflate(R.layout.slide_bg, this, false);
        mConfirm = mViewSlideBg.findViewById(R.id.tv_confirm);
        mCancel = mViewSlideBg.findViewById(R.id.tv_cancel);
        mConfirm.setOnClickListener(this);
        mCancel.setOnClickListener(this);

        addView(mViewSlideBg);
    }

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

        View childAt = getChildAt(1);
        mViewContent = childAt;
//        mViewContent = ((RelativeLayout) findViewById(R.id.rl_content));
        mExpandScrollX = mConfirm.getMeasuredWidth() + mCancel.getMeasuredWidth();
    }

    private boolean isHandleTouchEvent;

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mLastX = ev.getX();
                mLastY = ev.getY();
                return false;
            case MotionEvent.ACTION_MOVE:
                float yDistance = ev.getY() - mLastY;
                float xDistance = ev.getX() - mLastX;
                mLastY = ev.getY();
                mLastX = ev.getX();

                int type = moveType(xDistance, yDistance);
                switch (type) {
                    case MOVE_TYPE_LEFT:
                        isHandleTouchEvent = true;
                        break;
                    case MOVE_TYPE_RIGHT:
                        isHandleTouchEvent = true;
                        break;
                    case MOVE_TYPE_TOP:
                        isHandleTouchEvent = false;
                        break;
                    case MOVE_TYPE_BOTTOM:
                        isHandleTouchEvent = false;
                        break;
                }
                break;
            case MotionEvent.ACTION_CANCEL:
                isHandleTouchEvent = false;
                break;
            case MotionEvent.ACTION_UP:
                isHandleTouchEvent = false;
                break;
        }

        if (isHandleTouchEvent) {
            requestDisallowInterceptTouchEvent(true);
        } else {
            requestDisallowInterceptTouchEvent(false);
        }
        return isHandleTouchEvent;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();

        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mLastX = event.getX();
                mLastY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:

                float yDistance = event.getY() - mLastY;
                float xDistance = event.getX() - mLastX;
                mLastY = event.getY();
                mLastX = event.getX();

                int type = moveType(xDistance, yDistance);
                switch (type) {
                    case MOVE_TYPE_LEFT:
                        contentScrollBy(-(int) xDistance, 0);

                        setState(STATE_EXPAND);
                        Log.d(TAG, "onTouchEvent: MOVE_TYPE_LEFT");
                        return true;
                    case MOVE_TYPE_RIGHT:
                        if (!canRightScroll()) {
                            return true;
                        }

                        contentScrollBy(-(int) xDistance, 0);
                        setState(STATE_CLOSE);

                        Log.d(TAG, "onTouchEvent: MOVE_TYPE_RIGHT");
                        return true;
                    case MOVE_TYPE_TOP:
                    case MOVE_TYPE_BOTTOM:
                        return false;
                }
                break;
            case MotionEvent.ACTION_CANCEL:
                autoScrollLayout();
                break;
            case MotionEvent.ACTION_UP:
                autoScrollLayout();
                break;
        }
        return true;
    }

    /**
     * 判断是否能够向右滑动
     * // close 状态，不能向右滑动
     */
    private boolean canRightScroll() {
        float translationX = mViewContent.getTranslationX();
        return translationX != 0;
    }

    private void contentScrollBy(int x, int y) {
        float translationX = mViewContent.getTranslationX() + -x;
        float translationY = mViewContent.getTranslationY() + -y;
        mViewContent.setTranslationX(translationX);
        mViewContent.setTranslationY(translationY);
    }

    /**
     * smooth 滑动
     */
    private void contentScrollTo(int x, int y) {
        ObjectAnimator translationXAnimator = ObjectAnimator.ofFloat(mViewContent, "translationX", mViewContent.getTranslationX(), x);
        ObjectAnimator translationYAnimator = ObjectAnimator.ofFloat(mViewContent, "translationY", mViewContent.getTranslationY(), y);
        translationXAnimator.start();
        translationYAnimator.start();
//        mViewContent.setTranslationX(-x);
//        mViewContent.setTranslationY(-y);
    }

    private int moveType(float x, float y) {
        int ret = MOVE_TYPE_UNKNOW;
//        Log.d(TAG, "moveType: x=" + x + ", y=" + y);
        if (Math.abs(x) > Math.abs(y)) {
            if (x > 0) {
                ret = MOVE_TYPE_RIGHT;
            } else {
                ret = MOVE_TYPE_LEFT;
            }
        } else {
            if (x > 0) {
                ret = MOVE_TYPE_BOTTOM;
            } else {
                ret = MOVE_TYPE_TOP;
            }
        }
        return ret;
    }


    public void resetState() {
        setStateAndScroll(STATE_CLOSE);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_confirm:
                Log.d(TAG, "onClick: Confirm");
                Toast.makeText(getContext(), "Confirm", Toast.LENGTH_SHORT).show();
                break;
            case R.id.tv_cancel:
                Log.d(TAG, "onClick: Cancel");
                Toast.makeText(getContext(), "Cancel", Toast.LENGTH_SHORT).show();
                break;
        }
    }


    public void setState(int state) {
        mState = state;
    }

    public void setStateAndScroll(int state) {
        mState = state;
        autoScrollLayout();
    }

    private void autoScrollLayout() {
        switch (mState) {
            case STATE_EXPAND:
                contentScrollTo(-mExpandScrollX, 0);
                break;
            case STATE_CLOSE:
                contentScrollTo(-mCloseScrollX, 0);
                break;
        }
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        Log.d(TAG, "onAttachedToWindow: ");
    }

    /**
     * 在 RecyclerView 中使用这个布局的时候
     * 当 Item 滑出屏幕 重置 Item 的状态，防止 Item 复用导致视图错误
     */
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        resetState();
        Log.d(TAG, "onDetachedFromWindow: ");
    }
}

slide_bg.xml


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_confirm"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:background="@android:color/holo_green_dark"
        android:gravity="center"
        android:text="Confirm"
        app:layout_constraintRight_toLeftOf="@id/tv_cancel"/>

    <TextView
        android:id="@+id/tv_cancel"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:background="@android:color/holo_red_dark"
        android:gravity="center"
        android:text="Cancel"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

使用

使用方式：

    <com.fangmingdong.androiddemo.recyclerViewSideScroll.SlideFrameLayoutTranslation
        android:id="@+id/sfl"
        android:layout_width="match_parent"
        android:layout_height="80dp"        
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RelativeLayout
            android:id="@+id/rl_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            android:clickable="true"
            android:focusable="true">

            <TextView
                android:id="@+id/tv_slide_scroll_item"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/holo_green_dark"
                android:gravity="center"
                android:text="Text"/>

            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@mipmap/ic_launcher"/>

        </RelativeLayout>

    </com.fangmingdong.androiddemo.recyclerViewSideScroll.SlideFrameLayoutTranslation>

android:clickable="true", android:clickable="true" 属性必须添加，保证点击事件不会穿透
在使用的时候必须使用布局控件(RelativeLayout,LinearLayout)作为子控件, 自定义View中通过 View childAt = getChildAt(1); 获取这个 View

知识点小结

通过 View childAt = getChildAt(1); 获取使用者添加的 View，然后对 View 进行滑动处理
滑动实现方式：通过属性动画控制 translationX, translationY 实现
在 RecyclerView 中使用的时候通过在 onDetachedFromWindow 方法中重置自定义View 的状态来防止控件复用导致的 bug
在 RecyclerView 中使用的时候，通过 requestDisallowInterceptTouchEvent(true); | requestDisallowInterceptTouchEvent(false); 获取更好的触摸效果

撸个侧滑控件
title: 撸个侧滑控件date: 2018-01-25 11:38:14tags: [View]categor...
Item侧滑控件
原文地址：https://github.com/anzaizai/EasySwipeMenuLayout 使用步骤...
DrawerLayout-侧滑菜单
DrawerLayout是在android.support.v4包下，实现了侧滑菜单效果的控件。是第三方侧滑控件如...
你见过微信侧滑返回的联动效果，但开门效果、百叶窗效果见过吗？
SmartSwipe是一个Android侧滑处理框架，它封装了对控件侧滑事件（上/下/左/右4个方向滑动的手势事件...
安卓控件——DrawerLayout
有些安卓应用喜欢用侧滑菜单来作为用户信息页的入口，安卓官方提供了一个侧滑菜单控件——DrawerLayout，来实...
MMDrawerController侧滑控件记录
在网上看到一个好用的控件，找到一篇中文翻译，记录一下，万一以后用的到呢？转载文章地址：http://www.th7...
ios侧滑菜单控件
先上效果图把：项目有这个需求，之前是别人做的效果不太好，后来需要重写，但还是不是我负责，但是那段时间不算很忙，也...
侧滑效果[第二篇]：DrawerLayout源码分析
DrawerLayout是Google官方提供的侧滑栏控件，它的侧滑效果如果用在其它View上会有优化Androi...
DrawerLayout(官方侧滑菜单)的简单使用
本节引言：本节给大家带来基础UI控件部分的最后一个控件：DrawerLayout，官方给我们提供的一个侧滑菜单 ...
Android 新控件学习
Android新控件 DrawerLayout 顶层容器，通常与NavigationView实现侧滑菜单 Navi...