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 | Returns a dark and vibrant swatch from the palette. | Muted |
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 |
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 |
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包
参考文章:
Android组件——使用DrawerLayout仿网易新闻v4.4侧滑菜单