Android——SideMenu侧滑菜单的实现

　　最近有些忙，有一段时间没有写博客了，今天跟大家分享下SideMenu侧滑菜单的实现，自定义的Animation效果，给别人看起来就感觉好屌的样子，哈哈！不多说，先看看实现的效果。
　　
　　
　　
总体来说也并不复杂，下面给大家看下整个项目的结构：
　　
　　
以下是实现的源码及详细步骤：
　　新建android studio项目我这边就不讲述了，说一下android studio关联library项目，很简单，我贴几张图片大家就知道了，File->
　

然后
　

　　这样就可以了。
　　
首先看下ViewAnimationUtils类
　　

package com.lai.library.utils;

import android.app.Activity;
import android.os.Handler;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.widget.ImageView;

import com.lai.library.animations.FlipAnimation;
import com.lai.library.interfaces.Resourceble;
import com.lai.library.interfaces.ScreenShortable;

import java.util.ArrayList;
import java.util.List;

import static com.lai.sidemenu.R.layout;

/**
 * Created by henry on 2016/5/11.
 * 自定义的动画效果
 */
public class ViewAnimationUtils<T extends Resourceble> {
    /**
     * 切换隐藏与显示的效果
     */
    private final int ANIMATION_DURATION = 10;
    public static final int CIRCULAR_REVEAL_ANIMATION_DURATION = 20;

    private Activity activity;
    private List<T> list;
    private List<View> viewList = new ArrayList<View>();  //View集合
    private ScreenShortable screenShortable;//获取图片
    private DrawerLayout drawerLayout;
    private ViewAnimatorListener viewAnimatorListener;//实现定义接口

    /**
     * 构造器
     */
    public ViewAnimationUtils(Activity activity, List<T> list, ScreenShortable screenShortable, DrawerLayout drawerLayout, ViewAnimatorListener viewAnimatorListener) {
        this.activity = activity;
        this.list = list;
        this.screenShortable = screenShortable;
        this.drawerLayout = drawerLayout;
        this.viewAnimatorListener = viewAnimatorListener;
    }

    /**
     * 显示菜单的数量
     */
    public void showMenuCount() {
        setViewsClickable(false);//刚显示个数时view是出于false的状态
        viewList.clear();//清空组件
        double size = list.size();
        for (int i = 0; i < size; i++) {
            View viewMenu = activity.getLayoutInflater().inflate(layout.menu_list_item, null);
            final int finalI = i;
            /**
             * view的点击事件
             */
            viewMenu.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int[] localtion = {0, 0};//用数组坐标记录位置
                    v.getLocationOnScreen(localtion);//垂直
                    switchItem(list.get(finalI), localtion[1] + v.getHeight() / 2);     //点击后调用switchItem隐藏
                }
            });
            //得到资源并设置
            ((ImageView) viewMenu.findViewById(com.lai.sidemenu.R.id.menu_item_image)).setImageResource(list.get(i).getImageRes());
            viewMenu.setVisibility(View.GONE);
            viewMenu.setEnabled(false);
            viewList.add(viewMenu);//添加list中
            viewAnimatorListener.addViewToContainer(viewMenu);//添加到动画接口中

            final double position = i;
            final double delay = 3 * ANIMATION_DURATION * (position / size);
            /**
             * 耗时操作
             */
            new Handler().postDelayed(new Runnable() {
                @Override
                public void run() {
                    if (position < viewList.size()) {
                        animateView((int) position);
                    }
                    if (position == viewList.size() - 1) {
                        screenShortable.takeScreenShort();
                        setViewsClickable(true);
                    }
                }
            }, (long) delay);


        }

    }

    /**
     * 设置View
     */
    private void animateView(int position) {
        final View view = viewList.get(position);
        view.setVisibility(View.VISIBLE);//可见
        FlipAnimation rotation = new FlipAnimation(90, 0, 0.0f, view.getHeight() / 2.0f);//设置动画效果
        rotation.setDuration(ANIMATION_DURATION);
        rotation.setFillAfter(true);
        rotation.setInterpolator(new AccelerateInterpolator());
        //动画监听
        rotation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                view.clearAnimation();//结束后清除动画效果
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
    }


    /**
     * 点击的Item
     */
    private void switchItem(Resourceble slideMenuItem, int topPosition) {
        this.screenShortable = viewAnimatorListener.onSwitch(slideMenuItem, screenShortable, topPosition);
        //点击后隐藏viewList
        hideMenuContent();
    }

    /**
     * 隐藏menu
     */
    private void hideMenuContent() {
        setViewsClickable(false);
        double size = list.size();
        //隐藏全部
        for (int i = list.size(); i >= 0; i--) {
            final double position = i;//记录在viewList中点击的position作为头部，添加动画效果
            final double delay = 3 * ANIMATION_DURATION * (position / size);    //线程时间（其实这一步没必要，线程的时间可以直接写死）
            //耗时操作应放在handler里面操作
            new Handler().postDelayed(new Runnable() {
                @Override
                public void run() {
                    if (position < viewList.size()) {
                        //设置隐藏时的动画
                        animateHideView((int) position);
                    }
                }
            }, (long) delay);
        }
    }

    /**
     * 设置view隐藏时的动画
     */
    private void animateHideView(final int position) {
        final View view = viewList.get(position);//得到点击的view
        //0表示正在处于的状态为0°，90为操作后的度数，0.0f表示起始精确位置，centerY为view高度的二分之一
        FlipAnimation rotation = new FlipAnimation(0, 90, 0.0f, view.getHeight() / 2.0f);//设置动画
        rotation.setDuration(ANIMATION_DURATION);   //设置动画时间
        rotation.setFillAfter(true);
        rotation.setInterpolator(new AccelerateInterpolator());
        rotation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            /**
             * 结束时
             * @param animation
             */
            @Override
            public void onAnimationEnd(Animation animation) {
                view.clearAnimation();
                view.setVisibility(View.INVISIBLE);//隐藏view
                if (position == viewList.size() - 1) //防止越界
                {
                    viewAnimatorListener.enableHomeButton();
                    drawerLayout.closeDrawers();//关闭drawers
                }
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
        view.startAnimation(rotation);//开始动画
    }


    /**
     * 设置控件是否可用
     */
    private void setViewsClickable(boolean clickable) {
        //点击以后view不可再重新点击
        viewAnimatorListener.disableHomeButton();
        /**
         * 点击第几个view
         */
        for (View view : viewList) {
            view.setEnabled(clickable);
        }

    }

    /**
     * 定义接口
     */
    public interface ViewAnimatorListener {
        //点击MenuItem
        public ScreenShortable onSwitch(Resourceble slideMenuItem, ScreenShortable screenShortable, int position);

        public void disableHomeButton();

        public void enableHomeButton();

        public void addViewToContainer(View view);
    }
}

　　上面的注释写的非常详细了，一目了然。

下面是FlipAnimation类，自定义的动画效果，代码量很少，更容易理解！

package com.lai.library.animations;

/**
 * Created by henry on 2016/5/11.
 */

import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.Transformation;

/**
 * 自定义动画效果
 */
public class FlipAnimation extends Animation {
    private final float mFromDegrees;//起始的度数
    private final float mToDegrees;//要到达的度数
    private final float mCenterX;// 水平方向X轴的位置
    private final float mCenterY;//Y轴的位置
    private Camera mCamera;


    /**
     * 构造器
     *
     * @param fromDegrees
     * @param toDegrees
     * @param centerX
     * @param centerY
     */
    public FlipAnimation(float fromDegrees, float toDegrees, float centerX, float centerY) {
        this.mFromDegrees = fromDegrees;
        this.mToDegrees = toDegrees;
        this.mCenterX = centerX;
        this.mCenterY = centerY;
    }

    /**
     * 初始化屏幕宽度创建Camera
     *
     * @param width
     * @param height
     * @param parentWidth
     * @param parentHeight
     */
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        mCamera = new Camera();
    }

    /**
     * 动画效果
     */
    public void applyTransformation(float interpolatedTime, Transformation transformation) {
        final float fromDegrees = mFromDegrees;
        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);//总度数

        /**
         * 获取值
         */
        final float centerX = mCenterX;
        final float centerY = mCenterY;
        final Camera camera = mCamera;

        /**
         * 对图片进行处理
         * Translate           平移变换
         Rotate                旋转变换
         Scale                  缩放变换
         Skew                  错切变换
         */
        final Matrix matrix = transformation.getMatrix();
        camera.save();  //保存当前状态 ，与restore是成对出现的
        camera.rotateY(degrees);//Y轴旋转
        camera.getMatrix(matrix);//得到设置后的matrix

        camera.restore();//回复当前状态

        /**
         * 下面两句标识以动画中心点为中央部分
         */
        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
    }


}

还有几个要实现的接口就不贴出来了，到最后面可以自己去下载源码。

　　写完关联的library以后，接下来就是我们实际操作的页面了。我们只需要在MainActivity里面嵌套一个Fragment就行了，然后再实现完ViewAnimationUtils的四个接口，马上开始。
　　第一步写一个Fragment类

package com.lai.sidemenu.fragment;

import android.app.Fragment;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.lai.library.interfaces.ScreenShortable;
import com.lai.sidemenu.R;

/**
 * Created by henry on 2016/5/11.
 */
public class ContentFragment extends Fragment implements ScreenShortable {
    /**
     * 点击图片需要切换的选项value
     */
    public static final String CLOSE = "关闭";
    public static final String BUILDING = "创建";
    public static final String BOOK = "书本";
    public static final String PAINT = "交点";
    public static final String CASE = "案例";
    public static final String SHOP = "商品";
    public static final String PARTY = "派对";
    public static final String MOVIE = "电影";

    private View rootView;
    private ImageView mImageView;
    private int res;
    private Bitmap bitmap;

    public static ContentFragment newInstance(int resId) {
        ContentFragment contentFragment = new ContentFragment();
        Bundle bundle = new Bundle();
        bundle.putInt(Integer.class.getName(), resId);
        contentFragment.setArguments(bundle);//设置Arguments
        return contentFragment;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        this.rootView = view.findViewById(R.id.container);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        res = getArguments().getInt(Integer.class.getName());//获取Arguments的值
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_main, null);
        mImageView = (ImageView) view.findViewById(R.id.image_content);
        mImageView.setClickable(true);
        mImageView.setFocusable(true);
        mImageView.setImageResource(res);
        return view;
    }

    /**
     * 设置bitmap
     * 耗时操作
     */
    @Override
    public void takeScreenShort() {
        Thread thread=new Thread(){
            @Override
            public void run() {
                Bitmap bitmap=Bitmap.createBitmap(rootView.getWidth(),rootView.getHeight(),Bitmap.Config.ARGB_8888);
                Canvas canvas=new Canvas(bitmap);
                rootView.draw(canvas);
                ContentFragment.this.bitmap=bitmap;
            }
        };
        thread.start();
    }

    @Override
    public Bitmap getBitmap() {
        return bitmap;
    }
}

在MainActivity中主要就是为Fragment页面添加菜单项，一些点击的操作，见下面代码：

package com.lai.sidemenu;


import android.content.res.Configuration;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.LinearLayout;

import com.lai.library.interfaces.Resourceble;
import com.lai.library.interfaces.ScreenShortable;
import com.lai.library.model.SlideMenuitem;
import com.lai.library.utils.ViewAnimationUtils;
import com.lai.sidemenu.fragment.ContentFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends ActionBarActivity implements ViewAnimationUtils.ViewAnimatorListener {
    private ContentFragment contentFragment;
    private DrawerLayout drawerLayout;
    private ActionBarDrawerToggle drawerToggle;
    private List<SlideMenuitem> list = new ArrayList<SlideMenuitem>();
    private ViewAnimationUtils viewAnimationUtils;
    private int res = R.drawable.content_music;
    private LinearLayout linearLayout;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        contentFragment = ContentFragment.newInstance(R.drawable.content_music);
        getFragmentManager().beginTransaction().replace(R.id.container_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();
            }
        });
        setActionBar();
        createMenuList();
        viewAnimationUtils = new ViewAnimationUtils<>(this, list, contentFragment, drawerLayout, this);

    }

    /**
     * 设置ActionBar一些基础操作
     */
    private void setActionBar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                linearLayout.removeAllViews();
                linearLayout.invalidate();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                if (slideOffset > 0.6 && linearLayout.getChildCount() == 0) {
                    viewAnimationUtils.showMenuCount();
                }
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
        };
        drawerLayout.setDrawerListener(drawerToggle);
    }

    /**
     * 创建menu菜单
     */
    private void createMenuList() {
        SlideMenuitem menuitemOne = new SlideMenuitem(ContentFragment.CLOSE, R.drawable.icn_close);
        list.add(menuitemOne);
        SlideMenuitem menuitemTwo = new SlideMenuitem(ContentFragment.BUILDING, R.drawable.icn_1);
        list.add(menuitemTwo);
        SlideMenuitem menuitemthree = new SlideMenuitem(ContentFragment.BOOK, R.drawable.icn_2);
        list.add(menuitemthree);
        SlideMenuitem menuitemFour = new SlideMenuitem(ContentFragment.CASE, R.drawable.icn_3);
        list.add(menuitemFour);
        SlideMenuitem menuitemFive = new SlideMenuitem(ContentFragment.MOVIE, R.drawable.icn_4);
        list.add(menuitemFive);
        SlideMenuitem menuitemSix = new SlideMenuitem(ContentFragment.PAINT, R.drawable.icn_5);
        list.add(menuitemSix);
        SlideMenuitem menuitemSeven = new SlideMenuitem(ContentFragment.SHOP, R.drawable.icn_6);
        list.add(menuitemSeven);
        SlideMenuitem menuitemEight = new SlideMenuitem(ContentFragment.PARTY, R.drawable.icn_7);
        list.add(menuitemEight);

    }

    /**
     * 开始状态
     *
     * @param savedInstanceState
     * @param persistentState
     */
    @Override
    public void onPostCreate(Bundle savedInstanceState, PersistableBundle persistentState) {
        super.onPostCreate(savedInstanceState, persistentState);
        drawerToggle.syncState();
    }

    /**
     * 配置drawerToggle
     *
     * @param newConfig
     */
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        drawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (drawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public ScreenShortable onSwitch(Resourceble slideMenuItem, ScreenShortable screenShortable, int position) {
        switch (slideMenuItem.getName()) {
            case ContentFragment.CLOSE:
                return screenShortable;
            default:
                return replaceFragment(screenShortable, position);
        }
    }

    /**
     * 切换图片操作
     *
     * @param screenShortable
     * @param position
     * @return
     */
    private ScreenShortable replaceFragment(ScreenShortable screenShortable, int position) {
        this.res = this.res == R.drawable.content_music ? R.drawable.content_films : R.drawable.content_music;
        View view = findViewById(R.id.container_frame);
        int finalRadius = Math.max(view.getWidth(), view.getHeight());
        io.codetail.animation.SupportAnimator animator = io.codetail.animation.ViewAnimationUtils.createCircularReveal(view, 0, position, 0, finalRadius);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(ViewAnimationUtils.CIRCULAR_REVEAL_ANIMATION_DURATION);

        findViewById(R.id.content_overlay).setBackgroundDrawable(new BitmapDrawable(getResources(), screenShortable.getBitmap()));
        animator.start();//开始动画
        ContentFragment contentFragment = ContentFragment.newInstance(this.res);
        getFragmentManager().beginTransaction().replace(R.id.content_frame, contentFragment).commit();
        return contentFragment;
    }

    /**
     * 设置button不可用
     */
    @Override
    public void disableHomeButton() {
        getSupportActionBar().setHomeButtonEnabled(false);
    }

    @Override
    public void enableHomeButton() {
        getSupportActionBar().setHomeButtonEnabled(true);
        drawerLayout.closeDrawers();
    }

    @Override
    public void addViewToContainer(View view) {
        linearLayout.addView(view);
    }


}

主要的代码已经贴出来了，如果感兴趣的话可以从下面下载项目。

项目源码