Android NavigationView使用详解

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

Android NavigationView使用详解_第1张图片

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);

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

Android NavigationView使用详解_第2张图片

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

Android NavigationView使用详解_第3张图片

显示图片原本颜色:

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

navView.setItemIconTintList(null);

还有下面两个常用的API:

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

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

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

 
        
        
    

此时效果如下:

Android NavigationView使用详解_第4张图片

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,再获取头部布局,最后设置监听事件:
//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;
            }
        });
Android NavigationView使用详解_第5张图片


你可能感兴趣的:(android,进阶)