在未引入Design Support Library以前，想想我们要实现上面的导航效果，需要怎么做？
我们需要在DrawerLayout里面通过ListView来设置导航条目，然后通过设置ListView的ItemOnclickListener设置相应的点击事件；其实NavigationView的源码也是通过这种方式实现的，唯一复杂的地方就是ListView里的Item很多时候视图并不一样。
如果你想了解这种方式可以查看我的这篇文章Android Material Design之DrawerLayout与ToolBar的使用
谷歌引入的NavigationView的目的是为了将这部分的布局简化了，通过NavigationView中的app:headerLayout和app:menu属性将侧换导航中的头部和菜单布局分离出来。
那我们接下来讲诉怎么实现
1、在gradle中依赖包design包
compile 'com.android.support:design:23.3.0'
2、实现主布局文件
<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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--内容+toolbar-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/custom_toolbar"/>
<!-- 内容部分 -->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<!-- 左侧侧滑部分 -->
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/colorPrimary"
app:headerLayout="@layout/navigationview_header"
app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
3、分别写headerLayout和menu对应的布局navigation_header.xml和菜单drawer.xml文件
navigation_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">
<ImageView
android:id="@+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="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="8dp"
android:layout_marginTop="2dp"
android:text="欢迎关注天天吃豆腐的简书"
android:textColor="@color/colorAccent"
android:textSize="16sp"/>
</RelativeLayout>
drawer.xml
<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>
4、实现代码
public class MainActivity extends AppCompatActivity {
@Bind(R.id.toolbar)
Toolbar mToolbar;
@Bind(R.id.content)
FrameLayout mContent;
@Bind(R.id.navigationView)
NavigationView mNavigationView;
@Bind(R.id.drawerLayout)
DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
mToolbar.setTitle("测试");
setSupportActionBar(mToolbar);
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//创建返回键，并实现打开关/闭监听
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);
//初始化状态
mDrawerToggle.syncState();
//将DrawerLayout与DrawerToggle绑定
mDrawerLayout.addDrawerListener(mDrawerToggle);
mDrawerLayout.setScrimColor(Color.TRANSPARENT); //去除侧边阴影
//设置导航栏NavigationView的点击事件
mNavigationView.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;
}
});
}
}
如果你想默认第一个为点击状态，在drawer中设置android:checked="true"。跟前一篇的自定义侧滑view对比，使用NavigationView可以大大简化我们的代码。代码中的@Bind是引用了Butterknife插件，快速初始化控件。依赖complie 'com.jakewharton:butterknife:7.0.0'。
效果图：
Paste_Image.png
PS:注意如果你的NavigationView中想添加分割线如下图，必须在menu菜单中group标签中添加android:id,否则将无效。
网友评论