使用 DrawerLayout 实现 Material Design风格的侧滑

原文地址：http://www.jianshu.com/p/3fe2acac0ddb

不知道简书怎么并排图片?（T﹏T）

先看效果吧!

效果一:

Android 2.3 效果

Android 5.0 效果

效果二:

Android 2.3 效果

Android 5.0 效果

分析:

1.0 效果一和效果二的区别 drawerLayout 跟 ActionBar 的位置区别,
效果一会覆盖 ActionBar,
效果二显示在ActionBar 下方.

• Android 2.3 和5.0的区别是5.0的状态栏和 app 连在一块了.更统一了.

下面是2种方式的实现(本工程是以 android studio 实现):
1.0 首先在项目的工程底下的 Build,gradle

dependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    compile 'com.android.support:appcompat-v7:21.0.3'}

studio 在新建的时间默认是有的,检查一下 appcompat 的版本,在这之上版本都可以.

value 下的dimens.xml

    <dimen name="tool_bar_top_padding">0dp</dimen>

value 下的style.xml

  <!-- Base application theme. -->    <style name="NoActionBarAppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    </style>    <!-- Base application theme. -->    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    </style>

在 value-v21(没有就新建) dimens.xml

    <dimen name="tool_bar_top_padding">24dp</dimen>

在 value-v21(没有就新建) 下的style.xml

 <style name="NoActionBarAppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorPrimaryDark</item>        <item name="android:windowDrawsSystemBarBackgrounds">true</item>        <item name="android:statusBarColor">@android:color/transparent</item>        <item name="android:windowTranslucentStatus">true</item>        <item name="android:windowContentTransitions">true</item>        <item name="android:windowAllowEnterTransitionOverlap">true</item>        <item name="android:windowAllowReturnTransitionOverlap">true</item>    </style>    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorPrimaryDark</item>    </style>

NoActionBarAppTheme: 适用使用 ToolBar 来代替 ActionBar 的Activity

AppTheme :适用在使用 ActionBar上的 Activity.

效果一:
布局文件:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.mingle.service.ui.MainActivity">    <RelativeLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:orientation="vertical">        <android.support.v7.widget.Toolbar            android:id="@+id/toolBar"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:background="@color/colorPrimary"            android:minHeight="?attr/actionBarSize"                   android:paddingTop="@dimen/tool_bar_top_padding">        </android.support.v7.widget.Toolbar>        <FrameLayout            android:id="@+id/contentFL"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_below="@+id/toolBar" >            </FrameLayout>    </RelativeLayout>    <LinearLayout        android:id="@+id/menuLL"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_gravity="start"        android:clickable="true"        android:background="@android:color/white"        android:orientation="vertical"><............这里写你自己 的布局...../>    </LinearLayout></android.support.v4.widget.DrawerLayout>

以android.support.v4.widget.DrawerLayout 为根控件.
DrawerLayout下包裹两个控件.第一个控件是内容控件,第二个是侧滑控件
使用android:layout_gravity 来指定它的滑动位置, start 表示从左滑出, end 表示从右滑出.

Toolbar 里面有两个属性很关键:
android:minHeight="?attr/actionBarSize",这个表示引用系统 ActionBar 的高度.
android:paddingTop="@dimen/tool_bar_top_padding"这个是来引用资源文件里面的tool_bar_top_padding的高度,这个高度主要是为了对5.0做适配,在5.0 上为24dp,其他版本为0dp

效果1的 androidmanifest.xml 是这样定义的

      <activity            android:name=".activity.Drawerlayout1Activity"            android:theme="@style/NoActionBarAppTheme"            android:label="@string/title_activity_dralayout1" >        </activity>

效果1的 在 activity onCreate()中这样写道:

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer); toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));        setSupportActionBar(toolbar);        ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open_string,R.string.close_string);        actionBarDrawerToggle.syncState();     drawerLayout.setDrawerListener(actionBarDrawerToggle);

效果二:
布局文件

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.mingle.service.ui.MainActivity">    <RelativeLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:orientation="vertical">        <FrameLayout            android:id="@+id/contentFL"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_below="@+id/toolBar" >            </FrameLayout>    </RelativeLayout>    <LinearLayout        android:id="@+id/menuLL"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_gravity="start"        android:clickable="true"        android:background="@android:color/white"        android:orientation="vertical"><............这里写你自己 的布局...../>    </LinearLayout></android.support.v4.widget.DrawerLayout>

相较于效果一,他并没有使用 toolBar 来代替 ActionBar 所以它的主题是AppTheme

在 androidmanifest.xml中:

 <activity            android:name=".activity.DrawerLayout2Activity"            android:theme="@style/AppTheme"            android:label="@string/title_activity_drawer_layout2" >        </activity>

在 Activity onCreate 中这样写道:

        drawerLayout= (DrawerLayout) findViewById(R.id.drawer);        getSupportActionBar().setHomeButtonEnabled(true);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,R.string.open_string,R.string.close_string);        actionBarDrawerToggle.syncState();       drawerLayout.setDrawerListener(actionBarDrawerToggle);

在 Activity onOptionsItemSelected 方法

 int id = item.getItemId();        //noinspection SimplifiableIfStatement        if (id == android.R.id.home) {            if(  drawerLayout.isDrawerOpen(GravityCompat.START)                    ){                drawerLayout.closeDrawers();            }else{                drawerLayout.openDrawer(GravityCompat.START);            }            return true;        }        return super.onOptionsItemSelected(item);