NanBox

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

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

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

炸不炸!

其实实现起来超简单。

思路

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

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

旋转动画

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

关于 SpringAnimation,我之前的这篇会有更详细的介绍:

实现一个带下拉弹簧动画的 ScrollView

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* 设置展开按钮
*/
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 上的按钮,收起按钮则是菜单上的按钮。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/**
* 展开菜单
*/
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,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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,如果菜单按钮居中显示的话,可以使用:

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

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

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

1
android:rotation="90"

让图标旋转九十度。

代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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);
}
});

这样就完成啦,妥妥的。

源码地址