MaterialDesign系列文章（二）NavigationView和DrawerLayout實現側滑功能

時間  2019-11-30
標籤 materialdesign 系列 文章 navigationview drawerlayout 實現 側滑 功能 简体版
原文   原文鏈接

你們在開發中可能會遇到這樣的需求，實現一個側滑菜單，之前(long long ago)咱們都是用SlidingMenu實現的！那個時候處理策劃還基本上都是本身判斷滑動距離的，後來MaterialDesign的時候使用NavigationView和DrawerLayout就能很簡單的實現側滑的功能。閒話就說到這裏。。。java

本文的知識點

  • NavigationView和DrawerLayout實現側滑效果(UI層面)
  • 一些佈局文件和API的說明
  • 一些常見的錯誤處理

1.NavigationView和DrawerLayout實現側滑效果(UI層)

其實若是你比較懶的話，在建立Activity的時候，你能夠不選擇那個空頁面的Activity，而像這樣選擇android

建立Navation Drawer

這樣就能夠直接建立一個相應的側滑頁面，不用去本身實現了。因爲本文主要是爲了講解關於怎麼去實現，因此這裏就本身去實現吧！bash

1.1 佈局文件的實現

<?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
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintBottom_toTopOf="@id/dl_content"
        app:layout_constraintTop_toTopOf="parent"
        app:navigationIcon="@mipmap/back_icon"
        app:title="導航菜單的展現"
        app:titleTextColor="@android:color/white" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/dl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/menu_navation_drawer" />

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="僞裝這裏有內容" />
        </LinearLayout>

    </android.support.v4.widget.DrawerLayout>
</LinearLayout>
複製代碼

簡單說明一下：由於一會要演示返回按鈕的問題，因此這裏的佈局是把DrawerLayout放在了Toolbar的下面，若是你直接建立的話，側滑出來的菜單會把Toolbar蓋住。app

  • 這裏要注意一個屬性，android:layout_gravity="left" 表明側滑的方向是從左側出來，這裏你能夠左右各加一個，可是不能上下加。。。不然會出異常的！
  • app:headerLayout="@layout/nav_header" NavigationView頂部顯示的佈局，這裏主要是爲了處理相應的頭像什麼的
  • app:menu="@menu/menu_navation_drawer" Navigation底部顯示的條目

別的就沒有什麼好說的了和其餘控件的屬性都差很少。ide

1.2 頂部頭文件的實現

這個和寫平時的佈局都是同樣的。沒有什麼區別佈局

<?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="wrap_content"
    android:gravity="center"
    android:background="#198672"
    android:minHeight="150dp"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textColor="@android:color/white"
        android:layout_marginTop="10dp"
        android:text="僞裝這裏有一個標題" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textColor="@android:color/white"
        android:text="僞裝這裏又有一個標題" />
</LinearLayout>
複製代碼

1.3 底部條目的佈局

這裏須要有關menu的知識了？若是你不懂能夠看看我簡書的Android中menu的使用集錦，這裏就不講了。。。ui

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@mipmap/ic_call_white_24dp"
            android:title="打電話" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@mipmap/ic_directions_bike_white_24dp"
            android:title="騎行" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@mipmap/ic_dialer_sip_white_24dp"
            android:title="又是打電話" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@mipmap/ic_chat_bubble_outline_white_24dp"
            android:title="消息" />
    </group>

    <item android:title="底部條目組">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@mipmap/ic_call_missed_outgoing_white_24dp"
                android:title="轉彎" />
            <item
                android:id="@+id/nav_send"
                android:icon="@mipmap/ic_import_export_white_24dp"
                android:title="好奇怪" />
        </menu>
    </item>
</menu>
複製代碼

而後咱們就能夠'Run' app了。。。就會看到以下驚悚的場面！！！this

效果圖

2. 一些佈局文件和API的說明

2.1 Navigation的一些屬性

佈局屬性spa

  • app:itemBackground 指定菜單項的的背景顏色
  • app:itemTextColor 指定菜單項的文字顏色
  • app:itemTextAppearance 指定菜單項的文字樣式，這裏引用的是一種樣式有關與樣式的使用能夠參考
<style name="Theme.IconMenu">  
    <!--Menu/item attributes -->  
    <item name="android:itemTextAppearance">@android:style/TextAppearance.Widget.IconMenu.Item</item>  
    <item name="android:itemBackground">@android:drawable/menu_selector</item>  
    <item name="android:itemIconDisabledAlpha">?android:attr/disabledAlpha</item>  
    <item name="android:horizontalDivider">@android:drawable/divider_horizontal_dark</item>  
    <item name="android:verticalDivider">@android:drawable/divider_vertical_dark</item>  
    <item name="android:windowAnimationStyle">@android:style/Animation.OptionsPanel</item>  
    <item name="android:moreIcon">@android:drawable/ic_menu_more</item>  
    <item name="android:background">@null</item>  
</style> 
複製代碼
  • app:itemIconTint 指定菜單項的圖標色彩

API3d

  • addHeaderView(View view) 添加一個頭部，這個頭部能夠添加多個
  • getHeaderCount() 獲取頭目的數量
  • getHeaderView(int index) 根據索引獲取頭部的佈局
  • getItemBackground() 獲取頭部的背景
  • getItemIconTintList() 獲取條目的集合
  • getItemTextColor() 獲取條目的顏色
  • getMenu() 獲取底部的menu對象
  • removeHeaderView(View view) 溢出相應的頭目
  • setCheckedItem(int id) 設置選擇條目
  • setItemBackground(Drawable itemBackground) 設置條目的背景
  • setItemBackgroundResource(int resId) 設置背景圖
  • setItemIconTintList(ColorStateList tint) 設置圖標的集合
  • setItemTextAppearance(int resId) 設置圖標的樣式
  • setItemTextColor(ColorStateList textColor) 設置條目的顏色
  • setNavigationItemSelectedListener(@Nullable OnNavigationItemSelectedListener listener) 這裏寫監聽的時候有一個注意事項，若是你設置了不得效果，請看後面的錯誤集錦。具體的寫法就像下面這樣：
NavigationView nv_left = findViewById(R.id.nv_left);
        nv_left.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav_camera://條目的ID
                        Log.e(TAG, "onNavigationItemSelected: ");
                        break;
                }
                return true;
            }
        });
複製代碼

這裏有個問題，設置了監聽以後，條目會有點擊效果，而且不會在關閉相應的NavigationView。若是你返回true的話，條目會有相應的選中效果，注意一下就能夠了。

2.2 DrawerLayout的一些屬性

API

  • openDrawer(@EdgeGravity int gravity) closeDrawer(@EdgeGravity int gravity);表明打開和關閉側滑出來的佈局，可選參數爲：
    • Gravity.LEFT 左側的
    • Gravity.RIGHT 右側的
  • addDrawerListener(DrawerListener listener) 處理Drawer的狀態的監聽，這裏主要有打開、關閉、狀態改變的回調相應的回調寫的很清楚，這裏就不作過多講解了。至於能夠作什麼就看你的思惟了。。。
  • setDrawerLockMode(@LockMode int lockMode) 啓用和禁用抽屜效果，能夠調用這個方法操做相應的抽屜。有如下三種可選
    • LOCK_MODE_UNLOCKED 未知
    • LOCK_MODE_LOCKED_CLOSED 關閉
    • LOCK_MODE_LOCKED_OPEN 打開
  • getDrawerLockMode(@EdgeGravity int edgeGravity) 獲取抽屜的狀態
  • isDrawerOpen(@EdgeGravity int drawerGravity) 判斷相應的抽屜是不是打開狀態

基本上的API就這麼多，若是感興趣的能夠研究如下DrawerView裏面提供的API。這裏就很少作解釋了。

3. 一些細節的頁面展現問題

3.1 DrawerLayout和Toolbar聯動的效果

效果大概是這個樣子的：

DrawerLayout和Toolbar聯動的效果

主要是看頂部左側的那個按鈕，主要是實現這個功能。這個功能主要是依託ActionBarDrawerToggle實現的，他聯動了DrawerLayout和Toolbar的關聯,看一下具體的代碼實現吧！

//這是帶Home旋轉開關按鈕
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, dl_content,
                toolbar,
                R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        dl_content.addDrawerListener(toggle);
        toggle.syncState();
複製代碼

加上上面的代碼就能夠實現聯動了，可是你聯動的時候可能頂部的顏色是黑色的。反正我剛開始顯示的時候是黑色的。那麼怎麼把這個東西改爲白色呢？只有修改相應的主題樣式了。。。像這個樣子

<!-- 基類的主題添加中間那個內容 -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!--toolbar小漢堡樣式-->
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

    <!--設置左側按鈕的顏色-->
    <style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>
複製代碼

3.2 處理返回按鈕

其實不使用上面的方法，能夠經過isDrawerOpen(@EdgeGravity int drawerGravity)的判斷處理返回按鈕的邏輯問題。

4. 一些常見的問題集錦

4.1 java.lang.RuntimeException: Unable to start activity ComponentInfo異常的處理

關於這個異常，網上的說法不少，有說必須是AppCompat的主題、有說必須有windowNoTitle屬性，都沒有解決這個異常，最後發現若是你在主題中設置了<item name="android:textColorSecondary">#ffffff</item>屬性的話，就會報這個異常。刪了就行了！

4.2 setNavigationItemSelectedListener條目監聽無效的處理方法

這裏處理起來挺奇葩的，你只要把NavigationView放在DrawerLayout的最後面就能夠了。監聽方法就會生效了。。。多是一個BUG吧(如此值汗顏)！

基本上關於兩個控件的組合就這麼多，若是有什麼問題歡迎留言。

歡迎關注，你的支持是我最大的動力

公衆號
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程