android新特性：DrawerLayout與NavigationView配合使用

首先看一下效果吧


20170120150737931.png

Android Design Support Library中增加了 NavigationView與DrawerLayout這個控件。代替SlidingMenu項目中的使用！

在這里讓我們來學習一下DrawerLayout和NavigationView的使用吧！

在工程中添加依賴：

 compile 'com.android.support:design:25.0.0'

在Material Design中，NavigationView導航與DrawerLayout抽屜，被設計用于應用導航，提供了一種通用的導航方式，體現(xiàn)了設計的一致性。

NavigationView是一個導航菜單框架，使用menu資源填充數(shù)據(jù)，使我們可以更簡單高效的實現(xiàn)導航菜單。

在XML中使用DrawerLayout與NavigationView進行布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.hnshangyu.navigationview.MainActivity">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--主頁面-->
        <FrameLayout
            android:id="@+id/fl_main"
            android:background="@color/colorAccent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <!--側(cè)滑頁-->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation"
            android:layout_width="320dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer" />
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

注意其中NavigationView的兩個自定義屬性
app:headerLayout接收一個layout，作為導航菜單頂部的Header，即效果圖中的側(cè)滑頁圖片部分，開發(fā)中設置則有，不設置則無。
app:menu接收一個menu，作為導航菜單的菜單項，幾乎是必選項，不然這個控件就失去意義了。但也可以在運行時動態(tài)改變menu屬性。

用于NavigationView的典型menu文件，應該是一個可選中菜單項的集合。其中checked=”true”的item將會高亮顯示，這可以確保用戶知道當前選中的菜單項是哪個。

側(cè)滑頁頭布局drawer_header中的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_recyclerview_09" />
</RelativeLayout>

在這里只設置了一張圖片，在這里其實有個疑惑，也是注意的地方，就是頭布局在Activity中怎么得到并設置點擊事件等操作呢？稍后看代碼！

menu/drawer的布局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_one"
            android:icon="@mipmap/wsxx"
            android:title="huangixoaguo" />
        <item
            android:id="@+id/navigation_item_two"
            android:icon="@mipmap/wddd"
            android:title="目錄" />
        <item
            android:id="@+id/navigation_item_three"
            android:icon="@mipmap/wdyd"
            android:title="佳佳" />
        <item
            android:id="@+id/navigation_item_four"
            android:icon="@mipmap/wdyy"
            android:title="鬧鐘" />
        <item
            android:id="@+id/navigation_item_five"
            android:icon="@mipmap/sz"
            android:title="設置" />

        <item
            android:id="@+id/navigation_subheader_one"
            android:icon="@mipmap/sz"
            android:title="子條目">
            <menu>
                <item
                    android:id="@+id/navigation_sub_item_one"
                    android:icon="@mipmap/wdyd"
                    android:title="佳佳" />
                <item
                    android:id="@+id/navigation_sub_item_two"
                    android:icon="@mipmap/wdyy"
                    android:title="鬧鐘" />
            </menu>
        </item>


        <item
            android:id="@+id/navigation_subheader_two"
            android:icon="@mipmap/sz"
            android:title="子條目">
            <menu>
                <item
                    android:id="@+id/navigation_sub_item_four"
                    android:icon="@mipmap/wdyd"
                    android:title="佳佳" />
                <item
                    android:id="@+id/navigation_sub_item_five"
                    android:icon="@mipmap/wdyy"
                    android:title="鬧鐘" />
            </menu>
        </item>
        <item
            android:id="@+id/navigation_subheader_three"
            android:icon="@mipmap/sz"
            android:title="子條目">
            <menu>
                <item
                    android:id="@+id/navigation_sub_item_six"
                    android:icon="@mipmap/wdyd"
                    android:title="佳佳" />
                <item
                    android:id="@+id/navigation_sub_item_seven"
                    android:icon="@mipmap/wdyy"
                    android:title="鬧鐘" />
            </menu>
        </item>
        <item
            android:id="@+id/navigation_subheader_four"
            android:icon="@mipmap/sz"
            android:title="子條目">
            <menu>
                <item
                    android:id="@+id/navigation_sub_item_eight"
                    android:icon="@mipmap/wdyd"
                    android:title="佳佳" />
                <item
                    android:id="@+id/navigation_sub_item_nine"
                    android:icon="@mipmap/wdyy"
                    android:title="鬧鐘" />
            </menu>
        </item>
    </group>
</menu>

里面使用menu的嵌套，來顯示分組子標題！

Activity中的操作

package cn.hnshangyu.navigationview;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import butterknife.Bind;
import butterknife.ButterKnife;
import cn.hnshangyu.navigationview.utils.UIUtils;

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.fl_main)
    FrameLayout flMain;
    @Bind(R.id.navigation)
    NavigationView mNavigationView;
    @Bind(R.id.drawer_layout)
    DrawerLayout mDrawerLayout;
    private RelativeLayout headerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        //得到頭布局
        headerView = (RelativeLayout) mNavigationView.getHeaderView(0);
        initListener();
    }

    private MenuItem lastItem;

    private void initListener() {
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()) {
                    case R.id.navigation_item_one:
                        break;
                    case R.id.navigation_item_two:
                        break;
                    case R.id.navigation_item_three:
                        break;
                    case R.id.navigation_item_four:
                        break;
                    case R.id.navigation_sub_item_one:
                        break;
                    case R.id.navigation_sub_item_two:
                        break;
                    case R.id.navigation_sub_item_four:
                        break;
                    case R.id.navigation_sub_item_five:
                        break;
                    case R.id.navigation_sub_item_six:
                        break;
                    case R.id.navigation_sub_item_seven:
                        break;
                    case R.id.navigation_sub_item_eight:
                        break;
                    case R.id.navigation_sub_item_nine:
                        break;
                    case R.id.navigation_item_five:
                        break;
                }
                if (lastItem != null) {
                    lastItem.setChecked(false);
                }
                item.setChecked(true);
                lastItem = item;
                UIUtils.showToast(item.getTitle().toString());
                mDrawerLayout.closeDrawers();
                return false;
            }
        });
        headerView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                UIUtils.showToast("頭像");
                mDrawerLayout.closeDrawers();
            }
        });
    }
}

用setNavigationItemSelectedListener方法來設置當導航項被點擊時的回調(diào)。OnNavigationItemSelectedListener會提供給我們被選中的MenuItem，這與Activity的onOptionsItemSelected非常類似。通過這個回調(diào)方法，我們可以處理點擊事件，改變item的選中狀態(tài)，更新頁面內(nèi)容，關閉導航菜單，以及任何我們需要的操作。

其中的到headview的方法在這里我使用的是： navigationView.getHeaderView(0)的方式，如果子view較多

 headerView = navigationView.getHeaderView(0);
    headImg = (ImageButton)headerView.findViewById(R.id.user_head_img);
    userName = (TextView) headerView.findViewById(R.id.user_name);
    userDescription = (TextView) headerView.findViewById(R.id.user_description);

這種方式可以得到子view。

或：

先在Activity中聲明NavigationView，然后再通過View view = NavigationView.inflateHeaderView(int LayoutResID)這個方法導入頭部布局文件，
這就意味著在NavigationView中不會靜態(tài)去設置app:header屬性，并且獲取了頭部的View,這樣就可以通過View.findId...()方法來定位和監(jiān)聽了。

好了，差不多到這里基本的使用方法就實現(xiàn)了！有不好的地方，歡迎大家指出….謝謝?。。?/p>

Demo下載：http://download.csdn.net/detail/huangxiaoguo1/9742204

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

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

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