天天看點

NavigationView+Drawerlayout+Toolbar實作側滑菜單

原文位址聲明: https://blog.csdn.net/qq_23179075/article/details/52475291

使用

Navigation+Drawerlayout+Toolbar

實作簡單側滑菜單

NavigationView+Drawerlayout+Toolbar實作側滑菜單

使用

Tablayout

,首先需要在項目中加入

Design

dependencies {
    compile 'com.android.support:design:24.1.1' 
}
           

因為要用到

Toolbar

是以首先把主題改為沒有

ActionBar

的主題

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    </style>
</resources>
           

從上面的效果圖可以看出,側滑部分由兩部分組成: 上面的頭像部分和下面的導航菜單部分,這兩個部分分别對應一個Lyout布局檔案, 和一個菜單

menu

檔案。

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="160dp"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@drawable/header_bg">

    <ImageView
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:src="@mipmap/header"/>
    <TextView
        android:layout_marginTop="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18dp"
        android:textColor="#FFF"
        android:text="印象丶亮仔"/>
</LinearLayout>
           

在res/下建立一個

menu

目錄然後再建立

menu/navigation.xml

navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/group1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/single_1"
            android:icon="@mipmap/xiaoxi"
            android:title="我的消息" />
        <item
            android:id="@+id/single_2"
            android:icon="@mipmap/shangcheng"
            android:title="積分商城" />
        <item
            android:id="@+id/single_3"
            android:icon="@mipmap/huiyuan"
            android:title="會員中心" />
        <item
            android:id="@+id/single_4"
            android:icon="@mipmap/zaixian"
            android:title="線上聽歌" />
    </group>
    <item android:title="子菜單">
        <menu>
            <item
                android:id="@+id/item_1"
                android:icon="@mipmap/shiqu"
                android:title="聽歌識曲" />
            <item
                android:id="@+id/item_2"
                android:icon="@mipmap/pifu"
                android:title="主題皮膚" />
            <item
                android:id="@+id/item_3"
                android:icon="@mipmap/yejian"
                android:title="夜間模式" />
            <item
                android:id="@+id/item_4"
                android:icon="@mipmap/dingshi"
                android:title="定時停止播放" />
            <item
                android:id="@+id/item_5"
                android:icon="@mipmap/naozhong"
                android:title="音樂鬧鐘" />
            <item
                android:id="@+id/item_6"
                android:icon="@mipmap/yun"
                android:title="我的音樂雲盤" />
            <item
                android:id="@+id/item_7"
                android:icon="@mipmap/shiqu"
                android:title="聽歌識曲" />
            <item
                android:id="@+id/item_8"
                android:icon="@mipmap/pifu"
                android:title="主題皮膚" />
            <item
                android:id="@+id/item_9"
                android:icon="@mipmap/yejian"
                android:title="夜間模式" />
            <item
                android:id="@+id/item_10"
                android:icon="@mipmap/dingshi"
                android:title="定時停止播放" />
            <item
                android:id="@+id/item_11"
                android:icon="@mipmap/naozhong"
                android:title="音樂鬧鐘" />
            <item
                android:id="@+id/item_12"
                android:icon="@mipmap/yun"
                android:title="我的音樂雲盤" />
        </menu>
    </item>
</menu>
           

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context="zhengliang.com.navigationview.MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
    </android.support.v7.widget.Toolbar>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            app:menu="@menu/navigation"
            app:itemIconTint="@color/colorAccent"
            android:layout_gravity="start"
            app:headerLayout="@layout/header">
        </android.support.design.widget.NavigationView>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>
           

navigation

中的菜單可以用

<group>

來進行分組,分組之間會有一條分割線。

<group>

添加如下屬性,選中的菜單會有一個選中效果。

android:checkableBehavior="single"
           
NavigationView+Drawerlayout+Toolbar實作側滑菜單

當需要嵌套多個子菜單時,可以在

item

嵌套

menu

比如上面的布局檔案中的代碼 最後的效果

NavigationView+Drawerlayout+Toolbar實作側滑菜單

MainActivity.java

public class MainActivity extends AppCompatActivity{
    private android.support.v7.widget.Toolbar toolbar;
    private android.support.design.widget.NavigationView navigationview;
    private android.support.v4.widget.DrawerLayout drawerlayout;

    /*建立一個Drawerlayout和Toolbar關聯的開關*/
    private ActionBarDrawerToggle toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /*初始化View*/
        initViews();
        /*隐藏滑動條*/
        hideScrollBar();
        /*設定ActionBar*/
        setActionBar();
        /*設定Drawerlayout開關*/
        setDrawerToggle();
        /*設定監聽器*/
        setListener();
    }
    /*初始化View*/
    private void initViews() {
        this.drawerlayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        this.navigationview = (NavigationView) findViewById(R.id.navigation_view);
        this.toolbar = (Toolbar) findViewById(R.id.toolbar);
    }
    /*去掉navigation中的滑動條*/
    private void hideScrollBar() {
        navigationview.getChildAt(0).setVerticalScrollBarEnabled(false);
    }
    /*設定ActionBar*/
    private void setActionBar() {
        setSupportActionBar(toolbar);
        /*顯示Home圖示*/
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    /*設定Drawerlayout的開關,并且和Home圖示關聯*/
    private void setDrawerToggle() {
        toggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar, 0, 0);
        drawerlayout.addDrawerListener(toggle);
        /*同步drawerlayout的狀态*/
        toggle.syncState();
    }
    /*設定監聽器*/
    private void setListener() {
        navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.item_1:
                        break;
                    case R.id.item_2:
                        break;
                    case R.id.item_3:
                        break;
                    case R.id.item_4:
                        finish();
                        break;
                }
                drawerlayout.closeDrawer(GravityCompat.START);
                return true;
            }
        });
    }
}
           

注意:在給

drawerlayout

添加

toggle

開關監聽時一定要先設定

ActionBar

是以

drawerlayout.addDrawerListener(toggle)

一定要寫在

setSupportActionBar(toolbar)

前。不然當點選

Toolbar

上的Home 圖示不會産生相應的打開和關閉側滑事件。

其它屬性說明

對圖示進行着色

app:itemIconTint="@color/colorAccent"
           

去除滾動條條