滑动菜单是Material Design中最常见的效果之一，只要借助谷歌提供的各种工具，就可以轻松的实现这个功能
用的还是上一个项目
DrawerLayout
所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来，当然了，靠自己实现是很难的，现在借助DrawerLayout控件来实现
- 首先它是一个布局，在布局中允许放入两个直接子控件，第一个子控件是主屏幕上显示的内容，第二个子控件是滑动菜单中显示的内容，因此在activity.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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</FrameLayout>
<TextView
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="This is menu"
android:textSize="30sp"
android:background="#FFF"
/>
</android.support.v4.widget.DrawerLayout>
最外层使用了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
-
运行程序就可以看到
显示导航按钮.png
点击按钮，这个滑动菜单就会展示出来
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文件，事先准备好照片
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_call"
android:icon="@drawable/nav_call"
android:title="Call"
/>
<item
android:id="@+id/nav_firends"
android:icon="@drawable/nav_friends"
android:title="Firends"
/>
<item
android:id="@+id/nav_mail"
android:icon="@drawable/nav_mail"
android:title="Mail"
/>
<item
android:id="@+id/nav_task"
android:icon="@drawable/nav_task"
android:title="Tsak"
/>
</group>
</menu>
- 这里使用了<group>标签,将group属性的checkableBehavior属性设置为single，表示组中的所有菜单项只能单选
- 这里定义了四个item，id，icon用于指定图片，title用于指定文字
- 准备headerLayout，这个是一个随意定制的布局，这里设置用户的头像、用户名、邮箱地址，这里也要准备照片，在layout -->new -->Layout resource file 新建一个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="?attr/colorPrimary"
>
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/a"
android:layout_centerInParent="true"
/>
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textColor="#fff"
android:textSize="14sp"
android:text="123456@163.com"
/>
<TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/username"
android:textColor="#fff"
android:textSize="14sp"
android:text="shanqiu"
/>
</RelativeLayout>
- 这里最外层是RelativeLayout，这里的高度设置的是180dp,背景指定为colorPrimary，就是styles.xml中注册的颜色
- CircleImageView是用于将图片进行圆型化的控件，这个的使用和ImageVIew非常的相似，指定了而一个头像，并且居中显示
- 接下来就是两个TextView分别用于显示用户名和邮箱
- menu和headerLayout都准备好了，就可以使用NavigationView了，修改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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
/>
</android.support.v4.widget.DrawerLayout>
- 这里把之前的文本换成了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()方法将滑动菜单关闭
-
运行程序，点击左侧按钮就可以了
默认状态.png
点击状态.png
