出处：
炎之铠邮箱：yanzhikai_yjk@qq.com
博客地址：http://blog.csdn.net/totond
本文原创，转载请注明本出处！
本项目GitHub地址：https://github.com/totond/YMenuView
欢迎 Star or Fork！
前言
之前把我项目用到的类似于PathView的菜单YMenuView抽离出来，分享了实现思路，但是只是实现了在右下角的几种菜单弹出收回的效果，限制太大，适用性不强。这次重温了一下设计模式之后把YMenuView回炉再造，重构代码，打造出一个可以让用户发挥自己自由想象，实现自己想法需求的灵活YMenuView2.0，还加了3个自定义YMenu的例子，先来看看看效果：
（前面几个是之前YMenuView1.x的效果，后面是新加的）
介绍
YMenuView是包含着一个MenuButton和若干个OptionButton的RelativeLayout，具体实现原理前一篇已经有介绍了，所以这篇文章主要说明YMenuView2.0的改变（使用方法的话可以直接看Github。YMenuView2.0重构代码之后，最大的改变就是把YMenuView的大部分逻辑抽离出来，留下4个主要的抽象方法，可以让用户自定义，这4个分别是决定：MenuButton的位置、OptionButton的位置、OptionButton的显示动画和OptionButton的消失动画。
重构过程
抽象类YMenu
YMenuView2.0的主角不再是YMenuView类，现在的它只是一个小弟（子类），真正的大哥现在叫YMenu（父类）
最近正在学习Animation的源码，得知Animation是一个抽象类，然后其他具体的动画时通过继承它，然后重写applyTransformation()方法来实现具体的动画需求，这是模板方法模式的应用（其实Activity也这样），所以YMenuView也参考这种模式，把一些次要的逻辑抽象出来，放都在抽象父类YMenu里面，开放出4个抽象方法给用户可以通过继承来自定义YMenu：
/**
* 设置MenuButton的位置,重写该方法进行自定义设置
*
* @param menuButton 传入传入MenuButton，此时它的宽高位置属性还未设置，需要在此方法设置。
*/
public abstract void setMenuPosition(View menuButton);
/**
* 设置OptionButton的位置,重写该方法进行自定义设置
*
* @param optionButton 传入OptionButton，此时它的宽高位置属性还未设置，需要在此方法设置。
* @param menuButton 传入MenuButton，此时它已经初始化完毕，可以利用。
* @param index 传入的是该OptionButton的索引，用于区分不同OptionButton。
*/
public abstract void setOptionPosition(OptionButton optionButton, View menuButton, int index);
/**
* 设置OptionButton的显示动画,重写该方法进行自定义设置
*
* @param optionButton 传入了该动画所属的OptionButton，此时它的宽高位置属性已初始化完毕，可以利用。
* @param index 传入的是该OptionButton的索引，用于区分不同OptionButton。
* @return 返回的是创建好的动画
*/
public abstract Animation createOptionShowAnimation(OptionButton optionButton, int index);
/**
* 设置OptionButton的消失动画,重写该方法进行自定义设置
*
* @param optionButton 传入了该动画所属的OptionButton，此时它的宽高位置属性已初始化完毕，可以利用。
* @param index 传入的是该OptionButton的索引，用于区分不同OptionButton。
* @return 返回的是创建好的动画
*/
public abstract Animation createOptionDisappearAnimation(OptionButton optionButton, int index);
YMenu有4个具体实现类（效果都在上面的gif图里展现过了）：
抽象方法的实现
这4个方法抽象出来之后，由子类实现功能，下面介绍如何实现（以下的4个方法介绍的代码是在YMenuView里面的）：
1.setMenuPosition()方法
此方法的实现决定了MenuButton的位置，MenuButton就是上面效果图那个齿轮，点击之后会有选项出现消失的动作。在上一篇YMenuView源码分析里面就已经写到，它的位置是用Relative的LayoutParams来设置的（和上一篇有点不同就是因为是从抽象父类获取属性，所以要用一些get方法，而且我还重命名了一些属性，具体可以在Github的使用介绍属性表查看）：
@Override
public void setOptionPosition(OptionButton optionButton, View menuButton, int index){
LayoutParams layoutParams = new LayoutParams(getYMenuButtonWidth(), getYMenuButtonHeight());
layoutParams.setMarginEnd(getYMenuToParentXMargin());
layoutParams.bottomMargin = getYMenuToParentYMargin();
layoutParams.addRule(ALIGN_PARENT_RIGHT);
layoutParams.addRule(ALIGN_PARENT_BOTTOM);
menuButton.setLayoutParams(layoutParams);
}
但是这样使用LayoutParams的话理解起来很不直观（其实熟悉RelativeLayout的还好），如果让用户自定义的话会有点麻烦，所以我把这个过程参考建造者模式封装成了一个类MenuPositionBuilder，通过它来实现这个位置的设置过程。
@Override
public void setMenuPosition(View menuButton){
new MenuPositionBuilder(menuButton)
//设置宽高
.setWidthAndHeight(getYMenuButtonWidth(), getYMenuButtonHeight())
//设置参考方向
.setMarginOrientation(PositionBuilder.MARGIN_RIGHT,PositionBuilder.MARGIN_BOTTOM)
//设置是否在XY方向处于中心
.setIsXYCenter(false,false)
//设置XY方向的参考，如果设置了MARGIN_LEFT和MARGIN_TOP，那么XMargin和YMargin就是与参照物左边界和上边界的距离
.setXYMargin(getYMenuToParentXMargin(),getYMenuToParentYMargin())
//最后确认时候调用
.finish();
}
这样的话感觉就清晰一些了，当然有人如果熟悉了RelativeLayout参数的话，可能会觉得比原来复杂了，也可以用上面的写法，这两者是等价的。至于MenuPositionBuilder的实现过程，运用的建造者模式，比较简单，由于篇幅原因这里就不写了，有兴趣的话可以直接到项目Github地址上查看源码。
2.setOptionPosition()方法
此方法的实现决定了那些选项OptionButton的位置，这里是YMenuView的实现：
@Override
public void setOptionPosition(OptionButton optionButton, View menuButton, int index){
//设置动画模式和时长
optionButton.setSD_Animation(getOptionSD_AnimationMode());
optionButton.setDuration(getOptionSD_AnimationDuration());
//计算OptionButton的位置
int position = index % getOptionColumns();
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
getYOptionButtonWidth()
, getYOptionButtonHeight());
layoutParams.rightMargin = getYOptionToParentXMargin()
+ getYOptionXMargin() * position
+ getYOptionButtonWidth() * position;
layoutParams.bottomMargin = getYOptionToParentYMargin()
+ (getYOptionButtonHeight() + getYOptionYMargin())
* (index / getOptionColumns());
layoutParams.addRule(ALIGN_PARENT_BOTTOM);
layoutParams.addRule(ALIGN_PARENT_RIGHT);
optionButton.setLayoutParams(layoutParams);
}
和MenuButton一样，这个方法也有一个专属的OptionPositionBuilder，下面使用它来设置：
@Override
public void setOptionPosition(OptionButton optionButton, View menuButton, int index){
//设置动画模式和时长
optionButton.setSD_Animation(getOptionSD_AnimationMode());
optionButton.setDuration(getOptionSD_AnimationDuration());
//计算OptionButton的位置
int position = index % getOptionColumns();
new OptionPositionBuilder(optionButton,menuButton)
//设置宽高
.setWidthAndHeight(getYOptionButtonWidth(), getYOptionButtonHeight())
//设置在XY方向是否以MenuButton作为参照物
.isAlignMenuButton(false,false)
//设置参考方向
.setMarginOrientation(PositionBuilder.MARGIN_RIGHT,PositionBuilder.MARGIN_BOTTOM)
//设置XY方向的距离，如果设置了MARGIN_LEFT和MARGIN_TOP，那么XMargin和YMargin就是与参照物左边界和上边界的距离
.setXYMargin(
getYOptionToParentXMargin()
+ getYOptionXMargin() * position
+ getYOptionButtonWidth() * position,
getYOptionToParentYMargin()
+ (getYOptionButtonHeight() + getYOptionYMargin())
* (index / getOptionColumns()))
//最后确认时候调用
.finish();
}
这里YMenuView的OptionButton位置具体的实现逻辑上一篇介绍YMenuView1.x的时候已经说过了，这里就不详细说了。
3.createOptionShowAnimation()方法和createOptionDisappearAnimation()方法
这两个方法用来决定OptionButton的出现和消失的动画，原本在YMenuView1.x版本是在OptionButton内部实现，但是为了我们可以通过继承YMenu来实现一个自定义的效果，所以就通过一个回调设计把这两个方法的具体实现放到YMenu里抽象出来了。
所以，这个方法就是给出一个索引为index的OptionButton的参数，给设置动画作为参考值，然后把设置好的动画返回。
@Override
public Animation createOptionShowAnimation(OptionButton optionButton, int index){
AnimationSet animationSet = new AnimationSet(true);
AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
alphaAnimation.setDuration(getOptionSD_AnimationDuration());
TranslateAnimation translateAnimation = new TranslateAnimation(0,0,0,0);
switch (optionButton.getmSD_Animation()){
//从MenuButton的左边移入
case FROM_BUTTON_LEFT:
translateAnimation= new TranslateAnimation(getYMenuButton().getX() - optionButton.getRight(),0
,0,0);
translateAnimation.setDuration(getOptionSD_AnimationDuration());
break;
case FROM_RIGHT:
//从右边缘移入
translateAnimation= new TranslateAnimation((getWidth() - optionButton.getX()),0,0,0);
translateAnimation.setDuration(getOptionSD_AnimationDuration());
// showAnimation.setInterpolator(new OvershootInterpolator(1.3f));
break;
case FROM_BUTTON_TOP:
//从MenuButton的上边缘移入
translateAnimation= new TranslateAnimation(0,0,
getYMenuButton().getY() - optionButton.getBottom(),0);
translateAnimation.setDuration(getOptionSD_AnimationDuration());
break;
case FROM_BOTTOM:
//从下边缘移入
translateAnimation = new TranslateAnimation(0,0,getHeight() - optionButton.getY(),0);
translateAnimation.setDuration(getOptionSD_AnimationDuration());
}
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(alphaAnimation);
return animationSet;
}
这里的逻辑其实和之前的没有变化，也是要注意Animation里面的坐标原点是View的左上角就行了，这里只列出ShowAnimation的实现，至于DisappearAnimation的话就是和这个相反而已，篇幅原因就不列出来了。
4.抽象方法的执行顺序
这4个抽象方法是有执行顺序的，所以后面的方法能用到前面设置好的对象参数：
这些顺序的具体细节就是：
- 先初始化MenuButton,让MenuButton经历Measure和Layout过程之后，再初始化OptionButton，这样OptionButton就能以MenuButton的位置信息做为参考。
- 跟着每一个OptionButton经历Measure和Layout过程之后，它的ShowAnimation和DisappearAnimation又能以它的宽高信息进行初始化。
- 这样根据不同时期放出了不同抽象方法，让用户可以通过实现这4个方法来实现自定义的YMenu。
Circle8YMenu的实现
这是一个OptionButton围绕着MenuButton的布局，Option最大数量为8个，MenuButton的位置位于ViewGroup正中间，如果想改变的话可以继承Circle8YMenu，单单重写
setMenuPosition()方法就可以了。
//8个Option位置的x、y乘积因子
private float[] xyTimes = {0,0.707f,1,0.707f,0,-0.707f,-1,-0.707f};
//设置MenuButton的位置，这里设置成位于ViewGroup中心
@Override
public void setMenuPosition(View menuButton) {
new MenuPositionBuilder(menuButton)
.setWidthAndHeight(getYMenuButtonWidth(),getYMenuButtonHeight())
.setMarginOrientation(PositionBuilder.MARGIN_RIGHT,PositionBuilder.MARGIN_BOTTOM)
.setIsXYCenter(true,true)
.setXYMargin(getYMenuToParentXMargin(),getYMenuToParentYMargin())
.finish();
}
//设置OptionButton的位置，这里是设置成圆形围绕着MenuButton
@Override
public void setOptionPosition(OptionButton optionButton, View menuButton, int index) {
if (index >= 8){
try {
throw new Exception("Circle8YMenuView的OptionPosition最大数量为8，超过将会发生错误");
} catch (Exception e) {
e.printStackTrace();
}
}
int centerX = menuButton.getLeft() + menuButton.getWidth()/2;
int centerY = menuButton.getTop() + menuButton.getHeight()/2;
int halfOptionWidth = getYOptionButtonWidth()/2;
int halfOptionHeight = getYOptionButtonHeight()/2;
//利用乘积因子来决定不同位置
float x = xyTimes[index % 8];
float y = xyTimes[(index + 6) % 8];
OptionPositionBuilder OptionPositionBuilder = new OptionPositionBuilder(optionButton,menuButton);
OptionPositionBuilder
.isAlignMenuButton(false,false)
.setWidthAndHeight(getYOptionButtonWidth(), getYOptionButtonHeight())
.setMarginOrientation(PositionBuilder.MARGIN_LEFT,PositionBuilder.MARGIN_TOP)
//计算OptionButton的位置
.setXYMargin(
(int)(centerX + x * getYOptionXMargin() - halfOptionWidth)
,(int)(centerY + y * getYOptionXMargin() - halfOptionHeight)
)
.finish();
}
这里设置了MenuButton和OptionButton的位置。MenuButton的位置没什么好说的，直接居中，而关于OptionButton的位置这里用到了乘积因子，我觉得这是一种比较方便的算法，在这里解释一下：把MenuButton的中心看作参考点，以optionXMargin为半径，OptionButton中心到参考点（这些在XML定义的属性到了这里怎么用就看自己了，这里就用optionXMargin），然后x，y乘以optionXMargin就是OptionButton到参考点的x,y方向距离。
以这个0号OptionButton为例，它的x=0，y=-1，然后是以ViewGroup的左和上边缘为参考，所以它就处于MenuButton的正上方相隔optionXMargin的位置。
然后就是动画的实现：
//设置OptionButton的显示动画
@Override
public Animation createOptionShowAnimation(OptionButton optionButton, int index) {
AnimationSet animationSet = new AnimationSet(true);
TranslateAnimation translateAnimation= new TranslateAnimation(
getYMenuButton().getX() - optionButton.getX()
,0
,getYMenuButton().getY() - optionButton.getY()
,0);
translateAnimation.setDuration(getOptionSD_AnimationDuration());
AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
alphaAnimation.setDuration(getOptionSD_AnimationDuration());
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(translateAnimation);
//为不同的Option设置延时
if (index % 2 == 1) {
animationSet.setStartOffset(getOptionSD_AnimationDuration()/2);
}
return animationSet;
}
//设置OptionButton的消失动画
@Override
public Animation createOptionDisappearAnimation(OptionButton optionButton, int index) {
AnimationSet animationSet = new AnimationSet(true);
TranslateAnimation translateAnimation= new TranslateAnimation(
0
,getYMenuButton().getX() - optionButton.getX()
,0
,getYMenuButton().getY() - optionButton.getY()
);
translateAnimation.setDuration(getOptionSD_AnimationDuration());
AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
alphaAnimation.setDuration(getOptionSD_AnimationDuration());
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(alphaAnimation);
//为不同的Option设置延时
if (index % 2 == 0) {
animationSet.setStartOffset(getOptionSD_AnimationDuration()/2);
}
return animationSet;
}
动画都是选项从MenuButton里面冒出来和滚回去，亮点就是根据OptionButton的index设置了不同的延时，让整个效果看起来炫酷一点。
重写了这4个方法之后，就能够创造出这个Circle8YMenu了，如果想在这基础上改东西，直接重写这4个方法中要改变的方法就行了，有点方便。
TreeYMenu的实现
这是一个OptionButton分布成分叉树的布局，Option最大数量为9个，MenuButton的位置位于ViewGroup中下方。
//9个Option位置的x、y乘积因子
private static final float[] xTimes = {-1,1,0,-2,-2,2,2,-1,1};
private static final float[] yTimes = {-1,-1,-2,0,-2,0,-2,-3,-3};
//设置MenuButton的位置，这是设置在屏幕中下方
@Override
public void setMenuPosition(View menuButton) {
new MenuPositionBuilder(menuButton)
//设置宽高
.setWidthAndHeight(getYMenuButtonWidth(), getYMenuButtonHeight())
//设置参考方向
.setMarginOrientation(PositionBuilder.MARGIN_RIGHT,PositionBuilder.MARGIN_BOTTOM)
//设置是否在XY方向处于中心
.setIsXYCenter(true,false)
//设置XY方向距离
.setXYMargin(getYMenuToParentXMargin(),getYMenuToParentYMargin())
.finish();
}
//设置OptionButton的位置，这里是把9个Option设置为树状布局
@Override
public void setOptionPosition(OptionButton optionButton, View menuButton, int index) {
if (index > 8){
try {
throw new Exception("TreeYMenuView的OptionPosition最大数量为9，超过将会发生错误");
} catch (Exception e) {
e.printStackTrace();
}
}
int centerX = menuButton.getLeft() + menuButton.getWidth()/2;
int centerY = menuButton.getTop() + menuButton.getHeight()/2;
int halfOptionWidth = getYOptionButtonWidth()/2;
int halfOptionHeight = getYOptionButtonHeight()/2;
//利用乘积因子来决定不同位置
float x = xTimes[index];
float y = yTimes[index];
OptionPositionBuilder OptionPositionBuilder = new OptionPositionBuilder(optionButton,menuButton);
OptionPositionBuilder
.isAlignMenuButton(false,false)
.setWidthAndHeight(getYOptionButtonWidth(), getYOptionButtonHeight())
.setMarginOrientation(PositionBuilder.MARGIN_LEFT,PositionBuilder.MARGIN_TOP)
.setXYMargin(
(int)(centerX + x * getYOptionXMargin() - halfOptionWidth)
,(int)(centerY + y * getYOptionYMargin() - halfOptionHeight)
)
.finish();
}
这里OptionButton的设置和Circle8YMenu的差不多，就是乘积因子改变了，摆成了一个树状的布局。动画的展开也是像树一样分叉：
//设置OptionButton的显示动画，这里是为前三个先从MenuButton冒出，后面的分别从这三个冒出
@Override
public Animation createOptionShowAnimation(OptionButton optionButton, int index) {
float fromX,fromY;
AnimationSet animationSet = new AnimationSet(true);
if (index < 3){
fromX = getYMenuButton().getX() - optionButton.getX();
fromY = getYMenuButton().getY() - optionButton.getY();
}else {
int oldIndex = (index - 3) / 2;
fromX = getOptionButtonList().get(oldIndex).getX() - optionButton.getX();
fromY = getOptionButtonList().get(oldIndex).getY() - optionButton.getY();
//设置冒出动画延时
animationSet.setStartOffset(getOptionSD_AnimationDuration());
}
TranslateAnimation translateAnimation= new TranslateAnimation(
fromX
,0
,fromY
,0);
translateAnimation.setDuration(getOptionSD_AnimationDuration());
AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
alphaAnimation.setDuration(getOptionSD_AnimationDuration());
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.setInterpolator(new LinearInterpolator());
return animationSet;
}
//设置OptionButton的消失动画，这里设置的是直接从当前位置移动到MenuButton位置消失
@Override
public Animation createOptionDisappearAnimation(OptionButton optionButton, int index) {
AnimationSet animationSet = new AnimationSet(true);
TranslateAnimation translateAnimation= new TranslateAnimation(
0
,getYMenuButton().getX() - optionButton.getX()
,0
,getYMenuButton().getY() - optionButton.getY()
);
translateAnimation.setDuration(getOptionSD_AnimationDuration());
AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
alphaAnimation.setDuration(getOptionSD_AnimationDuration());
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(alphaAnimation);
//设置动画延时
animationSet.setStartOffset(60*(getOptionPositionCount() - index));
return animationSet;
}
这里OptionButton前三个是从MenuButton的位置冒出，其他的6个则是分别从这三个的位置冒出，利用延时实现了先后效果。而消失动画则是给每个OptionButton都加不同的延时，实现逐个回收的效果。
SquareYMenu的实现
这是一个OptionButton和MenuButton组成正方形的布局，Option最大数量为8个，MenuButton为位置依靠右下。这里就不贴出源码了，直接给出乘积数组，因为其他代码思路和前面的差不多，想看具体代码的可以看项目Github地址。
//8个Option位置的x、y乘积因子
private static final int[] xTimes = {-1,-1,0,-2,-2,-1,-2,0};
private static final int[] yTimes = {-1,0,-1,-2,-1,-2,0,-2};
Ban的补充
YMenuView1.x就有有Ban功能，能把一些位置设为不放置OptionButton，那么YMenuView2.0也支持这个，例如：
//对Circle8YMenu
mYMenu.setBanArray(0,2,4,6);
//对TreeYMenu
mYMenu.setBanArray(2,8,7);
//对SquareYMenu
mYMenu.setBanArray(3,4,7,5,6);
但是动画延时还是会算上不被填充的位置，这暂时无法避免，所以想要更好的体验效果的话就继承YMenu重写方法吧。
总结
这次重构过程主要使用了模板方法模式把一些次要的逻辑封装起来，主要的类结构从一个YMenuView扩展为一个父类YMenu和4个子类。在这个过程中也学到了不少东西，感觉自己在这方面还是有很多不足，后面会陆续更新改进的。但是最后也把自己的想法实现了。在此记录并分享，如有意见和建议，敬请提出。如果喜欢YMenuView的话，也可以上Github点个Star _！
