[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 implements
			ListView.OnItemClickListener {
		@Override
		public 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的状态

	@Override
	public void onPostCreate(Bundle savedInstanceState,
			PersistableBundle persistentState) {
		super.onPostCreate(savedInstanceState, persistentState);
		mMaterialMenuIcon.syncState(savedInstanceState); 
	}

	@Override
	protected 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() {		
			@Override
			public 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色彩风格