博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
高仿QQ6.0側滑菜单之滑动优化(二)
阅读量:6273 次
发布时间:2019-06-22

本文共 5661 字,大约阅读时间需要 18 分钟。

好了,昨天已经实现了高仿QQ6.0的側滑大致框架。如有兴趣。能够去看下

可是之前的实现。仅仅是简单的能够显示和隐藏左側的菜单,可是特别生硬,并且没有不论什么平滑的趋势,那么今天就来优化一下吧,加上平滑效果,并且能够依据手势滑动的方向来推断是否是显示和隐藏。

首先先来实现手势推断是否隐藏和显示

这里就要用到了一个方法了,例如以下:

这个是ViewDradHelper里面的方法:

/**         * 当view被释放的时候处理的事情(松手)         *         * @param releasedChild 被释放的子view         * @param xvel     水平方向的速度  帧每秒   向右为 +         * @param yvel     竖直方向的速度  向下为 +         */        @Override        public void onViewReleased(View releasedChild, float xvel, float yvel) {            Log.d("DragLayout", "xvel : " + xvel + " yvel :" + yvel);            super.onViewReleased(releasedChild, xvel, yvel);            //推断关闭和打开            //在这里我们首先推断什么时候打开,然后剩下的都是关闭状态            //首先是我的主面板的左側详细屏幕左側已经大于mRange/2的距离并且右滑的速度大于0,此时打开            if (xvel >= 0 && mMainContent.getLeft() > mRange / 2.0f) {                open();            } else if (xvel > 0) {                //另外一种就是我右滑的速度大于0(这里的速度自定义哈,依据自己想要实现的敏感度)                open();            } else {                //剩余的全部情况都是关闭                close();            }        }

close()方法(DragLayout里面的方法):

/**     * 关闭     */    public void close() {        int finalLeft = 0;        //调用layout方法,摆放主布局        /**         * @param l Left position, relative to parent         * @param t Top position, relative to parent         * @param r Right position, relative to parent         * @param b Bottom position, relative to parent         */        mMainContent.layout(finalLeft, 0, finalLeft + mWidth, finalLeft + mHeight);    }

open()方法(DragLayout里面的方法):

/**     * 打开     */    public void open() {        int finalLeft = mRange;        mMainContent.layout(finalLeft, 0, finalLeft + mWidth, finalLeft + mHeight);    }

这个是否就能够实现依据手势来推断是否打开和关闭了。

接下来我们就来实现怎样平滑的关闭和打开,话不多说。代码说话(这里对上面的open和close做了一些处理):
public void close() {        close(true);    }    /**     * 关闭     *     * @param isSmooth 是否平滑的关闭     */    public void close(boolean isSmooth) {        int finalLeft = 0;        if (isSmooth) {            /**             *  public boolean smoothSlideViewTo(View child, int finalLeft, int finalTop)方法的解释             *             * Animate the view child to the given (left, top) position.             * If this method returns true, the caller should invoke {@link #continueSettling(boolean)}             * on each subsequent frame to continue the motion until it returns false. If this method             * returns false there is no further work to do to complete the movement.             *             * 返回true  代表还没有移动到指定的位置,须要刷新界面,继续移动             * 返回false 就停止工作哈             */            //1、触发动画            if (mDragHelper.smoothSlideViewTo(mMainContent, finalLeft, 0)) {                //參数传this,也就是child所在的viewgroup                ViewCompat.postInvalidateOnAnimation(this);            }        } else {            //调用layout方法。摆放主布局            /**             * @param l Left position, relative to parent             * @param t Top position, relative to parent             * @param r Right position, relative to parent             * @param b Bottom position, relative to parent             */            mMainContent.layout(finalLeft, 0, finalLeft + mWidth, finalLeft + mHeight);        }    }    /**     * 打开     */    public void open(boolean isSmooth) {        int finalLeft = mRange;        if (isSmooth && mDragHelper.smoothSlideViewTo(mMainContent, finalLeft, 0)) {            //參数传this,也就是child所在的viewgroup            ViewCompat.postInvalidateOnAnimation(this);        } else {            mMainContent.layout(finalLeft, 0, finalLeft + mWidth, finalLeft + mHeight);        }    }    public void open() {        open(true);    }

来看下效果图吧(里面的白道问题是录屏导致,运行的没有这个哈):

这里写图片描写叙述

这个时候。基本上差点儿相同了。剩下的。我们就来加入一些状态和设置listener的方法,留给外面的调用吧。。代码非常easy:

/**     * 定义当前状态  默认是关闭状态     */    private Status mStatus = Status.CLOSE;    /**     * 状态枚举     * 关闭  CLOSE     * 打开  OPEN     * 拖拽  DRAGING     */    public enum Status {        CLOSE, OPEN, DRAGING;    }    private OnDragStatusListener mListener;    public void setDragStateListener(OnDragStatusListener listener) {        mListener = listener;    }    public interface OnDragStatusListener {
/** * 关闭逻辑 */ void onClose(); /** * 打开逻辑 */ void onOpen(); /** * 拖拽逻辑 * * @param percent */ void onDraging(float percent); }

状态更新。方法调用,这个dispatchDragEvent()在onViewPositionChanged()这种方法中调用一下即可。由于拖拽的时候状态时刻在变化,所以我们在这种方法中调用:

/**     * 状态更新方法运行     *      * @param newLeft     */    private void dispatchDragEvent(int newLeft) {        //得到的一个百分比        float percent = newLeft * 1.0f / mRange;        //0.0f--->1.0f        Log.d("DragLayout", "percent : " + percent);        if (mListener != null) {            mListener.onDraging(percent);        }        //跟新状态运行回调        Status lastStatus = mStatus;        mStatus = updateStatus(percent);        if (mStatus != lastStatus) {            //状态发生变化            if (mStatus == Status.CLOSE) {                //当前状态是关闭                if (mListener != null) {                    mListener.onClose();                }            } else if (mStatus == Status.OPEN) {                if (mListener != null) {                    mListener.onOpen();                }            }        }    }    /**     * 状态更新方法     *     * @param percent     * @return     */    private Status updateStatus(float percent) {        if (percent == 0) {            return Status.CLOSE;        } else if (percent == 1) {            return Status.OPEN;        }        return Status.DRAGING;    }

好了,到此为止,高仿QQ6.0側滑基本完毕。以下我们来看下效果吧。

这里写图片描写叙述
好了,这个側滑就这样完毕了。后期会加在主页中加入listview(尝试用RecycleView)实现左滑删除效果,如今附上该demo的地址,后期加入的也会更新至此。

如有问题。或者交流的话,能够QQ:1069584784。

你可能感兴趣的文章
话说模式匹配(5) for表达式中的模式匹配
查看>>
《锋利的SQL(第2版)》——1.7 常用函数
查看>>
《Arduino家居安全系统构建实战》——1.5 介绍用于机器学习的F
查看>>
jquery中hover()的用法。简单粗暴
查看>>
线程管理(六)等待线程的终结
查看>>
spring boot集成mongodb最简单版
查看>>
DELL EqualLogic PS存储数据恢复全过程整理
查看>>
《Node.js入门经典》一2.3 安装模块
查看>>
《Java 开发从入门到精通》—— 2.5 技术解惑
查看>>
Linux 性能诊断 perf使用指南
查看>>
实操分享:看看小白我如何第一次搭建阿里云windows服务器(Tomcat+Mysql)
查看>>
Sphinx 配置文件说明
查看>>
数据结构实践——顺序表应用
查看>>
python2.7 之centos7 安装 pip, Scrapy
查看>>
机智云开源框架初始化顺序
查看>>
Spark修炼之道(进阶篇)——Spark入门到精通:第五节 Spark编程模型(二)
查看>>
一线架构师实践指南:云时代下双活零切换的七大关键点
查看>>
ART世界探险(19) - 优化编译器的编译流程
查看>>
玩转Edas应用部署
查看>>
music-音符与常用记号
查看>>