滑动菜单是Material Design中最常见的效果之一,只要借助谷歌提供的各种工具,就可以轻松的实现这个功能
用的还是上一个项目
DrawerLayout
所谓的滑动菜单就是将一些菜单选项隐藏起来,而不是放置在主屏幕上,然后可以通过滑动的方式将菜单显示出来,当然了,靠自己实现是很难的,现在借助DrawerLayout控件来实现
- 首先它是一个布局,在布局中允许放入两个直接子控件,第一个子控件是主屏幕上显示的内容,第二个子控件是滑动菜单中显示的内容,因此在activity.xml中就可以写成
最外层使用了DrawerLayout,这个控件是v4库提供的,在这个里面放入了两个直接子控件,第一个是FrameLayout,用于主屏幕中显示的内容,第二个是TextView,用于显示滑动菜单中显示的内容
注意:第二个空间中的
android:layout_gravity="start"
这个属性是必须指定的,因为这个是指定滑动菜单是在屏幕的左边还是右边,left是左,right是右,而设置start是系统自己判断运行程序,在屏幕的左侧边缘向右拖就可以看到了
这个时候向左滑或者点击菜单以外的区域就可以让滑动菜单关闭,从而回到主页面
- 但是,怎么才能让用户知道有这个功能呢,这个时候就要在Toolbar的最左边加入一个导航按钮,点击按钮就可以将滑动菜单的内容展示出来,这样就相当于有两种方式可以打开滑动菜单
- 首先准备一张导航的图标,然后修改MainActivity中的代码
package com.example.tool;
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// 获取到这个实例
drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
}
}
// 加载这个菜单
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
// 处理各个按钮的点击事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this,"you clicked Backup",Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this,"you clicked Delete",Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this,"you clicked Settings",Toast.LENGTH_SHORT).show();
break;
//
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
break;
default:
}
return true;
}
}
- 这里首先获取到了DrawerLayout的实例,然后调用getSupportActionBar()方法获取到了ActionBar实例,然后调用ActionBar的setDisplayHomeAsUpEnabled()方法让导航按钮显示出来,接着调用setHomeAsUpIndicator()方法来设置一个导航的按钮图标
- 实际上,Toolbar最左侧的这个按钮是HomeAsUp按钮,默认是一个返回的箭头,含义是返回上一个活动,这里将默认的样式和作用进行了修改
- 在onOptionsItemSelected()方法中对HomeAsUp按钮的点击事件进行处理,HomeAsUp按钮的id永远都是android.R.id.home,调用 drawerLayout.openDrawer()方法将滑动菜单展示出来
- 注意openDrawer()方法中传入一个Gravity参数,这个就是在xml中定义的滑动菜单在屏幕的左边还是右边还是start,这里传入的是GravityCompat.START
-
运行程序就可以看到
点击按钮,这个滑动菜单就会展示出来
NavigationView
虽然实现了滑动菜单的功能,但是这个菜单有点丑,怎么才能优化呢,这个时候使用到了NavigationView,NavigationViewDesign Support库中的一个控件,不仅是严格按照Material Design的要求来进行设计的,而且还可以将滑动的菜单页面的实现变得简单
- 把这个引入到项目中,在app/build.gradle文件中,在
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
//
compile 'com.android.support:design:26.1.0'
compile 'de.hdodenhof:circleimageview:2.1.0'
}
- 这里添加了两个依赖关系,第一个是Design Support库,第二个是一个开源项目,使用它来轻松的实现图片圆型化的功能
- 使用NavigationView之前,还有需要提前准备连个东西,menu和headerLayout,menu是用来显示在NavigationView中的具体菜单项,而headerLayout是用来在Navigation中显示头部布局的
- 先准备menu,在menu文件夹-->new -->Menu resource file,创建一个nav_menu.xml文件,事先准备好照片
- 这里使用了
标签,将group属性的checkableBehavior属性设置为single,表示组中的所有菜单项只能单选 - 这里定义了四个item,id,icon用于指定图片,title用于指定文字
- 准备headerLayout,这个是一个随意定制的布局,这里设置用户的头像、用户名、邮箱地址,这里也要准备照片,在layout -->new -->Layout resource file 新建一个nav_header.xml文件
- 这里最外层是RelativeLayout,这里的高度设置的是180dp,背景指定为colorPrimary,就是styles.xml中注册的颜色
- CircleImageView是用于将图片进行圆型化的控件,这个的使用和ImageVIew非常的相似,指定了而一个头像,并且居中显示
- 接下来就是两个TextView分别用于显示用户名和邮箱
- menu和headerLayout都准备好了,就可以使用NavigationView了,修改activity_main.xml中的代码
- 这里把之前的文本换成了NavigationView,滑动菜单中显示的内容也就是这个了, app:menu="@menu/nav_menu"就是自定义的menu, app:headerLayout="@layout/nav_header"也是上面自定义
- 布局是完成了,但是还要去处理菜单项中的点击事件,修改MainActivity中的代码
package com.example.tool;
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// 获取到实例
NavigationView navigationView = (NavigationView)findViewById(R.id.nav_view);
drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
}
// 设置默认选中状态
navigationView.setCheckedItem(R.id.nav_call);
// 菜单的事件监听器
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.nav_mail:
Toast.makeText(MainActivity.this,"你点击了邮箱",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_firends:
// 关闭滑动菜单
drawerLayout.closeDrawers();
break;
default:
}
return true;
}
});
}
...
}
- 首先获取到了实例,调用setCheckedItem()方法将打电话设置为默认选中状态
- setNavigationItemSelectedListener()方法设置菜单项选中事件的监听器,当用户点击任意菜单的时候,就会回调onNavigationItemSelected()方法中的逻辑
- 这里调用了DrawerLayout.closeDrawers()方法将滑动菜单关闭
-
运行程序,点击左侧按钮就可以了