Navigation Drawer使用

簡介

Navigation Drawer是在 Material Design 中推出的一種側(cè)滑導(dǎo)航菜單欄控件。包含兩個(gè)部分，一部分是側(cè)滑（DrawerLayout），一部分是導(dǎo)航菜單欄（NavigationView）。

AS新建

利用Android Studio可以快速建立這個(gè)控件

  • 在新建項(xiàng)目時(shí)，在最后選擇Navigation Drawer Activity
新建項(xiàng)目時(shí)
  • 在新建Activity時(shí)，選擇Navigation Drawer Activity
新建Activity時(shí)

DrawerLayout

DrawerLayout布局中，由兩部分組成，一部分是內(nèi)容布局，一部分是側(cè)滑菜單布局。其中側(cè)滑菜單布局通過設(shè)置 android:layout_gravity 屬性，來控制是左側(cè)滑，還是右側(cè)滑。參考實(shí)例代碼

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>
        <TextView
            android:id="@+id/content_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            android:text="Hello World!"/>
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:gravity="center"
        android:background="@android:color/white"
        android:text="導(dǎo)航菜單頁左"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:gravity="center"
        android:background="@android:color/white"
        android:text="導(dǎo)航菜單頁右"/>
</android.support.v4.widget.DrawerLayout>

至此，側(cè)滑效果就實(shí)現(xiàn)了。

側(cè)滑效果

DrawerLayout中也有一些常會用到的方法，來控制例如打開、關(guān)閉菜單，監(jiān)聽滑動事件等，這里暫時(shí)列舉一些，還是得多看api和源碼。

//打開左側(cè)菜單，同理右側(cè)就是 GravityCompat.END
drawerLayout.openDrawer(GravityCompat.START);
//關(guān)閉左側(cè)菜單，同理右側(cè)就是 GravityCompat.END
drawerLayout.closeDrawer(GravityCompat.START);
//設(shè)置抽屜打開時(shí)，剩余擋住內(nèi)容區(qū)域部分的顏色
drawerLayout.setScrimColor(Color.parseColor("#4cff0000"));
//設(shè)置抽屜鎖定模式 LOCK_MODE_LOCKED_OPEN:鎖定 無法滑動
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_OPEN, GravityCompat.START);
//監(jiān)聽滑動事件
drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {
        //抽屜滑動時(shí)回調(diào)
    }

    @Override
    public void onDrawerOpened(View drawerView) {
        //抽屜打開后回調(diào)
    }

    @Override
    public void onDrawerClosed(View drawerView) {
        //抽屜關(guān)閉后回調(diào)
    }

    @Override
    public void onDrawerStateChanged(int newState) {
        //抽屜滑動狀態(tài)改變時(shí)回調(diào)
        switch (newState) {
            case DrawerLayout.STATE_DRAGGING:
                //拖動狀態(tài)
                break;
            case DrawerLayout.STATE_IDLE:
                //靜止?fàn)顟B(tài)
                break;
            case DrawerLayout.STATE_SETTLING:
                //設(shè)置狀態(tài)
                break;
            default:
                break;
        } 
    }
});

NavigationView

NavigationView是兼容包中提供用來實(shí)現(xiàn)導(dǎo)航菜單控件。使用menu資源填充數(shù)據(jù)，可以更簡單高效的實(shí)現(xiàn)導(dǎo)航菜單。

添加依賴
compile 'com.android.support:design:24.1.0'
布局中引用
<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/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>
        <TextView
            android:id="@+id/content_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            android:text="Hello World!"/>
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_drawer_header"
        app:menu="@menu/navigation_drawer_menu"/>
</android.support.v4.widget.DrawerLayout>

NavigationView分為兩部分，一部分是headerLayout，一部分是menu。headerLayout就是對應(yīng)菜單的頂部部分，一般用來顯示用戶信息什么的，menu則對應(yīng)實(shí)際的菜單選項(xiàng)。

定義headerLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/colorPrimary">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="10dp"
        android:text="HeaderLayout"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
</RelativeLayout>
定義menu
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/item_dync"
            android:icon="@mipmap/ic_menu_dync_selected"
            android:title="首頁" />
        <item
            android:id="@+id/item_explore"
            android:icon="@mipmap/ic_menu_explore_selected"
            android:title="發(fā)現(xiàn)" />
        <item
            android:id="@+id/item_message"
            android:icon="@mipmap/ic_menu_message_selected"
            android:title="消息" />
        <item
            android:id="@+id/item_person"
            android:icon="@mipmap/ic_menu_person_selected"
            android:title="我的" />
    </group>

    <item android:title="其他">
        <menu>
            <item
                android:id="@+id/subitem_01"
                android:icon="@mipmap/ic_launcher"
                android:title="分享" />
            <item
                android:id="@+id/subitem_02"
                android:icon="@mipmap/ic_launcher"
                android:title="設(shè)置" />
            <item
                android:id="@+id/subitem_03"
                android:icon="@mipmap/ic_launcher"
                android:title="反饋" />
        </menu>
    </item>
</menu>

這樣NavigationView就添加成功，效果如下：

NavigationView效果
Menu Item 的點(diǎn)擊監(jiān)聽

直接使用 NavigationView 的 setNavigationItemSelectedListener() 方法即可

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId) {
            case R.id.item_dync:
                break;
            case R.id.item_explore:
                break;
            //......
        }
        return true;
    }
});

總結(jié)

Navigation Drawer的用法還是比較簡單的，但是NavigationView的封裝性太高，個(gè)人覺得不是特別實(shí)用，相對自己定義界面可能來的比較方便，或許是自己用的不到家。

關(guān)于抽屜效果，個(gè)人覺得目前而言隨著手機(jī)的屏幕越來越大，導(dǎo)致用戶操作起來不是很方便，現(xiàn)在主流的設(shè)計(jì)還是底部導(dǎo)航欄。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容