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


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

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

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

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

    布局文件

    <?xml version="1.0" encoding="utf-8" ?>
    
    
    
    <android.support.v4.widget.DrawerLayout
    
    
    
        xmlns:android="http://schemas.android.com/apk/res/android"
    
    
    
        android:id="@+id/drawer_layout"
    
    
    
        android:layout_width="match_parent"
    
    
    
        android:layout_height="match_parent"
    
    
    
        xmlns:app="http://schemas.android.com/apk/res-auto" >
    
    
    
     
    
    
    
        <!-- 界面布局 -->
    
    
    
        <LinearLayout
    
    
    
            android:layout_width="match_parent"
    
    
    
            android:layout_height="match_parent"
    
    
    
            android:gravity="center">
    
    
    
     
    
    
    
            <TextView
    
    
    
                android:id="@+id/tv_open"
    
    
    
                android:layout_width="wrap_content"
    
    
    
                android:layout_height="wrap_content"
    
    
    
                android:text="打开侧滑菜单"
    
    
    
                android:textSize="30sp"/>//(1140267353)一起成长一起加油的伙伴群!软件测试,与你同行!
    
    
    
     
    
    
    
        </LinearLayout >
    
    
    
     
    
    
    
        <!-- 侧滑菜单栏 -->
    
    
    
        <android.support.design.widget.NavigationView
    
    
    
            android:id="@+id/nv_layout"
    
    
    
            android:layout_width="match_parent"
    
    
    
            android:layout_height="match_parent"
    
    
    
            android:layout_gravity="start"
    
    
    
            app:headerLayout="@layout/navi_head"
    
    
    
            app:menu="@menu/menu_drawer"/>
    
    
    
     
    
    
    
    </android.support.v4.widget.DrawerLayout >
    

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

    菜单头部navi_head布局

    <?xml version="1.0" encoding="utf-8"?>
    
    
    
    <LinearLayout
    
    
    
        xmlns:android="http://schemas.android.com/apk/res/android"
    
    
    
        android:layout_width="match_parent"
    
    
    
        android:layout_height="match_parent"
    
    
    
        android:background="?attr/colorPrimary"
    
    
    
        android:gravity="center"
    
    
    
        android:orientation="vertical"
    
    
    
        android:paddingBottom="50dp"
    
    
    
        android:paddingTop="50dp"
    
    
    
        android:theme="@style/ThemeOverlay.AppCompat.Dark">
    
    
    
     
    
    
    
        <ImageView
    
    
    
            android:layout_width="wrap_content"
    
    
    
            android:layout_height="wrap_content"
    
    
    
            android:src="@mipmap/ic_launcher"/>
    
    
    
     
    
    
    
        <TextView
    
    
    
            android:layout_width="wrap_content"
    
    
    
            android:layout_height="wrap_content"
    
    
    
            android:layout_marginTop="5dp"
    
    
    
            android:text="zwt_UseDesignDemo"/>
    
    
    
    </LinearLayout>
    

    菜单项menu_drawer布局

    <?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/menu_mon"
    
    
    
                android:icon="@mipmap/ic_launcher"
    
    
    
                android:title="Mon"/>
    
    
    
            <item
    
    
    
                android:id="@+id/menu_tues"
    
    
    
                android:icon="@mipmap/ic_launcher"
    
    
    
                android:title="Tues"/>
    
    
    
            <item
    
    
    
                android:id="@+id/menu_wed"
    
    
    
                android:icon="@mipmap/ic_launcher"
    
    
    
                android:title="Wed"/>
    
    
    
            <item
    
    
    
                android:id="@+id/menu_thurs"
    
    
    
                android:icon="@mipmap/ic_launcher"
    
    
    
                android:title="Thurs"/>
    
    
    
            <item
    
    
    
                android:id="@+id/menu_fri"
    
    
    
                android:icon="@mipmap/ic_launcher"
    
    
    
                android:title="Fri"/>
    
    
    
        </group>
    
    
    
     
    
    
    
        <!--二级菜单-->
    
    
    
        <item android:title="weekend">
    
    
    
            <menu>
    
    
    
                <item
    
    
    
                    android:id="@+id/menu_sat"
    
    
    
                    android:icon="@mipmap/ic_launcher"
    
    
    
                    android:title="Sat"/>
    
    
    
                <item
    
    
    
                    android:id="@+id/menu_sun"
    
    
    
                    android:icon="@mipmap/ic_launcher"
    
    
    
                    android:title="Sun"/>
    
    
    
            </menu>
    
    
    
        </item>
    
    
    
    </menu>
    

    图个方便,这里的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);
    

    这里写图片描述

  • 相关阅读:
    数据库连接(1)-从JDBC到MyBatis
    基于 abp vNext 和 .NET Core 开发博客项目
    基于 abp vNext 和 .NET Core 开发博客项目
    正则表达式位置匹配
    正则表达式字符匹配
    2019年终总结
    Win10 1903 运行安卓模拟器蓝屏解决方案
    我已经看到了,撤回也没用了(PC微信防撤回补丁)
    DOCKER 学习笔记1 认识docker
    Java 中级 学习笔记 2 JVM GC 垃圾回收与算法
  • 原文地址:https://www.cnblogs.com/TFBOYS0806/p/13559614.html
Copyright © 2020-2023  润新知