接上篇ToolBar介绍的文章 Material Design学习：ToolBar 开发使用简介
简介
谷歌官方推出了一种侧滑菜单的实现方式（抽屉效果），即 DrawerLayout，在android-support-v4.jar这个包中。
使用理由
- 是Google的亲儿子（推荐）
向下兼容比较简洁，使用方便
另外，在侧滑菜单中都要有导航菜单，Google也为我们准备好了，那就是NavigationView。
NavigationView是Android M中提出一个新的MD风格的组件，它将自己一分为二，上面显示一个通用的布局，下面显示一组菜单。与DrawerLayout一起使用可以实现通用的侧滑菜单。
使用
DrawerLayout有两个子布局
- 第一个是主界面（使用FrameLayout，宽高都match_parent）
- 第二个就是侧滑菜单的布局了（使用NavigationView，通过设置layout_gravity为left 或是right 来确定菜单摆放的位置）。
打开抽屉： DrawerLayout .openDrawer();
关闭抽屉：DrawerLayout.closeDrawer( );
1. 添加依赖
build.gradle
compile 'com.android.support:design:24.0.0'
2. 在布局中使用
- 布局中添加DrawerLayout+NavigationView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="zhj.newtoolbardemo.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/mToolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 内容部分 -->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- 左侧侧滑部分 -->
<android.support.design.widget.NavigationView
android:id="@+id/nv_menu_left"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left" //左侧菜单
app:headerLayout="@layout/header" //导航的顶部布局
app:menu="@menu/menu_drawer" //导航的底部菜单
/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
- 在layout文件夹中新建顶部布局 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="match_parent"
android:background="@color/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="@+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginTop="8dp"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/header"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:layout_marginTop="10dp"
android:text="十年生死两茫茫"
android:textColor="@android:color/white"
android:textSize="16sp"/>
</RelativeLayout>
- 在menu文件夹中新建底部菜单menu_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group>
<item
android:id="@+id/navigation_item1"
android:checkable="true"
android:checked="true"
android:icon="@mipmap/ic_launcher"
android:title="选项一"/>
<item
android:id="@+id/navigation_item2"
android:checkable="true"
android:icon="@mipmap/ic_launcher"
android:title="选项二"/>
<item
android:id="@+id/navigation_item3"
android:checkable="true"
android:icon="@mipmap/ic_launcher"
android:title="选项三"/>
</group>
<item
android:id="@+id/navigation_sub"
android:title="设置">
<menu>
<item
android:id="@+id/navigation_sub_item1"
android:checkable="true"
android:icon="@mipmap/ic_launcher"
android:title="简介"/>
<item
android:id="@+id/navigation_sub_item2"
android:checkable="true"
android:icon="@mipmap/ic_launcher"
android:title="详情"/>
<item
android:id="@+id/navigation_sub_item3"
android:checkable="true"
android:icon="@mipmap/ic_launcher"
android:title="更多"/>
</menu>
</item>
</menu>
3. 在代码中使用
设置ToolBar响应DrawerLayout的状态改变，通过ActionBarDrawerToggle实现DrawerLayout展开关闭的监听。
ActionBarDrawerToggle 的作用：
- 改变android.R.id.home返回图标。
- Drawer拉出、隐藏，带有android.R.id.home动画效果。
- 监听Drawer拉出、隐藏；
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private Toolbar mToolBar;
private ActionBarDrawerToggle mDrawerToggle;
private NavigationView nv_menu_left;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mToolBar = (Toolbar) findViewById(R.id.mToolBar);
nv_menu_left= (NavigationView) findViewById(R.id.nv_menu_left);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
mToolBar.setTitle("标题"); //设置主标题
setSupportActionBar(mToolBar); //设置actionbar
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true); //创建返回键，并实现打开关/闭监听
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolBar, R.string.app_name, R.string.app_name){
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState(); //初始化状态
mDrawerLayout.addDrawerListener(mDrawerToggle); //将DrawerLayout与DrawerToggle绑定
// mDrawerLayout.setScrimColor(Color.TRANSPARENT); //去除侧边阴影
}
给NavigationView设置点击事件
nv_menu_left.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_item1:
mToolBar.setTitle("选项一");
break;
case R.id.navigation_item2:
mToolBar.setTitle("选项二");
break;
case R.id.navigation_item3:
mToolBar.setTitle("选项三");
break;
case R.id.navigation_sub_item1:
mToolBar.setTitle("简介");
break;
case R.id.navigation_sub_item2:
mToolBar.setTitle("详情");
break;
case R.id.navigation_sub_item3:
mToolBar.setTitle("更多");
break;
}
//将选中设为点击状态
item.setChecked(true);
//关闭抽屉
mDrawerLayout.closeDrawers();
return true;
}
});
效果图
效果展示
这里是项目地址
参考文章
http://www.jianshu.com/p/6ec7e9f6a2fe#
http://www.geek99.com/blog/1412
网友评论