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

出处
炎之铠邮箱:yanzhikai_yjk@qq.com
博客地址:blog.csdn.net/totond
本文原创,转载请注明本出处!
本项目GitHub地址:github.com/totond/YMen…
欢迎 Star or Fork!

前言

之前把我项目用到的类似于PathView的菜单YMenuView抽离出来,分享了实现思路,但是只是实现了在右下角的几种菜单弹出收回的效果,限制太大,适用性不强。这次重温了一下设计模式之后把YMenuView回炉再造,重构代码,打造出一个可以让用户发挥自己自由想象,实现自己想法需求的灵活YMenuView2.0,还加了3个自定义YMenu的例子,先来看看看效果:

《回炉再造,灵活的YMenuView2.0诞生》

(前面几个是之前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图里展现过了):

《回炉再造,灵活的YMenuView2.0诞生》

抽象方法的实现

这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个抽象方法是有执行顺序的,所以后面的方法能用到前面设置好的对象参数:

《回炉再造,灵活的YMenuView2.0诞生》

  这些顺序的具体细节就是:

  • 先初始化MenuButton,让MenuButton经历Measure和Layout过程之后,再初始化OptionButton,这样OptionButton就能以MenuButton的位置信息做为参考。
  • 跟着每一个OptionButton经历Measure和Layout过程之后,它的ShowAnimation和DisappearAnimation又能以它的宽高信息进行初始化。
  • 这样根据不同时期放出了不同抽象方法,让用户可以通过实现这4个方法来实现自定义的YMenu。

Circle8YMenu的实现

《回炉再造,灵活的YMenuView2.0诞生》

  这是一个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的实现

《回炉再造,灵活的YMenuView2.0诞生》

  这是一个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的实现

《回炉再造,灵活的YMenuView2.0诞生》

  这是一个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);

《回炉再造,灵活的YMenuView2.0诞生》

        //对TreeYMenu
        mYMenu.setBanArray(2,8,7);

《回炉再造,灵活的YMenuView2.0诞生》

        //对SquareYMenu
        mYMenu.setBanArray(3,4,7,5,6);

《回炉再造,灵活的YMenuView2.0诞生》

  但是动画延时还是会算上不被填充的位置,这暂时无法避免,所以想要更好的体验效果的话就继承YMenu重写方法吧。

总结

这次重构过程主要使用了模板方法模式把一些次要的逻辑封装起来,主要的类结构从一个YMenuView扩展为一个父类YMenu和4个子类。在这个过程中也学到了不少东西,感觉自己在这方面还是有很多不足,后面会陆续更新改进的。但是最后也把自己的想法实现了。在此记录并分享,如有意见和建议,敬请提出。如果喜欢YMenuView的话,也可以上Github点个Star _

    原文作者:算法小白
    原文地址: https://juejin.im/entry/59c8ad62f265da0648445ed2
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞