今天开始学习side-menu开源项目
项目地址https://github.com/Yalantis/Side-Menu.Android
why to learn
该项目比较简单，并且动画比较炫酷，能够从中学习比较基础的知识。
How to learn
该项目使用到了比较基础的控件DrawerLayout作为其基础布局，通过ViewAnimator类进行侧边栏打开和关闭的特效。通过实现ScreenShot接口来进行主布局内容的交换。首先我们来学习一下基础内容。
DrawerLayout
DrawerLayout是android.support.v4.widget的新增的布局控件，其继承于ViewGroup，包含内容区域和侧边栏区域，如果有需要侧边栏的布局，可以使用该控件。现在我们来了解一下该控件的使用方法。
首先，我们要明白DrawerLayout分为两个区域，一个是content布局，另一个是drawer布局，也就是侧边栏布局。content布局一般是第一个view，width和height设置为match_parent并且不能设置layout_gravity，紧接着是drawer布局，其一般height是match_parent，并且需要设置layout_gravity，其值为left或者right(start或者end)，其代表drawer出现哪一边。最后一般width要设置确定的值，以确定drawer展开的宽度。
注意
在侧边栏布局中，每一边只能设置一个侧边栏，就是layout_gravity为start或end只有一个，不然就会出现RuntimeException异常
ActionBarDrawerToggle
ActionBarDrawerToggle是DrawerLayout的监听器，用来对侧边栏收缩和弹出时的事件的回调。可以在DrawerLayout滑出，正在滑动和关闭等时刻进行事件的回调
//DrawerLayout滑出的时候调用
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
//DrawerLayout正在滑动的时候调用
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
}
//DrawerLayout关闭的时候调用
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
了解了上面这两个类的使用，现在我们来分析一下，side-menu的动画过程。
1.用户点击NavigationBar时，依次弹出侧边栏的每一项。
2.当点击侧边栏的一项时，从该项处以圆形做动画弹出整个界面
3.按照顺序依次关闭侧边栏。
依次弹出侧边栏
需要在点击NavigaitonBar的时候调用动画，可以在onDrawerSlide调用的时候来进行操作。只需要遍历侧边栏的每一项，然后调用各自的展开动画即可。
点击侧边栏item时，圆形切换界面。
可以通过ViewAnimationUtils.createCircularReveal来进行切换。
关闭侧边栏
关闭侧边栏的动画和弹出侧边栏的动画正好相反即可。
好了上面已经详细的描述side-menu的实现过程，那么现在用代码来实现以下。
showMenuContent进行设置View属性，点击事件以及动画
public void showMenuContent() {
//设置View不能点击
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;
//设置View的点击事件，点击之后调用switchItem切换内容，并且隐藏View
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);
}
});
//设置View的属性
((ImageView) viewMenu.findViewById(R.id.menu_item_image)).setImageResource(list.get(i).getImageRes());
viewMenu.setVisibility(View.GONE);
viewMenu.setEnabled(false);
viewList.add(viewMenu);
animatorListener.addViewToContainer(viewMenu);
final double position = i;
final double delay = 3 * ANIMATION_DURATION * (position / size);
//展开的动画，通过调用animateView来实现，根据View位置来计算延迟多长时间开始动画，当动画进行到最后一个，设置View可以点击
new Handler().postDelayed(new Runnable() {
public void run() {
if (position < viewList.size()) {
animateView((int) position);
}
if (position == viewList.size() - 1) {
screenShotable.takeScreenShot();
setViewsClickable(true);
}
}
}, (long) delay);
}
}
switchItem 切换View，同时隐藏侧边栏
private void switchItem(Resourceble slideMenuItem, int topPosition) {
this.screenShotable = animatorListener.onSwitch(slideMenuItem, screenShotable, topPosition);
hideMenuContent();
}
hideMenuContent 设置隐藏侧边栏的动画
private void hideMenuContent() {
//设置View不可点击
setViewsClickable(false);
double size = list.size();
//根据View位置进行动画的延时
for (int i = list.size(); i >= 0; i--) {
final double position = i;
final double delay = 3 * ANIMATION_DURATION * (position / size);
//根据View位置进行动画的延时
new Handler().postDelayed(new Runnable() {
public void run() {
if (position < viewList.size()) {
animateHideView((int) position);
}
}
}, (long) delay);
}
}
最后来说一下怎样通过ViewAnimationUtils.createCircularReveal来进行内容的切换
该动画用到CircularReveal开源库，地址https://github.com/ozodrukh/CircularReveal
在build.gradle中进行引用
- 添加代码库资源
repositories {
maven {
url "https://jitpack.io"
}
}
- 添加依赖
dependencies {
compile('com.github.ozodrukh:CircularReveal:2.0.1@aar') {
transitive = true;
}
}
这样依赖就添加好了
在布局中调用RevealLayout
获取View并调用动画
CardView cardView = (CardView) findViewById(R.id.content_frame);
int centerX = (cardView.getLeft() + cardView.getRight()) / 2;
int centerY = (cardView.getTop() + cardView.getBottom()) / 2;
int radious = Math.max(cardView.getWidth(),cardView.getHeight()) / 2;
Animator animator = ViewAnimationUtils.createCircularReveal(cardView,centerX,centerY,0,radious);
//设置动画的相关属性
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(1500);
animator.start();
createCircularReveal需要传入5个参数，
第一个参数：进行动画的View
第二，第三个参数：起始动画的坐标
第三个动画：起始动画的半径
第四个动画：结束动画的半径
基本上到这里，side-menu项目就分析完了，你有没有懂一点呢。
后记
不知有没有人发现，在该项目中并没有使用adapter，那么是怎么去添加View到ListView中的呢？
首先在重写ViewAnimatorListener的addViewToContainer方法
@Override
public void addViewToContainer(View view) {
linearLayout.addView(view);
}
然后在showMenuContent实例化相应的View，通过listener调用addViewToContainer添加到ListView中，聪明的你有没有get到呢？