NavigationView 侧滑菜单

作者: 毛先森 | 来源:发表于2017-12-16 21:04 被阅读44次

    前言

    Google 在 Android 5.0 后推出了官方的实习,在谷歌爸爸自家 App 中被大量运用,以前需要自己写,现在好了官方版本直接用轮子,接下来我们来看看怎样实现。

    实现效果

    GS20171216210105.gif

    目录

    • 布局文件
    • Java 代码

    布局文件

    1. 在 DrawerLayout 中添加 NavigationView
    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/drawer_layout"
        tools:context="com.example.ethan.navigationviewtest.MainActivity">
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="主页面"
                android:textSize="32sp"/>
        </FrameLayout>
    
        <android.support.design.widget.NavigationView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/nav"
            //导入头布局
            app:headerLayout="@layout/nav_header_layout"
            //导入Menu
            app:menu="@menu/menu"
            android:layout_gravity="start"
            ></android.support.design.widget.NavigationView>
    
    </android.support.v4.widget.DrawerLayout>
    
    
    1. 手写 HeaderLayout 和 Menu

    这里我用一个开源控件设置圆角头像,在Gradle中添加

    compile 'de.hdodenhof:circleimageview:2.1.0'
    

    接下来是 HearderLayout

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="?attr/colorPrimary">
        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:id="@+id/icon_image"
            android:layout_centerInParent="true"
            android:src="@mipmap/timg"
            />
    
    
    </RelativeLayout>
    

    Menu

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
    
        <item
            android:id="@+id/nav_android"
            android:icon="@drawable/ic_android_black_24dp"
            android:title="Android"
    
            />
        <item
            android:id="@+id/nav_announce"
            android:icon="@drawable/ic_announcement_black_24dp"
            android:title="消息"
    
            />
        <item
            android:id="@+id/nav_apps"
            android:icon="@drawable/ic_apps_black_24dp"
            android:title="设置"
    
    
            />
        <item
    
            android:id="@+id/nav_archive"
            android:icon="@drawable/ic_archive_black_24dp"
            android:title="下载文件"
    
            />
    
    </menu>
    

    Java 代码

    
    public class MainActivity extends AppCompatActivity {
    
        private DrawerLayout drawerLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_navigation);
    
            NavigationView navigationView = findViewById(R.id.nav);
            drawerLayout = findViewById(R.id.drawer_layout);
            navigationView.setCheckedItem(R.id.nav_android);
            // navigationView.setItemIconTintList(null);
            //设置NavigationView的监听器
            navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    drawerLayout.closeDrawers();
                    return true;
                }
            });
    
        }
    
    
    }
    

    相关文章

      网友评论

        本文标题:NavigationView 侧滑菜单

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