仿优酷菜单 代码逻辑实现 02

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_23237491/article/details/62215399

上一篇博客中，我们实现了优酷菜单的UI部分，这一博客，就专门用来实现代码逻辑。

控件的实例化我直接就用ButterKnife来做了，如果有还不会ButterKnife的小伙伴，可以先移步到这里，花两分钟时间看一下，你会发现两分钟过后，世界是如此的美妙~

那么在上代码之前，我们先分析一下原理：

优酷菜单实现点击旋转事件，其实就是实现了一个旋转的动画，分析如图：

那么代码的具体实现是这样的：

在Tools中：

/**
 * 功 能：显示或隐藏指定的控件
 * 邮 件：[email protected]
 * 2017/3/15 by:honeyHan
 */
public class Tools {
    public static void hideView(View view) {
        hideView( view,0);
    }

    public static void showView(View view) {
        RotateAnimation rotateAnimation = new RotateAnimation(180, 360, view.getWidth() / 2, view.getHeight());//以（view.getWidth() / 2, view.getHeight()）为圆心，从180旋转到360
        rotateAnimation.setDuration(500);//设置动画持续的时间
        rotateAnimation.setFillAfter(true);//设置动画停留在实现的状态之后
        view.startAnimation(rotateAnimation);
    }

    public static void hideView(View view, int startOffset) {
        RotateAnimation rotateAnimation = new RotateAnimation(0, 180, view.getWidth() / 2, view.getHeight());//以（view.getWidth() / 2, view.getHeight()）为圆心，从0旋转到180
        rotateAnimation.setDuration(500);//设置动画持续的时间
        rotateAnimation.setFillAfter(true);//设置动画停留在实现的状态之后
        rotateAnimation.setStartOffset(startOffset);//延迟startOffset后执行动画
        view.startAnimation(rotateAnimation);
    }
}

在MainActivity中是这样使用的：

/**
 * 功 能：实现优酷菜单点击旋转
 * 邮 件：[email protected]
 * 2017/3/14 by:honeyHan
 */
public class MainActivity extends AppCompatActivity {

    @BindView(R.id.level3)
    RelativeLayout level3;
    @BindView(R.id.icon_menu)
    ImageView iconMenu;
    @BindView(R.id.level2)
    RelativeLayout level2;
    @BindView(R.id.icon_home)
    ImageView iconHome;
    @BindView(R.id.level1)
    RelativeLayout level1;

    private boolean isShowLevel3 = true;//level3(即最外圈圆环)是否显示 true：显示
    private boolean isShowLevel2 = true;//level2(即中间圆环)是否显示 true：显示
    private boolean isShowLevel1 = true;//level1(即最内圈圆环)是否显示 true：显示

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

    }

    @OnClick({R.id.level3, R.id.icon_menu, R.id.level2, R.id.icon_home, R.id.level1})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.icon_menu://菜单
                if (isShowLevel3) {//如果level3(即最外圈圆环)是显示的
                    //隐藏
                    isShowLevel3 = false;
                    Tools.hideView(level3);
                } else {
                    //显示
                    isShowLevel3 = true;
                    Tools.showView(level3);
                }
                break;
            case R.id.icon_home://home
                //如果level3和level2都是显示的话，就让它们都隐藏
                if (isShowLevel3 == true && isShowLevel2 == true) {
                    isShowLevel2 = false;
                    Tools.hideView(level2);
                    isShowLevel3 = false;
                    Tools.hideView(level3,200);
                } else if (isShowLevel3 == false && isShowLevel2 == false) {
                    //如果level3和level2都是隐藏的话，就只让level2显示
                    isShowLevel2=true;
                    Tools.showView(level2);
                }
                break;
        }
    }
}

最后运行起来，最终的效果是这样的：

整个项目的源码在这里：点击打开链接