[Android]DrawerLayout滑动菜单+NavigationView

简介: [Android]DrawerLayout滑动菜单+NavigationView

DrawerLayout的介绍


滑动菜单,就是将一些菜单选项隐藏起来,而不是放置在主屏幕上,然后可以通过滑动的方式将菜单显示出来。这种方式即节省了屏幕空间,又实现了非常好的动画效果,是Material Design中推荐的做法。

DrawerLayout的用法


DrawerLayout是一个布局,在布局中允许放入两个直接的子控件:

第一个子控件是主屏幕中显示的内容。

第二个子控件是滑动菜单中显示的内容。

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar1"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"//高度设置为actionBar的高度
                android:background="?attr/colorPrimary"//背景颜色设置为colorPrimary
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"//单独将弹出的菜单项指定为浅色主题
              />
    />
   <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="This is menu"
        android:layout_gravity="start"
        android:background="#fff"
        android:textSize="30sp"/>
</androidx.drawerlayout.widget.DrawerLayout>

添加导航按钮展示滑动菜单

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)
        supportActionBar?.let {
            it.setHomeAsUpIndicator(R.drawable.is_menu)//设置一个导航按钮图标
           it.setDisplayHomeAsUpEnabled(true)//让导航按钮显示出来
        }
   }
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.toolbar,menu)
        return true
    }
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            android.R.id.home->{
                var drawerLayout:DrawerLayout=findViewById(R.id.drawerLayout)
                drawerLayout.openDrawer(GravityCompat.START)//将滑动菜单展现初来
            }
            ... 
        }
        return true
    }
}

NavigationView的介绍


NavigationView是Material库中提供的一个控件,它不仅是严格按照Material Design的要求设计的,而且可以将滑动菜单页面的实现变得非常简单。

NavigationView的使用


添加依赖

implementation 'com.google.android.material:material:1.7.0'
    implementation 'de.hdodenhof:circleimageview:3.0.1'

先来准备菜单项

res/menu/nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">//single表示组中的所有菜单项只能单选
        <item
            android:id="@+id/navCall"
            android:title="Call"
            android:icon="@drawable/nav_call"/>
        <item
            android:id="@+id/navFriends"
            android:title="Friend"
            android:icon="@drawable/is_friends"/>
        <item
            android:id="@+id/navLocation"
            android:title="Location"
            android:icon="@drawable/is_location"/>
        <item
            android:id="@+id/navMail"
            android:title="Main"
            android:icon="@drawable/nav_mail"/>
        <item
            android:id="@+id/navTask"
            android:icon="@drawable/nav_tasks"
            android:title="Tasks"/>
    </group>
</menu>

准备头部布局

res/layout/nav_header.xml

<?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="180dp"
    android:padding="10dp"
    android:background="@color/purple_500">
    <de.hdodenhof.circleimageview.CircleImageView//将图片圆形化
        android:id="@+id/iconImage"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/img"
        android:layout_centerInParent="true"/>
    <TextView
        android:id="@+id/mailText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="1111111111@qq.com"
        android:textColor="#FFF"
        android:textSize="14sp"/>
    <TextView
        android:id="@+id/userText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/mailText"
        android:text="TT"
        android:textColor="#FFF"
        android:textSize="14sp"/>
</RelativeLayout>

定义NavigationView

<com.google.android.material.navigation.NavigationView
        android:id="@+id/navView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"//显示具体的菜单项
        app:headerLayout="@layout/nav_header"//显示头部布局
/>

处理菜单项的点击事件

navView.setCheckedItem(R.id.navCall)//将Call菜单项设置为默认选中
navView.setNavigationItemSelectedListener {//设置一个菜单项选中事件的监听器
            drawerLayout.closeDrawers()//将滑动菜单关闭
            true//表示此事件已被处理
}

效果如图:

目录
相关文章
|
29天前
|
Android开发
Android自带的DrawerLayout和ActionBarDrawerToggle实现侧滑效果
Android自带的DrawerLayout和ActionBarDrawerToggle实现侧滑效果
10 0
|
8月前
|
Android开发
Android 中选项菜单(Option menu)的用法
Android 中选项菜单(Option menu)的用法
85 0
|
4月前
|
XML Java Android开发
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战(附源码 可直接使用)
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战(附源码 可直接使用)
67 0
|
4月前
|
XML Java Android开发
Android Studio App开发中工具栏Toolbar、溢出菜单OverflowMenu、标签布局TabLayout的讲解及实战(实现京东App的标签导航栏,附源码)
Android Studio App开发中工具栏Toolbar、溢出菜单OverflowMenu、标签布局TabLayout的讲解及实战(实现京东App的标签导航栏,附源码)
63 0
|
9月前
|
XML Android开发 数据格式
Android 彩色上下文菜单 Context
Android 彩色上下文菜单 Context
|
9月前
|
XML Android开发 数据格式
Android上机实验-4 菜单和对话框
Android上机实验-4 菜单和对话框
112 1
|
9月前
|
XML Java 测试技术
【Android开发日常】一文弄懂桌面图标快捷菜单 & 桌面小组件
开发可以定义快捷方式,以便在应用中执行特定操作。 这些快捷方式可在受支持的启动器或助理(如 Google 助理)中显示,方便用户快速启动应用中的常见任务或推荐任务。 通过本文你还将了解一些可提升快捷方式效果的最佳做法。
|
10月前
|
前端开发 Android开发
Android高仿qq及微信底部菜单的几种实现方式
Android高仿qq及微信底部菜单的几种实现方式
|
10月前
|
数据库 Android开发
重新构建711的Android项目(一),巧妙的小屏菜单查询框架实现
重新构建711的Android项目(一),巧妙的小屏菜单查询框架实现
|
11月前
|
XML Android开发 数据格式
【Android】DrawerLayout抽屉布局的写法
抽屉布局就类似那种侧拉出来的界面。 一个页面想要实现抽屉布局很简单! 这个XML文件包含抽屉布局的代码。
94 0