我把 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);
}
});这样就完成啦，妥妥的。
腾讯云开发者
