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中更好的交互原則的特點。