美文网首页
View—NavigationView学习

View—NavigationView学习

作者: tuionf | 来源:发表于2017-11-23 17:38 被阅读606次

    NavigationView是什么

    [站外图片上传中...(image-e0f5ab-1511429906836)]

    导航View,一般我们用它和DrawerLayout实现抽屉式导航设计

    分为两部分

    1. 上面一部分叫做HeaderLayout
    2. 下面的那些点击项都是menu

    怎么用

    1. app:headerLayout—指定头部的布局
    2. app:menu—指定下面的点击项
    3. android:layout_gravity—指定滑动方向
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <!--主页面布局内容 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name3"/>
        </LinearLayout>
    
        <!--侧滑菜单的布局 -->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/menu_nav" />
    
    </android.support.v4.widget.DrawerLayout>
    

    头部布局 —drawer_header.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:fitsSystemWindows="false"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@mipmap/nav_header"
        >
        <ImageView
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="20dp"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/iv_user_photo"
            android:src="@mipmap/nav_photo"
            android:layout_above="@+id/tv_login"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:textSize="12sp"
            android:text="点击头像登录,开启更多功能"
            android:textColor="@color/white"
            android:padding="8dp"
            android:layout_marginLeft="20dp"
            android:layout_marginBottom="20dp"
            android:gravity="center"
            android:id="@+id/tv_login"
            android:layout_alignParentBottom="true"/>
    </RelativeLayout>
    

    菜单项—menu_nav.xml

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <group android:checkableBehavior="single">
            <item android:title="首页" android:id="@+id/mn_home" android:checked="true" android:icon="@mipmap/home"/>
            <item android:title="我的信息" android:id="@+id/mn_information" android:icon="@mipmap/myinformation"/>
            <item android:title="猜你喜欢" android:id="@+id/mn_guess" android:icon="@mipmap/guess_like"/>
            <item android:title="电影" android:id="@+id/mn_movie" android:icon="@mipmap/movie"/>
            <item android:title="音乐" android:id="@+id/mn_music" android:icon="@mipmap/music"/>
        </group>
    
        <item android:title="更多" android:id="@+id/mn_more">
            <menu>
                <item android:title="关于" android:id="@+id/mn_about" android:icon="@mipmap/about"/>
                <item android:title="注销" android:id="@+id/mn_out" android:icon="@mipmap/out"/>
            </menu>
        </item>
    </menu>
    

    监听点击事件

    通过 setNavigationItemSelectedListener 来给菜单添加点击事件

    navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    
            switch(item.getItemId()){
                case R.id.mn_home:
                    Toast.makeText(MainActivity.this, "home", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.mn_movie:
                    Toast.makeText(MainActivity.this, "movie", Toast.LENGTH_SHORT).show();
                    break;
                default:
                    break;
            }
    
            return true;
        }
    });
    

    TODO


    1. menu部分的菜单层级

    相关文章

      网友评论

          本文标题:View—NavigationView学习

          本文链接:https://www.haomeiwen.com/subject/odttbxtx.html