滑动菜单DrawerLayout是Material Design中最常见的效果之一,借助谷歌提供的各种工具,可以很轻松的实现非常炫酷的菜单效果,上一篇Toolbar的基础上添加滑动菜单,效果如下:
1.先将库引入到项目中,打开app/build.gradle文件,在dependencies闭包中添加如下内容:
compile ‘com.android.support:design:25.3.1’
compile ‘de.hdodenhof:circleimageview:2.1.0’
这里添加了两行依赖关系,第一行就是Design Support库,第二行是一个开源项目CircleImageView,它可以用来轻松实现图片圆形化的功能,CircleImageview的项目主页地址是:https://github.com/hdodenhof/CircleImageView
2.activity_main中的代码做如下修改:
<?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="#009999"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
可以看到,最外层的空间使用了DrawerLayout,DrawerLayout中放置了两个直接子控件,第一个子控件是FrameLayout,用于主屏幕中显示的内容,第二个子控件是NavigationView,用于作为滑动菜单中显示的内容。事实上可以在滑动菜单页面定义任意布局,不过谷歌给我们能提供了更好的方法,就是NavigationView。它是Design Support库中提供的一个控件,可以将滑动菜单的实现变得非常简单。NavigationView中设置了app:menu和app:headerLayout两个属性
首先准备menu,右击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">
<item
android:id="@+id/nav_call"
android:icon="@mipmap/nav_call"
android:title="Call"/>
<item
android:id="@+id/nav_friends"
android:icon="@mipmap/nav_friends"
android:title="Friends"/>
<item
android:id="@+id/nav_location"
android:icon="@mipmap/nav_location"
android:title="Location"/>
<item
android:id="@+id/nav_mail"
android:icon="@mipmap/nav_mail"
android:title="Mail"/>
<item
android:id="@+id/nav_task"
android:icon="@mipmap/nav_task"
android:title="Tasks"/>
</group>
</menu>
接下来准备headerLayout,这是一个可以随意定制的布局,右击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="?attr/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/nav_icon"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="navigation@gmail.com"
android:textColor="#FFF"
android:textSize="14sp"/>
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_above="@id/mail"
android:text="yaoyanbao"
android:textColor="#FFF"
android:textSize="14sp"/>
</RelativeLayout>
重新运行一下程序,然后在屏幕的左侧边缘向右拖动,就可以让滑动菜单显示出来了。但是用户并不知道可以拖动。Material Design建议的做法是在Toolbar的最左边加一个导航按钮的图标,代码如下:
public class MainActivity extends AppCompatActivity {
@InjectView(R.id.toolbar)
Toolbar toolbar;
@InjectView(R.id.drawer_layout)
DrawerLayout drawerLayout;
@InjectView(R.id.nav_view)
NavigationView navView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.inject(this);
//添加Toolbar
setSupportActionBar(toolbar);
//获取actionBar的实例,
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
//显示滑动菜单导航按钮
actionBar.setDisplayHomeAsUpEnabled(true);
//设置滑动菜单导航按钮图标
actionBar.setHomeAsUpIndicator(R.mipmap.ic_menu);
}
//默认选中的菜单项
// navView.setCheckedItem(R.id.nav_call);
//滑动菜单的点击事件
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
drawerLayout.closeDrawers();
return true;
}
});
}
//给Toolbar添加菜单选项
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toorbar, menu);
return true;
}
//Toolbar菜单选项的点击事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.backup:
Toast.makeText(this, "云同步", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "删除", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "设置", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
}
代码中滑动菜单导航按钮的点击事件,以及滑动菜单里面的菜单项的点击事件也都实现了。