Android5.0 之 ToolBar与DrawerLayout配合使用

ToolBar配合DrawerLayout实现左侧动画导航效果

1.xml布局文件实现如下所示，布局中包含一个DrawerLayout,同时滑出的抽屉部分一定要设置属性：android:layout_gravity=”start”，只有设置了这个属性的布局才会作为抽屉部分被滑出。布局实现相对简单，不在一一叙述。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"

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

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ToolbarTheme"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <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:background="#ff00ffaa"
        android:layout_height="match_parent">

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

            <Button
                android:id="@+id/sWalk"
                android:layout_width="100dp"
                android:layout_height="?attr/listPreferredItemHeight"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:background="#00ff00"
                android:text="Walk"
                android:textAppearance="?android:attr/textAppearanceMedium" />

        </LinearLayout>


        <LinearLayout
            android:id="@+id/left_drawer"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:orientation="vertical">

            <ListView
                android:id="@+id/left_drawer_listview"
                android:layout_width="300dp"
                android:layout_height="0dp"
                android:layout_weight="1.0"
                android:choiceMode="singleChoice"
                android:divider="@android:color/transparent"
                android:dividerHeight="0dp"
                android:background="@drawable/sliding_bg" />

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


</LinearLayout>

左侧导航如下图所示，当然点击额时候，会有一个切换的过程，本人不会截取gif图，所以只能贴上如下的图片，会的朋友可以教教我，谢谢！

代码实现

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ActionBarDrawerToggle mDrawerToggle;
    private Toolbar toolbar;

    private DrawerLayout mDrawerLayout;
    private View drawerRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initToolBar();
        initDrawerLayout();
    }
    //初始化抽屉
    private void initDrawerLayout() {
        drawerRootView = findViewById(R.id.left_drawer);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        //ActionBarDrawerToggle 与  setDrawerIndicatorEnabled设置为true 设置好后，当点击左侧导航时，就会实现动画特效
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, 0, 0) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                invalidateOptionsMenu();
            }
        };
        mDrawerToggle.setDrawerIndicatorEnabled(true);
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        mDrawerToggle.syncState();
    }

    private void initToolBar() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle(R.string.app_name);
        toolbar.setTitleTextColor(Color.parseColor(getResources().getString(R.string.action_bar_title_color)));
        toolbar.collapseActionView();
//        toolbar.setBackground(getResources().getDrawable(R.drawable.skin2));
        setSupportActionBar(toolbar);
        if (getSupportActionBar() != null) {
            getSupportActionBar().setHomeAsUpIndicator(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TestInstance.i();
                openOrCloseDrawer();
            }
        });
    }

    private void openOrCloseDrawer() {
        if (mDrawerLayout.isDrawerOpen(drawerRootView)) {
            mDrawerLayout.closeDrawer(drawerRootView);
        } else {
            mDrawerLayout.openDrawer(drawerRootView);
        }
    }

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

}

实现ToolBar与DrawerLayout的联合使用，实现的效果与SlidingMune的效果差不多，只是使用TollBar与DrawerLayout会多出互动效果更好的动画特效，这更符合Androi5.0的material design中更好的交互原则的特点。