Android侧滑菜单实现

作者：squareEnxi_571 | 来源：互联网 | 2023-05-18 08:55

之前都一直是看郭大神的博客，也就看到了那个仿人人网的侧滑菜单，但是感觉太冗杂，权当理解原理最好不过。后来实际开发过程中也要用到，我就想可不可以自己写一个，自制侧滑侧单，既可以左侧滑出，

之前都一直是看郭大神的博客，也就看到了那个仿人人网的侧滑菜单，但是感觉太冗杂，权当理解原理最好不过。后来实际开发过程中也要用到，我就想可不可以自己写一个，自制侧滑侧单，既可以左侧滑出，也可以从右侧滑出，或者是双向滑动的，那该多好啊，于是，我就上路了。。。

在此我得知android本身就有一个类Scroller，用于处理布局内容的滑动，然后就一探究竟（这里面尤其值得注意滑动的偏移量与屏幕坐标系是相反的，详情可自行科普），用这个类的确省了好多事，那我也废话不多说，先上源码：

package com.cjt_pc.myslidingmenu;

import android.content.Context;
import android.graphics.Color;
import android.graphics.Point;
import android.support.annotation.NonNull;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
import android.widget.FrameLayout;
import android.widget.RelativeLayout;
import android.widget.Scroller;

/**
 * Created by cjt-pc on 2015/7/27.
 * Email:879309896@qq.com
 */
public class SlidingLayout extends FrameLayout {

    // 滚动显示和隐藏menu时，手指滑动需要达到的速度
    public static final int SNAP_VELOCITY = 400;
    // 手指横向滑动临界距离，判断滑动类型
    public static final int SCROLL_DIS = 20;
    // 上下文
    private Context mContext;
    // 左中右三个layout
    private BaseSlideLayout leftSlideLayout, middleSlideLayout, rightSlideLayout;
    // 中间内容的“面罩”
    private BaseSlideLayout maskLayout;
    // 是否开启滑动渐变效果，默认为true
    private boolean isOnAlpha= true;
    // 渐变程度，1代表满足条件时完全不透明
    private float alphaRate = 0.5f;
    // 手指按下的坐标
    private int downX, downY;
    // 当前手指触摸屏幕的点
    private Point point;
    // 用于计算手指滑动的速度
    private VelocityTracker mVelocityTracker;
    // 滚动控制器
    private Scroller mScroller;
    // 手指移动类型是否为横向滑动
    private boolean isLeftRight = false;
    // 是否计算了滑动类型
    private boolean isCalTyped = false;
    // 是否屏蔽所有事件
    private boolean isIntercept = false;
    // 手指是否抬起
    private boolean fingerUp = true;
    // 视图移动的距离范围，注意这是偏移量，正负与坐标相反
    private int minX = 0, maxX = 0;
    // 侧边菜单的宽度比例，默认为主界面的0.8
    private double widthRate = 0.8;
    // 侧边菜单的宽度
    private int menuWidth = 0;

    public SlidingLayout(Context context) {
        super(context);
        mCOntext= context;
        mScroller = new Scroller(context, new DecelerateInterpolator());
        point = new Point();
        // 设置clickable可以使dispatchTouchEvent恒为true
        this.setClickable(true);
    }

    public SlidingLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int finalX = 0;
        // 分别给存在的layout设置大小
        if (middleSlideLayout != null) {
            middleSlideLayout.measure(widthMeasureSpec, heightMeasureSpec);
            maskLayout.measure(widthMeasureSpec, heightMeasureSpec);
            menuWidth = (int) (middleSlideLayout.getMeasuredWidth() * widthRate);
            finalX = (MeasureSpec.makeMeasureSpec(menuWidth, MeasureSpec.EXACTLY));
        }

        if (leftSlideLayout != null) {
            leftSlideLayout.measure(finalX, heightMeasureSpec);
        }
        if (rightSlideLayout != null) {
            rightSlideLayout.measure(finalX, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (middleSlideLayout != null) {
            middleSlideLayout.layout(l, t, r, b);
            maskLayout.layout(l, t, r, b);
        }
        if (leftSlideLayout != null) {
            leftSlideLayout.layout(l - leftSlideLayout.getMeasuredWidth(), t, l, b);
            minX = -leftSlideLayout.getMeasuredWidth();
        }
        if (rightSlideLayout != null) {
            rightSlideLayout.layout(r, t, r + rightSlideLayout.getMeasuredWidth(), b);
            maxX = rightSlideLayout.getMeasuredWidth();
        }
    }

    @Override
    public boolean dispatchTouchEvent(@NonNull MotionEvent ev) {
        createVelocityTracker(ev);
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                fingerUp = false;
                downX = (int) ev.getX();
                downY = (int) ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                int dX = (int) (ev.getX() - point.x);
                // 当滑动距离超过了计算滑动类型最小值，判断是否为左右滑动，只计算一次
                if (!isCalTyped && ((Math.abs((int) ev.getX() - downX) >= SCROLL_DIS) ||
                        Math.abs((int) ev.getY() - downY) >= SCROLL_DIS)) {
                    if (Math.abs(ev.getX() - downX) > Math.abs(ev.getY() - downY)) {
                        isLeftRight = true;
                    }
                    isCalTyped = true;
                }
                if (isLeftRight) {
                    isIntercept = true;
                    int expectX = getScrollX() - dX;
                    // 左右滑动的最小和最大值
                    if (expectX >= minX && expectX <= maxX) {
                        // 只有视图在滑动的时候让当前视图屏蔽掉所有控件事件
                        // 滚动视图到指定点
                        scrollBy(-dX, 0);
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                fingerUp = true;
                isLeftRight = false;
                isCalTyped = false;
                beginStart();
                invalidate();
                recycleVelocityTracker();
                break;
            default:
                break;
        }
        point.x = (int) ev.getX();
        point.y = (int) ev.getY();
        return super.dispatchTouchEvent(ev);
    }

    @Override
    public void scrollTo(int x, int y) {
        super.scrollTo(x, y);
        if (isOnAlpha) {
            int curScroX = Math.abs(getScrollX());
            float scale = curScroX / (float) menuWidth;
            if (middleSlideLayout != null) {
                maskLayout.setAlpha(scale * alphaRate);
            }
        }
    }

    // 手指抬起时判断情况滚动视图到指定点
    private void beginStart() {
        int curScroX = getScrollX();
        int cpX = menuWidth >> 1;
        int moveSp = getScrollVelocity();
        // 当手指移动速度满足要求时换一种判断方式
        if (Math.abs(moveSp)             if (curScroX >= -cpX && curScroX <0) {//左侧菜单缩进
                mScroller.startScroll(curScroX, 0, -curScroX, 0);
            } else if (curScroX <-cpX) {//左侧菜单展出
                mScroller.startScroll(curScroX, 0, -menuWidth - curScroX, 0);
            } else if (curScroX > 0 && curScroX <= cpX) {//右侧菜单缩进
                mScroller.startScroll(curScroX, 0, -curScroX, 0);
            } else if (curScroX > cpX) {//右侧菜单展出
                mScroller.startScroll(curScroX, 0, menuWidth - curScroX, 0);
            }
        } else {
            if (moveSp <0 && getScrollX() <0 && getScrollX() > -menuWidth) {
                mScroller.startScroll(curScroX, 0, -curScroX, 0);
            } else if (moveSp > 0 && getScrollX() <0 && getScrollX() > -menuWidth) {
                mScroller.startScroll(curScroX, 0, -menuWidth - curScroX, 0);
            } else if (moveSp > 0 && getScrollX() > 0 && getScrollX()                 mScroller.startScroll(curScroX, 0, -curScroX, 0);
            } else if (moveSp <0 && getScrollX() > 0 && getScrollX()                 mScroller.startScroll(curScroX, 0, menuWidth - curScroX, 0);
            }
        }
    }

    /**
 * 初始化VelocityTracker对象，并将触摸滑动事件加入到VelocityTracker当中
 *
 * @param event 触摸滑动事件
 */
    private void createVelocityTracker(MotionEvent event) {
        if (mVelocityTracker == null) {
            mVelocityTracker = VelocityTracker.obtain();
        }
        mVelocityTracker.addMovement(event);
    }

    /**
 * 获取手指在content界面滑动的速度
 *
 * @return 滑动速度，以每秒钟移动了多少像素值为单位
 */
    private int getScrollVelocity() {
        mVelocityTracker.computeCurrentVelocity(1000);
        return (int) mVelocityTracker.getXVelocity();
    }

    /**
 * 回收VelocityTracker对象。
 */
    private void recycleVelocityTracker() {
        mVelocityTracker.recycle();
        mVelocityTracker = null;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return isIntercept;
    }

    // scrollTo就会触发该事件，scrollBy为scrollTo的重写方法
    @Override
    public void computeScroll() {// 动画绘制方法
        super.computeScroll();

        if (fingerUp) {
            if (!mScroller.computeScrollOffset()) {// 滑动完成
                isIntercept = false;
                // 滑动结束如若在两端就屏蔽掉中间layout事件
                middleSlideLayout.isIntercept =
                        (Math.abs(mScroller.getFinalX()) == menuWidth);
                return;
            }
            int tempX = mScroller.getCurrX();
            scrollTo(tempX, 0);
            postInvalidate();
        }
    }

    public void setLeftSlideLayout(View view) {
        if (leftSlideLayout == null) {
            leftSlideLayout = new BaseSlideLayout(mContext);
            leftSlideLayout.addView(view);
            this.addView(leftSlideLayout);
        }
    }

    public void setMiddleSlideLayout(View view) {
        if (middleSlideLayout == null) {
            middleSlideLayout = new BaseSlideLayout(mContext);
            middleSlideLayout.addView(view);
            middleSlideLayout.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    int curScroX = getScrollX();
                    mScroller.startScroll(curScroX, 0, -curScroX, 0);
                }
            });
            this.addView(middleSlideLayout);
            maskLayout = new BaseSlideLayout(mContext);
            maskLayout.setBackgroundColor(Color.GRAY);
            // float类型，0-1，完全透明-完全不透明
            maskLayout.setAlpha(0.0f);
            this.addView(maskLayout);
        }
    }

    public void setRightSlideLayout(View view) {
        if (rightSlideLayout == null) {
            rightSlideLayout = new BaseSlideLayout(mContext);
            rightSlideLayout.addView(view);
            this.addView(rightSlideLayout);
        }
    }

    public void setOnAlpha(boolean onAlpha) {
        this.isOnAlpha= onAlpha;
    }

    public void setAlphaRate(float rate) {
        this.alphaRate = rate;
    }

    public void setWidthRate(double rate) {
        this.widthRate = rate;
    }

    private class BaseSlideLayout extends RelativeLayout {

        private boolean isIntercept = false;

        public BaseSlideLayout(Context context) {
            super(context);
        }

        public BaseSlideLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
        }

        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) {
            return isIntercept;
        }
    }
}

很清楚这是一个FrameLayout类，这里就是一个可自定义功能的布局。里面注释已经写的很清楚了，我还是先介绍一下这个里面提供的公共方法：

setLeftSlideLayout(View view)：设置左侧菜单
setMiddleSlideLayout(View view)：设置中间内容
setRightSlideLayout(View view)：设置右侧菜单
setOnAlpha(boolean onAlpha)：是否开启滑动时中间模糊处理
setAlphaRate(float rate)：设置模糊处理程度
setWidthRate(double rate)：设置菜单布局宽度系数
具体使用方法呢，也非常的简单，首先将这个类添加到你的工程中，然后在要展示的Activity中的onCreate方法中：

    SlidingLayout slidingLayout = new SlidingLayout(this);
    slidingLayout.setLeftSlideLayout(new LinearLayout(this));
    slidingLayout.setMiddleSlideLayout(new LinearLayout(this));
    slidingLayout.setRightSlideLayout(new LinearLayout(this));
    slidingLayout.setOnAlpha(true);
    slidingLayout.setAlphaRate(0.6f);
    slidingLayout.setWidthRate(0.6);
    setContentView(slidingLayout);

当然，你也可以有自己的想法，仿qq侧滑？完全可以，源码都给你了，自己去慢慢研究吧，^_^

推荐阅读

string
深入解析 Lifecycle 的实现原理

本文将详细介绍 Android Jetpack 中 Lifecycle 组件的实现原理，帮助开发者更好地理解和使用 Lifecycle，避免常见的内存泄漏问题。 ... [详细]

蜡笔小新 2024-11-12 14:05:19
text
Spring – Bean Life Cycle

Spring – Bean Life Cycle ... [详细]

蜡笔小新 2024-11-13 13:24:40
text
Android 自定义 RecycleView 左滑上下分层示例代码

为了满足项目需求，需要在多个场景中实现左滑删除功能，并且后续可能在列表项中增加其他功能。虽然网络上有很多左滑删除的示例，但大多数封装不够完善。因此，我们尝试自己封装一个更加灵活和通用的解决方案。 ... [详细]

蜡笔小新 2024-11-13 17:43:59
text
Java 编程错误：对象无法转换为 long 类型

本文介绍了在 Java 编程中遇到的一个常见错误：对象无法转换为 long 类型，并提供了详细的解决方案。 ... [详细]

蜡笔小新 2024-11-13 10:57:24
include
解决Only fullscreen opaque activities can request orientation错误的方法

本文介绍了在使用PictureSelectorLight第三方框架时遇到的Only fullscreen opaque activities can request orientation错误，并提供了一种有效的解决方案。 ... [详细]

蜡笔小新 2024-11-13 09:46:25
get
获取父类参数类型工具类

packagecom.panchan.tsmese.utils;importjava.lang.reflect.ParameterizedType;importjava.lang. ... [详细]

蜡笔小新 2024-11-15 09:33:44
express
Java设计模式详解：解释器模式的应用与实现

本文详细介绍了Java设计模式中的解释器模式，包括其定义、应用场景、优缺点以及具体的实现示例。通过音乐解释器的例子，帮助读者更好地理解和应用这一模式。 ... [详细]

蜡笔小新 2024-11-14 21:00:34
text
Android Studio SQLite 数据库增删改查简单（代码参考）

一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]

蜡笔小新 2024-11-14 11:01:49
string
JVM钩子函数的应用场景详解

本文详细介绍了JVM钩子函数的多种应用场景，包括正常关闭、异常关闭和强制关闭。通过具体示例和代码演示，帮助读者更好地理解和应用这一机制。适合对Java编程和JVM有一定基础的开发者阅读。 ... [详细]

蜡笔小新 2024-11-13 18:34:48
get
JUC（三）：深入解析AQS

本文详细介绍了Java并发工具包中的核心类AQS（AbstractQueuedSynchronizer），包括其基本概念、数据结构、源码分析及核心方法的实现。 ... [详细]

蜡笔小新 2024-11-13 15:40:34
string
Java 中如何将多参数方法传递给使用 List 的 Function

本文探讨了如何在 Java 中将多参数方法通过 Lambda 表达式传递给一个接受 List 的 Function。具体分析了 `OrderUtil` 类中的 `runInBatches` 方法及其使用场景。 ... [详细]

蜡笔小新 2024-11-12 22:25:23
include
单片微机原理P3：80C51外部拓展系统

　　外部拓展其实是个相对来说很好玩的章节，可以真正开始用单片机写程序了，比较重要的是外部存储器拓展，81C55拓展，矩阵键盘，动态显示，DAC和ADC。0.IO接口电路概念与存 ... [详细]

蜡笔小新 2024-11-12 19:51:29
text
oracle c3p0 dword 60,web_day10 dbcp c3p0 dbutils

createdatabasemydbcharactersetutf8;alertdatabasemydbcharactersetutf8;1.自定义连接池为了不去经常创建连接和释放 ... [详细]

蜡笔小新 2024-11-12 19:26:15
text
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
chat
使用Python和smtplib实现邮件发送功能

本文详细介绍了如何使用Python中的smtplib库来发送带有附件的邮件，并提供了完整的代码示例。作者：多测师_王sir，时间：2020年5月20日 17:24，微信：15367499889，公司：上海多测师信息有限公司。 ... [详细]

蜡笔小新 2024-11-12 12:21:27

squareEnxi_571

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章