专栏首页NanBox我把 Toolbar 转了一下变成了菜单

我把 Toolbar 转了一下变成了菜单

侧滑菜单我们见的太多了,有没有想过有别的方式弹出菜单? 比如,让 Toolbar 变成菜单?

我也不知道怎么描述这个效果了,直接放效果图吧:

炸不炸!

其实实现起来超简单。

思路

看上去好像 Toolbar 变成了菜单,但大家也能猜到,这里面的旋转菜单其实和 Toolbar 是两个控件,左上角的菜单按钮也是也是两个按钮,只不过在同样的位置放了同样的图片。

所以我自定义了一个旋转控件 SpringRotateMenu,继承 FrameLayout,在这里面实现旋转动画及手势操作。

旋转动画

Gif 图可能不明显,菜单展开和收起的时候是会抖一下的,有一种「DUANG」的感觉。是不是有种弹簧的感觉?没错,我用的就是新出的弹簧动画(SpringAnimation)。

SpringAnimation 支持平移、缩放、旋转等效果,这次我们用到的是它的旋转效果。

我们先定义展开和收起状态的两个角度:

private final static int ROTATE_EXPAND = 0;
private final static int ROTATE_COLLAPSE = -90;

然后这样来获取旋转弹簧动画:

expandAnimation = new SpringAnimation(this, SpringAnimation.ROTATION, ROTATE_EXPAND);
collapseAnimation = new SpringAnimation(this, SpringAnimation.ROTATION, ROTATE_COLLAPSE);

需要注意的是第三个参数。在平移动画里面,第三个参数是偏移量,而在旋转动画里面代表的是度数。在这里我定义了展开动画(旋转到0°)及收起动画(旋转到 -90°)。

然后提供两个方法来设置展开和收起的按钮:

/**
 * 设置展开按钮
 */
public void setExpandButton(View expandButton) {
    expandButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            expand();
        }
    });
}

/**
 * 设置折叠按钮
 */
public void setCollapseButton(View collapseButton) {
    collapseButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            collapse();
        }
    });
}

展开按钮就是 Toolbar 上的按钮,收起按钮则是菜单上的按钮。

展开、收起的方法也很简单:

/**
 * 展开菜单
 */
public void expand() {
    setVisibility(VISIBLE);
    expandAnimation.start();
    if (listener != null) {
        listener.expandBegin();
        collapseAnimation.addEndListener(new DynamicAnimation.OnAnimationEndListener() {
            @Override
            public void onAnimationEnd(DynamicAnimation animation,
                                       boolean canceled,
                                       float value,
                                       float velocity) {
                setVisibility(INVISIBLE);
                listener.expandEnd();
            }
        });
    }
}

/**
 * 折叠菜单
 */
public void collapse() {
    collapseAnimation.start();
    if (listener != null) {
        listener.collapseBegin();
        collapseAnimation.addEndListener(new DynamicAnimation.OnAnimationEndListener() {
            @Override
            public void onAnimationEnd(DynamicAnimation animation,
                                       boolean canceled,
                                       float value,
                                       float velocity) {
                listener.collapseEnd();
            }
        });
    }
}

其实就是让对应的动画执行,菜单在开始展开的时候显示,在完全收起的时候隐藏。至于这里的 listener 是我加的一个动画监听器,监听两个动画的开始和结束,供外部使用。

手势操作

手势操作就是重写 onTouchEvent,代码如下:

private float mDownX;

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (expandAnimation.isRunning() || collapseAnimation.isRunning()) {
        return super.onTouchEvent(event);
    }
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mDownX = event.getRawX();
            break;
        case MotionEvent.ACTION_MOVE:
            //滑动距离
            float deltaX = event.getRawX() - mDownX;
            //设置角度
            float rotation = (deltaX / (screenWidth * 0.8f)) * ROTATE_COLLAPSE;
            if (rotation <= ROTATE_EXPAND && rotation >= ROTATE_COLLAPSE) {
                setRotation(rotation);
            } else if (rotation > ROTATE_EXPAND) {
                setRotation(ROTATE_EXPAND);
            } else if (rotation < ROTATE_COLLAPSE) {
                setRotation(ROTATE_COLLAPSE);
            }
            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            if (getRotation() < ROTATE_COLLAPSE / 3) {
                collapse();
            } else {
                expand();
            }
            break;
    }
    return true;
}

核心就是将手指的横向滑动距离转换为旋转角度。我的计算方法是,菜单控件的旋转角度,等于横向滑动距离占屏幕宽度的比例,乘以 -90°。至于为什么宽度要乘以 0.8,我是为了让手指在屏幕上滑过 80% 的宽度,就可以将菜单完全收起。

还有就是手指抬起时的处理。我觉得在用户向右滑动菜单时,大部分情况下是希望将菜单收起的,应该让它更容易收起。所以我的做法是,当手指抬起时,菜单竖直的角度超过 30°,就让它执行收起的动画,否则执行展开的动画。

使用

布局

使用 SpringRotateMenu 作为旋转菜单的根布局,并设置控件的旋转中心点。默认的 Toolbar 高度为 56dp,如果菜单按钮居中显示的话,可以使用:

android:transformPivotX="28dp"
android:transformPivotY="28dp"

然后用 FrameLayout 将它覆盖在 Toolbar 上面。

建议让菜单布局的背景颜色和 Toolbar 的颜色一致,并使用同一个菜单图标,菜单图标里面加一个参数:

android:rotation="90"

让图标旋转九十度。

代码

在代码里面找到我们的 SpringRotateMenu,然后简单的设置一下,比如这样:

springRotateMenu.setExpandButton(findViewById(R.id.iv_menu));
springRotateMenu.setCollapseButton(springRotateMenu.findViewById(R.id.iv_menu));
springRotateMenu.setAnimationListener(new SpringRotateMenu.OnAnimationListener() {

    @Override
    public void expandBegin() {
        toolbar.setVisibility(View.INVISIBLE);
    }

    @Override
    public void expandEnd() {

    }

    @Override
    public void collapseBegin() {

    }

    @Override
    public void collapseEnd() {
        toolbar.setVisibility(View.VISIBLE);
    }
});

这样就完成啦,妥妥的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现一个带浮动标签的输入框

    现在带浮动标签的输入框也是一个很常见的东西了,在材料设计里面有一个 TextInputLayout 的控件,我们可以用它实现这个效果。但是材料设计控件的样式比较...

    NanBox
  • Anroid Wear OS 手表应用开发 - UI

    智能手表相对手机来说,由于使用场景不同,且屏幕较小,所以应用的设计、交互和手机是有些区别的。相对来说,布局会更简洁,更多地使用滑动手势进行操作。

    NanBox
  • 实现列表悬浮标签「顶上去」的效果

    列表顶部的标签悬浮大家应该都知道,但「顶上去」是个啥玩意? 看一下效果图就知道了,注意看顶部的悬浮标签切换时的效果:

    NanBox
  • Jmeter4.0接口测试之WebServices(四)

    关于什么是web services,可以到W3C中查看详细的信息,本文章主要介绍使用Jmeter怎么来做web services的接口测试,首先...

    无涯WuYa
  • JavaWeb(六)Listener监听器

    监听器 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立...

    二十三年蝉
  • 之状态模式学习篇

    最近在公司闲着没事干,看了一下<<Head First设计模式>>一书,感觉还蛮有意思,设计模式涉及到OO的设计思想和OO的设计原则。这本书是采用Java语...

    ccf19881030
  • Android监听屏幕锁屏

    郑重声明:本文转载自:http://www.cnblogs.com/zhaoyanjun

    IT大飞说
  • 教你实现最简单的QQ消息item侧滑菜单

    这次跟大家介绍怎么简单的实现类似QQ消息Item的左右滑动菜单的实现。首先见效果图先:

    HelloJack
  • Mockito和PowerMock用法

    在单元测试中,我们往往想去独立地去测一个类中的某个方法,但是这个类可不是独立的,它会去调用一些其它类的方法和service,这也就导致了以下两个问题:外部服务可...

    一滴水的眼泪
  • JS-DOM2级封装练习题--点击登录弹出登录对话框

    xing.org1^

扫码关注云+社区

领取腾讯云代金券