Android Material Design之NavigationView

 

1.概述

       NavigationView是Design Support库中提供的一个控件，要使用的话需要将这个库引入项目中才行，如下所示：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    <!-- 引入库的版本要跟上面v7版本一致 -->
    compile 'com.android.support:design:28.0.0'
    ......
}

 

2.案例

2.1 实现效果

      效果图如下所示：

2.2 添加依赖库

         这里要添加如下依赖库：

/* NavigationView是Design Support库中提供的一个控件 */
compile 'com.android.support:design:28.0.0'
/* 使图片圆形的依赖库 */
compile 'de.hdodenhof:circleimageview:2.1.0'

2.3 添加菜单项布局和头部布局

          添加菜单项布局。 右击res目录->new->Directory，创建一个menu文件夹，然后右击menu文件夹->new->Menu resource file，创建一个nav_menu.xml文件如下所示：每一个item就是一个action按钮

<?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="@drawable/ic_call"
            android:title="Call"/>
        <item
            android:id="@+id/nav_friend"
            android:icon="@drawable/ic_friend"
            android:title="Friend"/>
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/ic_location"
            android:title="Location"/>
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/ic_mail"
            android:title="Mail"/>
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/ic_task"
            android:title="Task"/>
    </group>
</menu>>

        注意：这里使用了<group>标签，并且指定其 checkableBehavior属性为single，表示组中的所有菜单项只能单选。

       添加头部布局：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="#383535">

    <!-- 添加头像圆形image控件 -->
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_iamge"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/ic_image"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"/>
    <!-- 个人邮箱信息 -->
    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="1396758907@qq.com"
        android:textSize="15sp"
        android:textColor="#FFFFFF"/>
    <!-- 昵称信息 -->
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/mail"
        android:text="luckyliuqs"
        android:textSize="15sp"
        android:textColor="#FFFFFF"/>
</RelativeLayout>

2.3 设置主布局样式

         在activity_mian.xml中：

<?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="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="35dp" />
    </FrameLayout>
    <!-- 展示滑动菜单内的内容 -->
    <!-- 添加menu和headerLayout布局 -->
    <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.v4.widget.DrawerLayout>

2.4 在Activity中处理业务

        在MainActivity.java中：

public class MainActivity extends AppCompatActivity {
    private DrawerLayout drawerLayout;
    private NavigationView navigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout = findViewById(R.id.drawer_layout);
        navigationView = findViewById(R.id.nav_view);
        Toolbar toolbar = findViewById(R.id.toolbar);
        //设置支持的ActionBar
        setSupportActionBar(toolbar);
        //设置菜单项Call默认被选中
        navigationView.setCheckedItem(R.id.nav_call);
        //设置菜单项内选中监听事件
        navigationView.setNavigationItemSelectedListener(
                                new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                //设置点击某个菜单项后关闭侧滑菜单
                drawerLayout.closeDrawers();
                return true;
            }
        });
    }

    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.menu:
                //打开侧滑菜单
                drawerLayout.openDrawer(Gravity.START);
                break;
        }
        return true;
    }

}