Material Design之侧滑菜单DrawerLayout+NavigationView的使用

最新推荐文章于 2024-08-15 21:07:38 发布
最新推荐文章于 2024-08-15 21:07:38 发布
阅读量1.1k 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16240393/article/details/69390284
版权

　　Material Design的控件感觉很不错，今天我们来学习下DrawerLayout+NavigationView实现侧滑菜单，以前你可能自己写过侧滑菜单，也可能用过slidingmenu或者其他开源库，但是google现在也在Material Design中提供了这样的控件，我们可以直接使用了，下面先看下效果：


侧滑效果图

一、按照惯例，先创建项目然后引入design的依赖包
compile 'com.android.support:design:25.3.1'
二、添加布局文件，简单实现侧滑
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:gravity="center"
        android:text="Home" />

    <TextView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#f0f0f0"
        android:gravity="center"
        android:text="侧滑菜单" />
</android.support.v4.widget.DrawerLayout>

　　DrawerLayout最好为Layout的根布局，否则可能会出现触摸事件被屏蔽的问题；DrawerLayout中放置两个布局，第一个为主界面布局，第二个是侧滑菜单布局（这里使用两个TextView演示），其中侧滑菜单布局必须设置layout_gravity属性，他表示侧滑菜单是在左边还是右边，如果不设置则不会出现侧滑菜单效果或报错，设置了layout_gravity=”start/left”的视图才会被认为是侧滑菜单。此时直接运行项目则可以看到侧滑菜单的效果：


侧滑菜单效果

　　然后就可以在java代码中写侧滑菜单的点击事件和操作了。但是你可能会发现，一个用户不注意可能不会发现侧滑菜单，如果加上个侧滑菜单的开关按钮会比较好些，而且到目前为止侧滑菜单已经实现，也只用了DrawerLayout，那NavigationView是干什么的？好，那接着往下看。

三、添加布局文件，使用NavigationView

① activity_home.xml布局
其中包括app_bar_home.xml布局和NavigationView布局，这里使用include。

<?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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_home"
        app:menu="@menu/activity_home_drawer" />
</android.support.v4.widget.DrawerLayout>

　　NavigationView这个菜单整体上分为两部分，上面一部分叫做HeaderLayout，下面的那些点击项都是menu,效果如下：


NavigationView效果

② app_bar_home.xml布局
其中使用了toolbar来添加侧滑菜单的开关按钮，当然你也可以自己写个ImageView，关于toolbar，下次会专门介绍一下，toolbar的下面是主界面，里面只放了一个TextView。

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.guifa.navigationdrawertest.HomeActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_home" />
</RelativeLayout>

③ content_home.xml布局
主界面。只放置了一个TextView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.guifa.navigationdrawertest.HomeActivity"
    tools:showIn="@layout/app_bar_home">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello World!" />
</RelativeLayout>

④ nav_header_home.xml布局
这是NavigationView的HeaderLayout，里面放了一个ImageView，两个TextView，一般可用户显示用户的头像昵称和邮箱等等。

<?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="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@android:drawable/sym_def_app_icon" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android.studio@android.com" />
</LinearLayout>

⑤ activity_home_drawer.xml菜单
这是NavigationView的menu，里面放了一些item，可以用来切换用户栏目等等。

<?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="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>
</menu>
Style：
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
四、java代码部分
package com.guifa.navigationdrawertest;

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

public class HomeActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            // Handle the camera action
        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

　　以上就是DrawerLayout+NavigationView实现侧滑菜单，是不是效果很好看，也很简单，赶快使用吧，如果有什么错误或者建议，请及时提出，谢谢。

喧嚣世界
关注
专栏目录
Android Material Design 系列之 DrawerLayout + NavigationView 使用详解
一名互联网时代苟且偷生的 Android码农
06-25 1830
前言 DrawerLayout 是 Support Library 包中实现了侧滑菜单效果的控件，可以说 DrawerLayout 是因为第三方控件如 MenuDrawer 等的出现之后，google 借鉴而出现的产物。DrawerLayout 分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（DrawerLayout 自身特性），主内容区的内容可以随着菜单的点击而变化。 一、DrawerLayout 基础使用 DrawerLayout 其实是一个布局控件，继承 ViewGroup，与 Lin
Android NavigationDrawer(侧滑导航栏 DrawerLayout + NavigationView)
Luzhuo 的博客
05-23 6523
Android NavigationDrawer(侧滑导航栏 DrawerLayout + NavigationView) Google官方出品的侧滑导航栏, 可替换长期未维护的SlidingMenu. 除此之外, 还有个第三方开源库MaterialDrawer可供选择 Navigation Drawer 是 Material Design 中的侧滑导航栏, 由抽屉布局 DrawerLayou...
Android代码-MaterialDrawer 一个好用的Material风格的侧滑菜单
08-06
MaterialDrawer > Does your application contain a Drawer? Do you want to have it up and running in less than 5 minutes? Do you want your drawer to follow the Android Design Guidelines? Do you have profiles? Do you need flexibility? Is Google's navigation Drawer of the design support not enough for you? Do you want a simple and easy to understand api? If any (or all) of these questions seem familiar, the MaterialDrawer is the perfect library for you all. Never waste your time again. It provid
Android使用NavigationView和Toolbar和DrawLayout实现侧滑菜单
wangxueqing52的博客
05-10 490
1、首先需要添加appcompat-v7支持:如果是在Android Studio 2.1 Preview3 上创建的项目，默认已经添加了appcompat-v7和design支持了，如果不是最新版AndroidStudio则需要在build.gradle中添加如下代码：dependencies { compile fileTree(dir: 'libs', include: ['*.ja...
C# MaterialDesign抽屉式风格
最新发布
那人那事的博客
08-15 313
本案例主要是使用MaterialDesign Wpf库结合Prism框架进行编写。
drawer的用法_MaterialDrawer开源侧滑菜单的使用手册
weixin_39903477的博客
12-23 398
官方有详细说明，但是我首次查找的时候并没有第一眼就能使用全部功能，而网上也查找了一下，几乎所有的博客都是简简单单的几句代码。。。连句说明都没有，可能是我这小菜鸡理解能力不行，或者大神们认为coding的都是大神。。。按照官方所说，第一步在gradle中添加compile('com.mikepenz:materialdrawer:4.4.1@aar') {transitive = true}第二步就...
MaterialDesign 之 DrawerLayout
weixin_30600197的博客
08-04 97
DrawerLayout 基本使用 我们先来看一下布局 <android.support.v4.widget.DrawerLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/d...
使用design包的下的 DrawerLayout 抽屉--基础
sinat_31820805的博客
11-15 615
如果使用的是 Android Studio ，则可以新建一个 DrawerActivity，系统默认的使用的是 ActionBar+Drawer，若需要使用系统的ActionBar，这样会更加方便。下面我们来整体分析下整个 Activity中的 java代码和 xml布局文件。 protected void onCreate(Bundle savedInstanceState) {
Android Material Design之TabLayout + NavigationView联合使用
06-06
TabLayout和NavigationView是Material Design组件库中的两个重要元素，它们分别用于实现底部标签导航和侧滑菜单。本文将深入探讨如何在Android应用中有效地联合使用这两个组件。 TabLayout是Android支持库中的一个...
学习使用Material Design控件（二）使用DrawerLayout实现侧滑菜单栏效果
08-29
学习使用Material Design控件（二）使用DrawerLayout实现侧滑菜单栏效果 Material Design是一种由Google推出的视觉语言设计规范，旨在为Android操作系统提供一致的视觉风格。DrawerLayout是Material Design控件中...
ToolBar+DrawerLayout + NavigationView
07-14
总结起来，`ToolBar`、`DrawerLayout`和`NavigationView`是构建Android应用现代界面的重要组成部分，它们允许开发者创建符合Material Design规范、用户体验优秀的应用。通过熟练掌握这三个组件的使用，可以提升应用...
Android Material Design 各控件demo
09-11
包括沉浸式，网易侧滑栏，recycleview，dreamlayout、tablelayout等，示例详尽，粘贴可用。
简单WPF左侧导航框
01-06
基于VS2013开发的WPF应用，是一个简单通用的界面框架，定制化了TabControl，达到界面导航的效果，可以将不同的界面放在Page页面中，方便使用。
第5章MaterialDesign风格组件-Drawer抽屉组件
亢少军的博客
01-25 1607
防采集标记：亢少军老师的课程和资料 import 'package:flutter/material.dart'; void main() =&gt; runApp( new MaterialApp( title: 'Drawer抽屉组件示例', home: new LayoutDemo(), ), ); class LayoutDemo extends State...
Android Material Design控件之DrawerLayout
LinWeiJ的博客
12-06 484
Material Design控件之DrawerLayout addDrawerListener;DrawerListener; openDrawer;openDrawer; 与toolbar交互ActionBarDrawerToggle
WPF实战学习笔记02-设计首页导航条
xinzhiya001的博客
07-24 494
直接去md的demo找代码，打开MaterialDesignToolkit.Full解决方案，找demo程序启动即可。另外删掉不重要的即可，需要说明的整个首页的架构应为。使用事件绑定即可，无需使用命令。
WPF 动画实现左右侧不同抽屉栏效果
韬光养晦
10-19 1567
WPF 动画实现左右侧不同抽屉栏效果 窗体xaml代码： <Window x:Class="AnimationDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.co
全面总结侧滑菜单的5种实现方式
qq_32138419的博客
03-19 1095
现在开发中，很多APP都在用侧滑菜单，这个很常见，也有很多第三方库，比如slidingmenu,谷歌官方的DrawerLayout等等。下面我就总结一下侧滑菜单实现的4种方式： 一、自定义ViewGroup ，处理其onTouch事件 二、FrameLayout + 手势处理类GestureDetector 三、使用Google自带的DrawerLayout + NavigationView...
Android DrawerLayout 实现侧滑菜单详解
"Android使用DrawerLayout实现侧滑菜单效果" 在Android应用开发中，侧滑菜单是一种常见的设计模式，它提供了一种优雅的方式来展示附加的导航选项或者设置。DrawerLayout是Android SDK提供的一种布局组件，专门用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值