Side-Menu源码分析讲解

Android的一份开源侧边菜单，看起来效果还不错，所以就看了一下源码。发现代码为MVP特点的处理方式。

连接地址https://github.com/Yalantis/Side-Menu.Android

展示

分析如下：

一、控件要求

a主界面布局需要使用 DrawerLayout 作为容器(DrawerLayout 用法这里不做讲解)
b基本界面使用了RevealFrameLayout作为界面更换的界面容器(一个有Reveal效果的开源控件,具有Android版本的

兼容作用)，具体可见io.codetail.animation.ViewAnimationUtils中createCircularReveal方法

二、接口设计

ScreenShotable： 
ContentFragment继承进行界面Bitmap的获取与返回

ViewAnimator.ViewAnimatorListener：
MainActivity主界面继承，设置动画播放时的其他操作ActionBar中Home按钮的状态处理，以及侧边菜单子项的点击

事件onSwitch的处理

三、流程讲解：

MainActivity主界面进入：见代码(具体都有注释)

    

@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //进行界面的首次替换展示，菜单对应界面的初始化        contentFragment = ContentFragment.newInstance(R.drawable.content_music);        //界面展示        getSupportFragmentManager().beginTransaction()                .replace(R.id.content_frame, contentFragment)                .commit();        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        // 设置抽屉空余处颜色        drawerLayout.setScrimColor(Color.TRANSPARENT);        linearLayout = (LinearLayout) findViewById(R.id.left_drawer);        linearLayout.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                //关闭抽屉                drawerLayout.closeDrawers();            }        });        //此处进行ActionBar与DrawerLayout通过ActionBarDrawerToggle建立事件关系        setActionBar();        //侧滑菜单项目初始化（还不可见）        createMenuList();        //通过自定义ViewAnimator进行相关的事件监控        //分别传入菜单数据list、ContentFragment(实现ScreenShotable接口)、drawerLayout、当前MainActivity对象        viewAnimator = new ViewAnimator<>(this, list, contentFragment, drawerLayout, this);    }

主界面流程：
1、contentFragment容器的首次展示
2、setActionBar()此处进行ActionBar与DrawerLayout通过ActionBarDrawerToggle建立事件关系
3、createMenuList()进行菜单项数据的初始化
4、ViewAnimator类初始化，主要的事件都是通过ViewAnimator来回调主界面中实现的ViewAnimatorListener方法，进行界面

处理(MVP模式体现)
至此，界面初始化完成。

进行操作流程：
1、点击左上方的按钮：
触发ActionBarDrawerToggle的onDrawerSlide方法，根据偏移量slideOffset与linearLayout子菜单项的个数来进行判断，

保证viewAnimator.showMenuContent()只执行一次；显示出侧边完整的菜单
2、viewAnimator.showMenuContent()分析：代码如下(具体可见注释)

 public void showMenuContent() {        setViewsClickable(false);        //菜单视图缓存清空        viewList.clear();        double size = list.size();        for (int i = 0; i < size; i++) {            //进行图示绘制            View viewMenu = appCompatActivity.getLayoutInflater().inflate(R.layout.menu_list_item, null);            final int finalI = i;            //子菜单进行点击时间监听            viewMenu.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    int[] location = {0, 0};                    v.getLocationOnScreen(location);                    switchItem(list.get(finalI), location[1] + v.getHeight() / 2);                }            });            ((ImageView) viewMenu.findViewById(R.id.menu_item_image)).setImageResource(list.get(i).getImageRes());            viewMenu.setVisibility(View.GONE);            viewMenu.setEnabled(false);            //把子菜单添加入缓存队列            viewList.add(viewMenu);            //回调MainActivity实现的addViewToContainer方法            animatorListener.addViewToContainer(viewMenu);            final double position = i;            //此处是各个子菜单不同延迟delay时间进行动画展示的运算            final double delay = 3 * ANIMATION_DURATION * (position / size);            //通过一个Menu一个线程的方式来延迟进行触发动画播放animateView            //当最后一个Menu展示后，对传入的ContentFragment进行界面的Bitmap绘制，提供给ViewAnimationUtils使用            new Handler().postDelayed(new Runnable() {                public void run() {                    if (position < viewList.size()) {                        animateView((int) position);                    }                    if (position == viewList.size() - 1) {                        //传入的ContentFragment是实现了screenShotable接口的，进行当前界面的Bitmap绘制                        screenShotable.takeScreenShot();                        setViewsClickable(true);                    }                }            }, (long) delay);        }    }

showMenuContent具体流程:

a、for循环生成对应的菜单项视图，并且缓存；

b、然后通过animatorListener.addViewToContainer回调主界面MainActivity的addViewToContainer方法，添加循环添加视图

到一个LinearLayout控件进行展示；

c、对每个Menu进行点击事件的注册:记录点击的位置到location数组，调用switchItem(之后分解)方法

d、根据Menu的初始化顺序进行delay延迟时间的计算，通过线程延时执行animateView来处理动画展示animateView通过

自定义的动画FlipAnimation来实现动画效果

FlipAnimation分解:代码如下(详细见备注)

public class FlipAnimation extends Animation {    private final float mFromDegrees;    private final float mToDegrees;    private final float mCenterX;    private final float mCenterY;    private Camera mCamera;    public FlipAnimation(float fromDegrees, float toDegrees,                         float centerX, float centerY) {        //初始角度        mFromDegrees = fromDegrees;        //最后角度        mToDegrees = toDegrees;        //中心坐标        mCenterX = centerX;        mCenterY = centerY;    }    @Override    public void initialize(int width, int height, int parentWidth, int parentHeight) {        super.initialize(width, height, parentWidth, parentHeight);        //初始化Camera        mCamera = new Camera();    }    //此处为在加速器时间范围内重复调用，这样来实现动画的流畅播放    @Override    protected void applyTransformation(float interpolatedTime, Transformation t) {        final float fromDegrees = mFromDegrees;        //根据加速器传入的interpolatedTime时间来计算动画角度变化度数        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);        final float centerX = mCenterX;        final float centerY = mCenterY;        final Camera camera = mCamera;        final Matrix matrix = t.getMatrix();        //记录当前机位 与restore共同使用        camera.save();        //Y轴翻转        camera.rotateY(degrees);        camera.getMatrix(matrix);        //重置当前机位        camera.restore();        //通过Matrix矩阵来具体实现，设置中心点        matrix.preTranslate(-centerX, -centerY);        matrix.postTranslate(centerX, centerY);    }}

通过重写Animation的applyTransformation方法，并且利用android.graphics.Camera(并非硬件摄像头)与Matrix实现动画Y轴翻转动画

（Camera与Matrix的使用此处不做讲解）

3、点击Menu菜单：调用switchItem方法:代码如下

private void switchItem(Resourceble slideMenuItem, int topPosition) {        this.screenShotable = animatorListener.onSwitch(slideMenuItem, screenShotable, topPosition);        hideMenuContent();    }

回调主界面MainActivity中实现的ViewAnimatorListener.onSwitch接口方法函数，并且返回一个ScreenShotable接口对象

(实际为ContentFragment对象，实现了该接口)，最后调用hideMenuContent()方法关闭菜单，hideMenuContent与之前showMenuContent类似

4、回到MainActivity的onSwitch实现方法：见代码

@Override    public ScreenShotable onSwitch(Resourceble slideMenuItem, ScreenShotable screenShotable, int position) {        switch (slideMenuItem.getName()) {            //第一个按钮close返回初始化的contentFragment对象            case ContentFragment.CLOSE:                return screenShotable;            default:                //其他返回一个新的contentFragment对象                return replaceFragment(screenShotable, position);        }    }

除了Close按钮之外

@TargetApi(21)    public static SupportAnimator createCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius) {        if(LOLLIPOP_PLUS) {            return new SupportAnimatorLollipop(android.view.ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius));        } else if(!(view.getParent() instanceof RevealAnimator)) {            throw new IllegalArgumentException("View must be inside RevealFrameLayout or RevealLinearLayout.");        } else {            RevealAnimator revealLayout = (RevealAnimator)view.getParent();            revealLayout.setTarget(view);            revealLayout.setCenter((float)centerX, (float)centerY);            Rect bounds = new Rect();            view.getHitRect(bounds);            ObjectAnimator reveal = ObjectAnimator.ofFloat(revealLayout, "revealRadius", new float[]{startRadius, endRadius});            reveal.addListener(getRevealFinishListener(revealLayout, bounds));            return new SupportAnimatorPreL(reveal);        }    }static {        LOLLIPOP_PLUS = VERSION.SDK_INT >= 21;    }

执行replaceFragment方法返回一个新的ScreenShotable对象(实际为一个新的contentFragment对象)。

replaceFragment方法分解:代码如下，见备注

public static SupportAnimator createCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius) {//当Android版本大于等于5.0的时候调用SupportAnimatorLollipop方法        if(LOLLIPOP_PLUS) {            return new SupportAnimatorLollipop(android.view.ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius));        }//如果Android版本小于5.0的时候进行传入的View的父控件判断//这里返回activity_main.xml的布局文件，查看传入的View(content_frame) 对象的父控件io.codetail.widget.RevealFrameLayout，会发现RevealFrameLayout是实现了RevealAnimator的，是不是很巧妙 else if(!(view.getParent() instanceof RevealAnimator)) {            throw new IllegalArgumentException("View must be inside RevealFrameLayout or RevealLinearLayout.");        } else {//Android小于5.0的时候调用RevealAnimator            RevealAnimator revealLayout = (RevealAnimator)view.getParent();            revealLayout.setTarget(view);            revealLayout.setCenter((float)centerX, (float)centerY);            Rect bounds = new Rect();            view.getHitRect(bounds);            ObjectAnimator reveal = ObjectAnimator.ofFloat(revealLayout, "revealRadius", new float[]{startRadius, endRadius});            reveal.addListener(getRevealFinishListener(revealLayout, bounds));            return new SupportAnimatorPreL(reveal);        }    } static {        LOLLIPOP_PLUS = VERSION.SDK_INT >= 21;    }

根据备注，会发现这里就能够返回一个SupportAnimator对象到MainActivity进行圆形Reveal动画播放了，并且也实现了界面的切换

总结:大体的执行流程，代码上面已经分析清楚了，有不对的地方欢迎指正。这个开源的思路，代码难度并不大。
重要点在三个地方可以借鉴:
1、采用接口回调的方式来处理，这样很灵活
2、这种菜单实现思路，界面切换的过渡动画可以借鉴
3、Toolbar与自定义菜单相关联的思路
不足之处：
1、定制化的痕迹过于明显，不便于扩展
2、依附于DrawerLayout控件