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//表示此事件已被处理 }
效果如图: