Android特色控件NavigationView的使用

NavigationView简介

Design包是Android5.0推出的新特性，其包含了许多新出现且具有自己特色的控件，其中包含RecyclerView、CardView和TabLayout等等，当然也包括本文要介绍的具有鲜明特色的NavigationView控件。

NavigationView是Google在侧滑的MaterialDesign的一种规范，所以提出了一个新的控件，用来规范侧滑的基本样式。

Google推荐DrawerLayout和NavigationView结合使用。

NavigationView使用

在布局中使用：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/dl"
    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"
    tools:context="com.main.navigationView.NavigationViewActivity">

    <!-- 内容部分 -->
    <TextView
        android:id="@+id/tv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="内容"
        />
    <!-- 菜单部分 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nvgtv"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="start"
        android:background="@android:color/darker_gray"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/navigation_menu"
        />

</android.support.v4.widget.DrawerLayout>

复制代码

NavigationView在布局中使用需要指定完整类名（包名+类名），其由两部分组成：头部和菜单列表。头部使用app:headerLayout来指定布局，菜单使用app:menu指定。

header_layout布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:gravity="center_horizontal"
              android:orientation="vertical" >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="小明"
        android:textSize="18dp"
        />

</LinearLayout>

复制代码

在header_layout可以根据自己的需求添加头部不一样的布局。

菜单布局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:id="@+id/action_add"
        android:title="添加"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_add"
        />
    <item 
        android:id="@+id/action_delete"
        android:title="删除"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_delete"
        />
    <item
        android:id="@+id/action_upload"
        android:title="上传"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_upload"
        />
    <item 
        android:id="@+id/action_details"
        android:title="详情"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_info_details"
        />
    <item 
        android:id="@+id/action_more"
        android:title="更多"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_more"
        >
        <menu >
            <item 
                android:id="@+id/action_setting"
		        android:title="设置"
		        android:icon="@android:drawable/ic_menu_manage"/>
            <item 
                android:id="@+id/action_edit"
		        android:title="编辑"
		        android:icon="@android:drawable/ic_menu_edit"/>
        </menu>
      </item>

</menu>

复制代码

在menu中还可以设置group标签分组

 <group android:checkableBehavior="none">
        <item 
                android:id="@+id/action_details"
                android:title="详情"
                android:orderInCategory="100"
                android:icon="@android:drawable/ic_menu_info_details"
        />
    </group>
   <group
       android:checkableBehavior="none"
       android:id="@+id/group_settings">
       <item 
                android:id="@+id/action_setting"
		android:title="设置"
		android:icon="@android:drawable/ic_menu_manage"/>
   </group>
</menu>
复制代码

这里要给group设置id，否则没有分割线。

设置NavigationView的选择监听

public class NavigationViewActivity extends AppCompatActivity {

    private NavigationView mNavigationView;
    private TextView tv;
    private DrawerLayout mDL;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_view);

        tv = (TextView) this.findViewById(R.id.tv);
        mDL = (DrawerLayout) this.findViewById(R.id.dl);
        mNavigationView = (NavigationView)this.findViewById(R.id.nvgtv);

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //处理item的点击事件
                tv.setText(item.getTitle());

                mDL.closeDrawers();
                return true;
            }
        });


        View headerView = mNavigationView.getHeaderView(0);
        headerView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                tv.setText("这是header");
                mDL.closeDrawers();
            }
        });


    }

}
复制代码

使用setNavigationItemSelectedListener给NavigationView设置菜单选择的监听，其中MenuItem便是点击选中的菜单项，在监听里开发者可以根据需求做逻辑处理。

运行效果：