阿里HR: 你会 Android 实现侧滑菜单-design吗? 简友看了,原来这么简单呀!

google提供的Design开发包里,有很多实用好看的新控件,这里介绍下使用DrawerLayout+NavigationView实现侧滑菜单效果

要使用Design包,只要在项目的build.gradle中添加下依赖就好(记得更新SDK到最新版本)

dependencies {     compile 'com.android.support:design:23.4.0'}

使用起来很简单,我们基本上只需要写写布局就好了

布局文件



     
     
      
       //(1140267353)一起成长一起加油的伙伴群!软件测试,与你同行!    
          

           
      

简单的把NavigationView放在DrawerLayout里,在实践中发现个问题,只有把NavigationView控件放在DrawerLayout布局最后面,NavigationView控件才能响应菜单的点击事件,不知道大家遇到了这样的问题吗
app:headerLayout 设置NavigationView的头布局
app:menu 设置NavigationView的菜单布局
android:layout_gravity start或left把窗口隐藏到界面左边,end或right隐藏到右边

菜单头部navi_head布局


 

       

  

菜单项menu_drawer布局


     

           
               

               

           
   
            
   
           
       

      
          
                  
                      

                  
          
   

图个方便,这里的icon我就使用的mipmap下的系统图片,可更改成drawable下的自定义图片

主要代码

/**
 * DrawerLayout+NavigationView实现侧滑菜单
 * Created by zhuwentao on 2016-08-16.
 */
public class MainActivity extends AppCompatActivity {
 
    /** 抽屉视图 */
    private DrawerLayout mDrawerLayout;
 
    /** 侧滑菜单视图 */
    private NavigationView mMenuNv;
 
    /** 打开侧滑菜单 */
    private TextView mOpenMenuTv;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();(1140267353)一起成长一起加油的伙伴群!软件测试,与你同行!
        initListener();
    }
 
    /**
     * 初始化界面
     */
    private void initUI() {
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mMenuNv = (NavigationView) findViewById(R.id.nv_layout);
        mOpenMenuTv = (TextView) findViewById(R.id.tv_open);
    }
 
    /**
     * 初始化监听
     */
    private void initListener() {
 
        mOpenMenuTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 打开侧滑菜单
                mDrawerLayout.openDrawer(GravityCompat.START);
            }
        });
 
        // 设置侧滑菜单点击事件监听
        mMenuNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
 
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                selectItem(item.getItemId());
                // 关闭侧滑菜单
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
    }
 
    /**
     * 响应item点击事件
     * @param itemid
     */
    private void selectItem(int itemid) {
        switch (itemid) {
            case R.id.menu_mon:
                Toast.makeText(MainActivity.this, "点击Mon", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_tues:
                Toast.makeText(MainActivity.this, "点击Tues", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_wed:
                Toast.makeText(MainActivity.this, "点击Wed", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_thurs:
                Toast.makeText(MainActivity.this, "点击Thurs", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_fri:
                Toast.makeText(MainActivity.this, "点击Fri", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_sat:
                Toast.makeText(MainActivity.this, "点击 Sat", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_sun:
                Toast.makeText(MainActivity.this, "点击 Sun", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }
 
}
 

效果图:(1140267353)一起成长一起加油的伙伴群!软件测试,与你同行!


这里写图片描述

(1)去除滚动条
代码中加上下面的代码,传入当前的NavigationView对象进入就能去掉滚动条啦

      /**
     * 不显示滚动条
     */
    private void removeNavigationViewScrollbar(NavigationView navView) {
        if (navView != null) {
            NavigationMenuView navigationMenuView = (NavigationMenuView) navView.getChildAt(0);
            if (navigationMenuView != null) {
                navigationMenuView.setVerticalScrollBarEnabled(false);
            }
        }
    }

(2)让二级菜单也有选中效果
想让二级菜单也有选中效果,网上比较流行的一个方法特别麻烦
先去掉menu布局中group的android:checkableBehavior=”single”属性,再给每个item添加android:checkable=”true”,最后修改NavigationView监听的代码:

 // 设置侧滑菜单点击事件监听
        mMenuNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
 
            private MenuItem mMenuItem;
 
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                selectItem(item.getItemId());
                if (mMenuItem != null) {
                    mMenuItem.setChecked(false);
                }
                item.setChecked(true);
                mMenuItem = item;
                // 关闭侧滑菜单
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

但实际上据我的测试,只要添加一行代码item.setCheckable(true)就能起到同样的显示效果了
不需要修改其他界面

        // 设置侧滑菜单点击事件监听
        mMenuNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                selectItem(item.getItemId());
                item.setCheckable(true);
                // 关闭侧滑菜单
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

(3)设置菜单从右滑出

修改NavigationView布局文件中android:layout_gravity=”end”,再设置打开时候的参数为mDrawerLayout.openDrawer(GravityCompat.END),菜单就会从右边滑出了

(4)实例化headerLayout中的控件
如果我们需要使用headerLayout布局中的控件该怎么找到它呢,这里不能直接调用findViewById()去找,需要使用以下方式,先获取头部的View,在findViewById()

    View view = mMenuNv.getHeaderView(0);
    ImageView mImageIv = (ImageView) view.findViewById(R.id.nv_head_image);
这里写图片描述

最后

俺叫小枫,一个成天想着一夜暴富的测试员

(1140267353)一起成长一起加油的伙伴群!软件测试,与你同行!
群内可领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料!

点赞关注不迷路!!!【三连ღ】,有问题也可私聊哟~(╹▽╹)**

你可能感兴趣的:(阿里HR: 你会 Android 实现侧滑菜单-design吗? 简友看了,原来这么简单呀!)