Android(安卓)NavigationView使用详解

何为NavigationView，比如QQ的侧滑菜单就是，给个图片就是下图，分为head和menu上下两部分

1、导入包：

//Design support库

implementation 'com.android.support:design:27.1.1'

//实现图片圆形化

compile 'de.hdodenhof:circleimageview:2.1.0'

2.首先实现menu，如下：

checkableBehavior="single" 表示菜单为单选

icon="@drawable/nav_menu_call" 菜单图标

android:title="Call" 菜单文字

<?xml version="1.0" encoding="utf-8"?>

2.实现head

180dp是一个比较适中的高度

<?xml version="1.0" encoding="utf-8"?>

3.修改主界面布局：

theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar" 指定深色toolbar

popupTheme="@style/AlertDialog.AppCompat.Light" 指定菜单是淡色

layout_gravity="start" 左面滑出菜单

<?xml version="1.0" encoding="utf-8"?>

4.活动部分设置

实例化NavigationView

NavigationView navView = (NavigationView) findViewById(R.id.design_nav_view);

设置图片显示自身颜色，否则默认为灰色

在布局文件中添加app:itemIconTint="@color/blue"属性，表示设置图片的颜色全都为蓝色

显示图片原本颜色：

//让图片就是显示他本身的颜色

navView.setItemIconTintList(null);

还有下面两个常用的API：

app:itemBackground="@color/colorAccent" 设置每一个item的背景颜色

app:itemTextColor="" 设置item的背景颜色

NavigationView的item之间添加上一条分隔线：只需要在menu中将相应的item放到一个group中，并给该group取一个id即可，代码如下：

此时效果如下：

5.头部点击事件

直接通过findViewById实例化设置onClick会崩溃，比较好的方式是通过getHeaderView获取头布局文件

5.1 getHeaderView获取头布局文件方式

//获取头布局文件

View headerView = navView.getHeaderView(0);

然后实例化控件，设置点击事件就行

cirIViewHead = (CircleImageView) headerView.findViewById(R.id.nav_cirI_head);        cirIViewHead.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Toast.makeText(DesignActivity.this,"Head",Toast.LENGTH_SHORT).show();            }        });

5.2 将XML里的静态引入删除：

在代码里 findViewById 找到 NavigationView，然后引入 Header 和 Menu，再获取头部布局，最后设置监听事件：

//findviewbyidnavigationView = (NavigationView) findViewById(R.id.nav_view);//引入header和menunavigationView.inflateHeaderView(R.layout.nav_header);navigationView.inflateMenu(R.menu.nav_menu);//获取头部布局View navHeaderView = navigationView.getHeaderView(0);

cirIViewHead = (CircleImageView) headerView.findViewById(R.id.nav_cirI_head);        cirIViewHead.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Toast.makeText(DesignActivity.this,"Head",Toast.LENGTH_SHORT).show();            }        });

6.菜单点击事件

//菜单事件        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                switch (item.getItemId()){                    case R.id.nav_menu_call:                        Toast.makeText(DesignActivity.this,"Call",Toast.LENGTH_SHORT).show();                        break;                    case R.id.nav_menu_friends:                        Toast.makeText(DesignActivity.this,"Friends",Toast.LENGTH_SHORT).show();                        break;                    case R.id.nav_menu_loaction:                        Toast.makeText(DesignActivity.this,"Loaction",Toast.LENGTH_SHORT).show();                        break;                    case R.id.nav_menu_mail:                        Toast.makeText(DesignActivity.this,"Mail",Toast.LENGTH_SHORT).show();                        break;                    case R.id.nav_menu_cloud:                        Toast.makeText(DesignActivity.this,"Cloud",Toast.LENGTH_SHORT).show();                        break;                    default:                            //关闭滑动菜单                            mDrawerLayout.closeDrawers();                }                //选中此项                //item.setCheckable(true);                return false;            }        });

更多相关文章

随机推荐