Android學習之基於DrawerLayout的側邊欄實現

本例，是基於AndroidStudio開發，用到v7包下DrawerLayout，Toolbar，和android.support.design下的NavigationView，需要在gradle中配置

compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:design:25.3.1'

用到Toolbar，是想在側邊欄打開的時候覆蓋Actionbar，如果不想覆蓋Actionbar，可以使用普通佈局代替Toolbar。

效果圖：

下面是具體代碼：

layout/activity_drawer_layout_demo.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayout"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/mToolBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:fitsSystemWindows="true"
            android:minHeight="?attr/actionBarSize"
            android:popupTheme="@style/Widget.AppCompat.ActionBar"
            app:theme="@style/Widget.AppCompat.Light.ActionBar">
        </android.support.v7.widget.Toolbar>

        <!--內容區-->

    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/activity_drawer_layout_demo_header"
        app:menu="@menu/main_navigation_menu">
    </android.support.design.widget.NavigationView>

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

layout/activity_drawer_layout_demo_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="@color/whiteGray"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/headerImageView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:id="@+id/userNameText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="linzhiyong" />
</LinearLayout>

menu/main_navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/favorite"
        android:icon="@mipmap/ic_launcher"
        android:title="收藏" />
    <item
        android:id="@+id/wallet"
        android:icon="@mipmap/ic_launcher"
        android:title="錢包" />
    <item
        android:id="@+id/photo"
        android:icon="@mipmap/ic_launcher"
        android:title="相冊" />
    <item
        android:id="@+id/file"
        android:icon="@mipmap/ic_launcher"
        android:title="文件" />
</menu>

activity

        mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, mToolBar, 0, 0);
        // 添加此句，toolbar左上角顯示開啓側邊欄圖標
         mDrawerToggle.syncState();
        drawerLayout.addDrawerListener(mDrawerToggle);
​
        navigationView.setItemIconTintList(null);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                showToast(item.getItemId() + "--" + item.getTitle().toString());
                return true;
            }
        });

//        // 禁用手勢
//        drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
//        // 打開
//        drawerLayout.openDrawer(Gravity.LEFT);
//        // 關閉
//        drawerLayout.closeDrawer(Gravity.LEFT);