回炉再造，灵活的YMenuView2.0诞生

Posted 2022-11-23 炎之铠

出处：
炎之铠邮箱：[e-mail]
博客地址：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 ^_^！