Android 抽屉侧栏的实现(NavitionView + DrawerLayout + Toolbar)

今天记录一下抽屉式侧栏的实现

由于使用到了Android5.0的MD风格，所以要导入对应的依赖包（版本要对应support：appcompat的版本）。
compile ‘com.android.support:appcompat-v7:26.+’
compile ‘com.android.support:design:26.+’ //导入md风格依赖包

主要布局activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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="com.android.example.navigationtest.MainActivity"
    android:id="@+id/drawerlayout">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:id="@+id/toolbar"
            app:navigationIcon="@drawable/menu"
            >

        </android.support.v7.widget.Toolbar>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_below="@+id/toolbar"/>

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:id="@+id/navitigation_view"
        app:headerLayout="@layout/headerlayout"
       >

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

使用toolbar代替actionbar，可以在style.xml中把主题改为NoActionBar
或者使用代码getActionBar().hile()隐藏actionbar
通过setSupportActionBar(mToolbar)设置toolbar为actionbar

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

NavigationView 必须是Drawerlayout的子控件，可以通过app:headerLayout=”@layout/headerlayout”为NavigationView添加相应的头布局

主要代码MainActivity.java

package com.android.example.navigationtest;

import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;
    private NavigationView mNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    /**
     * 初始化视图
     */
    private void initView(){
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        mNavigationView = (NavigationView) findViewById(R.id.navitigation_view);

        //设置actionbar为Toolbar
        setSupportActionBar(mToolbar);

        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //打开抽屉
                mDrawerLayout.openDrawer(mNavigationView);
            }
        });
    }
}

上面注释写的很清楚了。监听toolbar的navigationicon按钮，从而实现抽屉打开

效果图（由于没有录制gif的工具，只有静态图）

作者：郑权
原文链接：点击这里