码迷,mamicode.com
首页 > 移动开发 > 详细

android中NavigationDrawer的使用以及添加drawer切换时的动画效果

时间:2015-05-08 01:49:42      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:android   navigationdrawer   actionbardrawertoggl   toolbar   切换动画   

最近在开发app的时候需要用到NavigationDrawer,但是在添加动画(汉堡图标和箭头图标互转)效果的时候老是出现问题,折腾了好几个小时终于搞定。在这里跟大家分享一下。说明下,我开发时候用的minSdkVersion 是9,也就是本文所说的方法适用于APIlevel 2.3以上的情况,但若minsdk比较高的话会有略微的差异。


1.效果及依赖

NavigationDrawer是Material Design中推崇的一种控件,网易新闻、知乎都有在使用,先上效果图:

技术分享


图中开启、关闭NavigationDrawer时左上角的动画是通过github上的一个第三方库实现的,详情请见:https://github.com/ikimuhendis/LDrawer

不过前段时间android官方的appcompat-v21包已经开始支持这种效果了。如果你用的是android studio,只需要在app module的build.gradle文件中添加

dependencies {
    compile "com.android.support:appcompat-v7:21.0.+"
}
然后sync(同步)一下就可以使用appcompat包了。此外项目还依赖了support-v4的包,所以在请在dependencies中再加上这一句:

compile 'com.android.support:support-v4:22.0.0'


2.实现步骤

我们以一个MainActivity以及一个左侧拉出的NavigationDrawer为例说明。首先在layout文件夹下边定义一个toolbar.xml,定义Toolbar的样式。

toolbar.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"/>

Toolbar是API21(android 5.0)中引进的一个控件,Toolbar是以后用来接替Actionbar的,因为Toolbar可以更加自由地设定风格。因为现在的min API 只有9,所以需要使用support包中的Toolbar。


然后定义主布局main_layout.xml文件:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 这里引入刚才定义的toolbar -->
    <include layout="@layout/toolbar"/>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"<pre name="code" class="plain">ActionBarActivity

android:layout_height="match_parent"> <!-- Main layout,这里边放的是MainActivity的内容 --> <FrameLayout android:id="@+id/main_fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- Navigation drawer -->
<!--注意这里的layout_width一般设为比屏幕宽度少一些,也就是NavigationDrawer显示时候的宽度,drawer出来时候把整个屏幕遮住不太好看-->
  <ListView android:id="@+id/listview_drawer" android:layout_width="@dimen/drawer_width" android:layout_height="match_parent" android:layout_gravity="left|start" /> </android.support.v4.widget.DrawerLayout></LinearLayout>


可以看到这里在DrawerLayout的上方添加了刚才定义的toolbar的布局,而DrawerLayout里边分为两部分,上面那个FrameLayout里边存放的时候本来MainActivity的内容,而下边部分(这里是ListView)里边存放的是NavigationDrawer拉开时候显示的内容。

然后记得主Activity要继承

ActionBarActivity
接下来在主Activity中findViewById找到Toolbar和NavigationDrawer实例,假设实例名为mToolbar和mDrawerLayout,然后添加监听器:

setSupportActionBar(mToolbar);
mDrawerToggle= new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar, R.string.app_name, R.string.app_name);
mDrawerLayout.setDrawerListener(mDrawerToggle);
还有一些Menu菜单和DrawerToggle的状态需要改一下的:

 @Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = new MenuInflater(this);
    inflater.inflate(R.menu.menu_main,menu);
    return true;
}

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

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

@Override
public void onBackPressed() {
    if(mDrawerLayout.isDrawerOpen(Gravity.START|Gravity.LEFT)){
        mDrawerLayout.closeDrawers();
        return;
    }
    super.onBackPressed();
}
Toolbar已经成功显示出来了,打开、关闭NavigationDrawer左上的图标也能正常切换了。但是有个问题:Toolbar是显示在原来的Actionbar下方的,这时候运行程序,有可能会发现原来Activity的Actionbar没有消失,而新的Toolbar显示在原来的Actionbar的下方,看起来有两个Actionbar了。别慌,我们只需要在activity的theme或者style中添加几个属性:


         <!-- 这一行是为了防止可能出现的异常:java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead. -->
         <item name="windowActionBar">false</item>
         <!--windowActionModeOverlay属性是设置让toolbar重叠在Actionbar上,将其盖住;高版本请用第三行,低版本请用第二行-->
         <item name="android:windowActionBarOverlay">true</item>
        <item name="windowActionModeOverlay">true</item>

然后重新编译运行项目,是不是发现两个Actionbar只剩下一个了呢~


如果minSdkVersion比较高的话,上文中很多空间可以不用使用support的包。


3.参考文献:

appcompat-v21

https://developer.android.com/training/basics/actionbar/overlaying.html

③http://stackoverflow.com/questions/26818157/actionbardrawertoggle-animation









android中NavigationDrawer的使用以及添加drawer切换时的动画效果

标签:android   navigationdrawer   actionbardrawertoggl   toolbar   切换动画   

原文地址:http://blog.csdn.net/lkasdolka/article/details/45568485

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!