Android中DrawerLayout和ActionBarDrawerToggle 的三种使用方式

Android中DrawerLayout和ActionBarDrawerToggle的使用方式主要有以下三种：

第一种方式

第二种方式

第三种方式

从上面的演示效果我们可以发现，这三种使用方式主要区别是在左侧拉出的界面掩盖的位置不同，第一个种方式掩盖Toolbar控件下方界面，第二种方式掩盖状态栏下面的界面，第三种方式是全屏幕掩盖。下面我们主要介绍这三种方式的实现步骤。

1 第一种和第二种方式

将这两种方式放在一起说，是因为这两种实现方式相比第三种实现方式，第一和第二种实现方式相似主要布局部分不同，

第一种方式布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginTop="0dp"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:background="@color/blue">
    </android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RelativeLayout
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="MG_ZXC"
                android:textSize="25sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>
        <RelativeLayout
            android:background="#1ebc9f"
            android:layout_gravity="left"
            android:layout_width="250dp"
            android:layout_height="match_parent">
        </RelativeLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

第二种方式布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="mgzxc.drawerlayoutdemo1.MainActivity">

   <LinearLayout       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

           <android.support.v7.widget.Toolbar
               android:id="@+id/tool_bar"
               android:layout_width="match_parent"
               android:layout_height="50dp"
               android:background="@color/green" />
       <FrameLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent">
           <TextView
               android:text="MG_ZXC"
               android:textSize="30sp"
               android:layout_gravity="center"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content" />
       </FrameLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_gravity="left"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"/>

</android.support.v4.widget.DrawerLayout>

修改样式主题：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!--状态栏颜色-->
        <item name="colorPrimaryDark">@color/Indigo_colorPrimaryDark</item>
        <!--Toolbar颜色-->
        <item name="colorPrimary">@color/Indigo_colorPrimary</item>
        <!--返回键样式-->
        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
        <item name="android:statusBarColor">@color/blue</item>
    </style>
    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@android:color/white</item>
    </style>

</resources>

java使用方式：

 mToolbar = (Toolbar) findViewById(R.id.tool_bar);
        mToolbar.setTitle("MG_ZXC");//customize the title,个性化设置title
        mToolbar.setTitleTextColor(ContextCompat.getColor(this, R.color.white));//设置title颜色
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);//show back button and make it enabled
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_layout_open, R.string.drawer_layout_close);
        mActionBarDrawerToggle.setDrawerIndicatorEnabled(true);
        mActionBarDrawerToggle.setHomeAsUpIndicator(R.mipmap.ic_launcher);//channge the icon,改变图标
        mActionBarDrawerToggle.syncState();show the default icon and sync the DrawerToggle state,如果你想改变图标的话，这句话要去掉。这个会使用默认的三杠图标
        mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);//关联 drawerlayout
        mDrawerLayout.setStatusBarBackgroundColor(ContextCompat.getColor(this, R.color.green));//设置状态栏颜色

2 第三种使用方式

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_marginTop="0dp"
            android:background="@color/green"/>
    </LinearLayout>

    <mgzxc.drawerlayoutdemo3.ScrimInsetsFrameLayout
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/yanse"
        android:fitsSystemWindows="true"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:id="@+id/tv_menu_item"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="10dp"
                android:text="MG_ZXC"
                android:textSize="18sp"/>
        </LinearLayout>
    </mgzxc.drawerlayoutdemo3.ScrimInsetsFrameLayout>
</android.support.v4.widget.DrawerLayout>

ScrimInsetsFrameLayout代码（这个类的效果是让侧滑菜单的Menu区域延伸到状态栏）：

public class ScrimInsetsFrameLayout extends FrameLayout {
    private Drawable mInsetForeground;

    private Rect mInsets;
    private Rect mTempRect = new Rect();
    private OnInsetsCallback mOnInsetsCallback;

    public ScrimInsetsFrameLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public ScrimInsetsFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public ScrimInsetsFrameLayout(
            Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        final TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.ScrimInsetsView, defStyle, 0);
        if (a == null) {
            return;
        }
        mInsetForeground = a.getDrawable(
                R.styleable.ScrimInsetsView_insetForeground);
        a.recycle();

        setWillNotDraw(true);
    }

    @Override
    protected boolean fitSystemWindows(Rect insets) {
        mInsets = new Rect(insets);
        setWillNotDraw(mInsetForeground == null);
        ViewCompat.postInvalidateOnAnimation(this);
        if (mOnInsetsCallback != null) {
            mOnInsetsCallback.onInsetsChanged(insets);
        }
        return true; // consume insets
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        int width = getWidth();
        int height = getHeight();
        if (mInsets != null && mInsetForeground != null) {
            int sc = canvas.save();
            canvas.translate(getScrollX(), getScrollY());

            // Top
            mTempRect.set(0, 0, width, mInsets.top);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Bottom
            mTempRect.set(0, height - mInsets.bottom, width, height);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Left
            mTempRect.set(
                    0,
                    mInsets.top,
                    mInsets.left,
                    height - mInsets.bottom);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Right
            mTempRect.set(
                    width - mInsets.right,
                    mInsets.top, width,
                    height - mInsets.bottom);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            canvas.restoreToCount(sc);
        }
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (mInsetForeground != null) {
            mInsetForeground.setCallback(this);
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (mInsetForeground != null) {
            mInsetForeground.setCallback(null);
        }
    }

    /**
     * Allows the calling container to specify a callback for custom
     * processing when insets change (i.e. when {@link #fitSystemWindows(Rect)}
     * is called. This is useful for setting padding on UI elements
     * based on UI chrome insets (e.g. a Google Map or a ListView).
     * When using with ListView or GridView, remember to set
     * clipToPadding to false.
     */
    public void setOnInsetsCallback(OnInsetsCallback onInsetsCallback) {
        mOnInsetsCallback = onInsetsCallback;
    }

    public static interface OnInsetsCallback {
        public void onInsetsChanged(Rect insets);
    }
}

修改样式 方式同第一种与第二种方式。

java 代码使用方式同前两种。