何为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" 菜单文字
2.实现head
180dp是一个比较适中的高度
3.修改主界面布局:
theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar" 指定深色toolbar
popupTheme="@style/AlertDialog.AppCompat.Light" 指定菜单是淡色
layout_gravity="start" 左面滑出菜单
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 = (NavigationView) findViewById(R.id.nav_view);
//引入header和menu
navigationView.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;
}
});