[MD学习]使用ActionBar+DrawableLayout+Palette打造侧滑UI

Google 在2014年提出了 Material Design(MD)  的设计规范，根据MD做出来的UI效果炫酷，成了Android码农必不可少的利剑

今天我们的Demo也将使用动态导航图标+主色调匹配这样的技能，做出来的效果如下图

                                              

主要完成工作：

1. 使用DrawableLayout打造侧滑菜单

2. 使用material-menu设计导航图标动画效果

3. Pattele获取图片主色调，并根据主色调修改actionbar和侧滑菜单颜色

下面是具体的代码 :

1 . 创建滑动菜单布局

侧滑布局使用的是V4包中DrawableLayout布局，侧滑菜单使用ListView，主界面使用FrameLayout，代码如下：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <FrameLayout        android:id="@+id/content_frame"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <ListView        android:id="@+id/left_drawer"        android:layout_width="180dp"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="#111"        android:choiceMode="singleChoice"        android:divider="@android:color/transparent"        android:dividerHeight="0dp" /></android.support.v4.widget.DrawerLayout>

使用DrawerLayout布局，注意

android:layout_gravity="start"

这一句中，“start”代表左侧隐藏，如果使用“end”代表右侧隐藏

2.  创建主界面

主界面我们使用熟悉的Fragement， 很简单，就是4张不同的图片来代表四季

switch (position) {case 0:args.putInt("key", DISPLAY_SPRING_IMAGE);bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.spring);break;case 1:args.putInt("key", DISPLAY_SUMMER_IMAGE);bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.summer);break;case 2:args.putInt("key", DISPLAY_AUTUMN_IMAGE);bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.autumn);break;case 3:args.putInt("key", DISPLAY_WINTER_IMAGE);bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.winter);break;default:break;}fragment.setArguments(args); FragmentManager fragmentManager = getSupportFragmentManager();fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

Fragment中根据点击item的不同显示不同的图片

switch(tag){case DISPLAY_SPRING_IMAGE :iv.setBackgroundResource(R.drawable.spring);break;case DISPLAY_SUMMER_IMAGE :iv.setBackgroundResource(R.drawable.summer);break;case DISPLAY_AUTUMN_IMAGE :iv.setBackgroundResource(R.drawable.autumn);break;default :iv.setBackgroundResource(R.drawable.winter);}return view;}

3.  处理导航list点击事件

private class DrawerItemClickListener implementsListView.OnItemClickListener {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position,long id) {selectItem(position);}}

4.  实现icon动画

这个效果需要用到开源的Material menu组件

material-menu主页：https://github.com/balysv/material-menu

有关material-menu的使用请参考下面链接内容，是用该功能时需要添加nineoldandroids的Jars包

设置actionbar可见

getActionBar().setDisplayHomeAsUpEnabled(true);getActionBar().setHomeButtonEnabled(true);

初始化material icon并设置监听

mMaterialMenuIcon = new MaterialMenuIcon(this,Color.WHITE,Stroke.REGULAR);mDrawerLayout.setDrawerListener(new DrawerLayout.SimpleDrawerListener() {@Override          public void onDrawerSlide(View drawerView, float slideOffset) {  currentView = drawerView;            if (drawerView == mMenuListView) {                  mMaterialMenuIcon.setTransformationOffset(MaterialMenuDrawable.AnimationState.BURGER_ARROW, isDirection_left ? 2 - slideOffset : slideOffset);              }        }@Override          public void onDrawerOpened(android.view.View drawerView) {              if (drawerView == mMenuListView) {                  isDirection_left = true;              }        }@Override          public void onDrawerClosed(android.view.View drawerView) {              if (drawerView == mMenuListView) {                  isDirection_left = false;              }        } });

关联下meterial-menu的状态

@Overridepublic void onPostCreate(Bundle savedInstanceState,PersistableBundle persistentState) {super.onPostCreate(savedInstanceState, persistentState);mMaterialMenuIcon.syncState(savedInstanceState); }@Overrideprotected void onSaveInstanceState(Bundle outState) {super.onSaveInstanceState(outState);mMaterialMenuIcon.onSaveInstanceState(outState);}

最后，处理actionbar点击事件

@Override  public boolean onOptionsItemSelected(MenuItem item) {      int id = item.getItemId();      switch (id) {      case android.R.id.home:          if (currentView == mMenuListView) {              if (!isDirection_left) { // 左边栏菜单关闭时，打开                  mDrawerLayout.openDrawer(mMenuListView);              } else {// 左边栏菜单打开时，关闭                  mDrawerLayout.closeDrawer(mMenuListView);              }          }          break;      default:          break;      }      return super.onOptionsItemSelected(item);  }

到这里 会动的actionbar icon就添加完毕

这个过程中遇到了个FC

NullPointerException: with ActionBar.setDisplayHomeAsUpEnabled(boolean)' on a null object reference

意思就是找不到ActionBar，即ActionBar为Null, 导致display失败，找了很久，发现把Style中的主体类型改下就OK了

<!-- name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">     -->     <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">       </style>

注释的部分就是导致FC的真凶~~

5.  获取图片主色调并设置其他组件颜色

获取图片的主色调，使用的是V7包支持的Palette，具体可以参考谷歌官方API文档，当然Baidu下也很多教材，主要有下面几种色调提供选择

Vibrant

getDarkVibrantSwatch()

Returns a dark and vibrant swatch from the palette.

Muted

getLightMutedSwatch()

Returns a muted and light swatch from the palette.

Vibrant Dark

getDarkVibrantColor(int defaultColor)

Returns a dark and vibrant color from the palette as an RGB packed int.

Muted Dark

getDarkMutedSwatch()

Returns a muted and dark swatch from the palette.

Vibrant Light

getLightVibrantColor(int defaultColor)

Returns a light and vibrant color from the palette as an RGB packed int.

Muted Light

getLightVibrantSwatch()

Returns a light and vibrant swatch from the palette.

这里我用的是 Vibrant Dark的色调，鲜明的暗色，很酷的感觉

Palette.Swatch swatch = palette.getDarkVibrantSwatch();

然后，因为ActionBar不支持直接设置color，查了下API，发现可以使用drawable的方法背景，所以设置ActionBar的流程比较蛋疼

Palette获取主色调 - 根据获取到的颜色画图（Bitmap） - 将Bitmap转换成drawable类型 - setBackgroundDrawable 设置ActionBar颜色

Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {@Overridepublic void onGenerated(Palette palette) {Palette.Swatch swatch = palette.getDarkVibrantSwatch();if(swatch != null)        {        int color = swatch.getRgb();Drawable actionbarDB = ivUtils.BitmapToDrawable(ivUtils.GetPurColorIV(colorBurn(color)));getActionBar().setBackgroundDrawable(actionbarDB);mMenuListView.setBackgroundColor(color);        }}});

画一个20*20的矩形（颜色根据主色调决定）

public static Bitmap GetPurColorIV(int colorId){int w = 20;int h = 20;Bitmap distBmp = Bitmap.createBitmap(w, h, Config.ARGB_8888);Canvas canvas = new Canvas(distBmp);canvas.drawColor(colorId);Paint paint = new Paint();paint.setAntiAlias(true);        Rect rect = new Rect(0,0,w,h);canvas.drawBitmap(distBmp, null, rect, paint);return distBmp;}

代码下载 请猛戳这里

*****如何添加外部Jar******

虽然很多童鞋都知道方法，但是我还是在这里说一下，万一自己以后忘了可以回头看看，懂的请无视~~~

1. 右键项目 - build path - configure build path

2. Java Build Path - Librariew - Add External JARs... - 添加需要的jar文件

3. Java Build Path - Order and Exprot - 勾选你需要依赖的Jars包

参考文章：

扩展用户体验--ActionBar

Android组件——使用DrawerLayout仿网易新闻v4.4侧滑菜单

Android通过Palette来动态决定UI色彩风格