Android开发笔记（一百三十三）导航视图NavigationView
Android开发笔记（一百三十三）导航视图NavigationView
导航视图NavigationView
很多App都有个人中心的侧滑菜单，通常在页面左侧边缘右拉时，即可弹出个人中心的菜单页面。对于Android来说，侧滑功能用到了抽屉布局DrawerLayout，我们只要把页面的根布局设置为DrawerLayout，并指定弹出的侧滑视图，就能通过右拉页面左侧边缘，从而拉出定义好的侧滑视图。 有关DrawerLayout的详细说明参见《Android开发笔记（一百二十）两种侧滑布局》，这里就不再赘述了，接下来要介绍的是Android自带的导航视图NavigationView，它是一个侧滑菜单控件，常常用来展示个人中心页面，以及导航菜单栏目。比如下面这个图片，便是从CSDN的App个人中心页面截图而来。
从上图可以看到，导航视图的组成部分不外乎两块，一块位于页面顶部，可展示用户头像、用户昵称、用户头衔等个人信息；另一块位于页面剩余部分，主要提供前往子栏目的导航菜单，每个菜单项均为左图标右文字的布局形式。 NavigationView的结构比较简单，用法也不难。因为NavigationView是在Android5.0后新增的design库中提供，所以要先给App工程引用design库。由于design库依赖于appcompat-v7库，因此得给App工程引用appcompat-v7库。另外，还要补充引用recyclerview-v7库，如果没引用recyclerview的话，运行时会报错“Didn't find class "android.support.design.internal.NavigationMenuView"”。总结一下，要想正常使用导航视图NavigationView，App需要增加三个库的引用，分别是design库、appcompat-v7库和recyclerview-v7库。 在布局文件中使用NavigationView，可设置以下几个专门属性： app:headerLayout : 指定头部布局的资源文件。 app:menu : 指定导航菜单的资源文件。 app:itemBackground : 指定菜单项的的背景。 app:itemTextColor : 指定菜单项的文字颜色。 app:itemTextAppearance : 指定菜单项的文字样式。 app:itemIconTint : 指定菜单项的图标色彩。 下面是个采用了DrawerLayout和NavigationView布局文件例子：
<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/dl_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top|center"
android:paddingTop="30dp"
android:text="首页"
android:textColor="#000000"
android:textSize="20sp" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nv_menu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffdd99"
app:headerLayout="@layout/sliding_header"
app:menu="@menu/menu_one"
app:itemIconTint="#5555ff" />
</android.support.v4.widget.DrawerLayout>下面是布局文件中引用的导航菜单文件menu_one.xml，结构定义与普通的菜单文件基本相同，多出来的group节点用于给菜单项分组，不同的菜单组之间会显示分隔线。菜单文件的详细内容如下：
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<group android:id="@+id/group_zero" >
<item
android:id="@+id/menu_home"
android:icon="@drawable/ic_launcher"
android:title="主页"/>
</group>
<group android:id="@+id/group_one" >
<item
android:id="@+id/menu_search"
android:icon="@drawable/ic_search"
android:title="搜索"/>
<item
android:id="@+id/menu_refresh"
android:icon="@drawable/ic_refresh"
android:title="刷新"/>
</group>
<group android:id="@+id/group_two" >
<item
android:id="@+id/menu_about"
android:icon="@drawable/ic_about"
android:title="关于"/>
<item
android:id="@+id/menu_back"
android:icon="@drawable/ic_back"
android:title="返回"/>
</group>
<group android:id="@+id/group_three" >
<item
android:id="@+id/menu_quit"
android:icon="@drawable/ic_quit"
android:title="退出"/>
</group>
</menu>NavigationView还提供了以下方法，用于在代码中操作导航视图： addHeaderView : 添加头部视图。 removeHeaderView : 移除头部视图。 getHeaderView : 获取指定位置的头部视图。 getHeaderCount : 获取头部视图的数量。 setItemBackground/setItemBackgroundResource : 设置菜单项的背景。 setItemIconTintList : 设置菜单项的图标色彩。 setItemTextColor : 设置菜单项的文字颜色。 setItemTextAppearance : 设置菜单项的文字样式。 setNavigationItemSelectedListener : 设置菜单项的选择监听器。需实现接口OnNavigationItemSelectedListener的方法onNavigationItemSelected，该方法在点击具体的菜单项时触发。 下面是使用上述导航菜单的导航页面截图，之所以看到菜单图标都变成蓝色，是因为在布局文件中指定了菜单图标的色彩为蓝色（app:itemIconTint="#5555ff"）。
如果想让菜单图标显示原来的面貌，可在代码中调用setItemIconTintList方法，将图标色彩设置为null。下面是显示原始菜单图标颜色的导航页面截图。
自定义导航菜单
系统自带的NavigationView已经基本满足导航需求，然而它对于个性化的定制上面支持的并不好。比如下面几点界面调整，NavigationView就无法实现： 1、不能动态调整菜单项的个数与内容。虽然NavigationView提供了inflateMenu方法，但是该方法只能在现有菜单上增加新的菜单，并不能替换掉原有菜单。 2、无法设置菜单文字的大小。 3、每个菜单项只有图标和文字，不能添加其他控件。 4、无法设置每个菜单项的间距。 所以呢，要想实现丰富可定制的导航菜单，还得自己定义一个导航视图。虽说是自定义，其实也没这么复杂，只需把布局文件中原来NavigationView的节点位置换成ListView即可，使用ListView就能随意定制菜单项的布局和风格了。至于导航菜单上面的头部视图，也可调用ListView的addHeaderView方法来实现。 下面是采用ListView定制的导航菜单页面截图。
下面是自定义导航菜单的代码例子：
public class SlidingActivity extends Activity implements OnItemClickListener {
private final static String TAG = "SlidingActivity";
private DrawerLayout dl_sliding;
private TextView tv_sliding;
private ListView lv_sliding;
private ArrayList<MenuItem> mMenuItemList = new ArrayList<MenuItem>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sliding);
dl_sliding = (DrawerLayout) findViewById(R.id.dl_sliding);
tv_sliding = (TextView) findViewById(R.id.tv_sliding);
lv_sliding = (ListView) findViewById(R.id.lv_sliding);
View v = LayoutInflater.from(this).inflate(R.layout.sliding_header, null);
lv_sliding.addHeaderView(v);
mMenuItemList.add(new MenuItem(R.drawable.ic_launcher, "主页"));
mMenuItemList.add(new MenuItem(R.drawable.ic_search, "搜索"));
mMenuItemList.add(new MenuItem(R.drawable.ic_refresh, "刷新"));
mMenuItemList.add(new MenuItem(R.drawable.ic_about, "关于"));
mMenuItemList.add(new MenuItem(R.drawable.ic_back, "返回"));
mMenuItemList.add(new MenuItem(R.drawable.ic_quit, "退出"));
SlidingAdapter adapter = new SlidingAdapter(this, mMenuItemList);
lv_sliding.setAdapter(adapter);
lv_sliding.setOnItemClickListener(this);
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
if (position == 0) {
tv_sliding.setText("您点击了个人头像区域");
} else {
tv_sliding.setText("您点击了菜单项：" + mMenuItemList.get(position-1).menu_name);
}
dl_sliding.closeDrawers();
}
}