DrawerLayout和Navigation实现侧滑菜单

news/2024/7/8 1:21:44

DrawerLayout
1.以android.support.v4.widget.DrawerLayout为根控件,导入:

    compile 'com.android.support:design:24.2.1'

2.Drawerlayout下包裹两个控件,第一个是内容控件,第二个是侧滑控件,使用android:layout_gravity来指定它的滑动位置,start表示左划出,end代表右划出

3.设置侧滑事件:mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener)


NavigationView
1.app:headerLayout="@layout/header_layout"表示引用一个头文件
2.app:menu="@menu/main"表示引用一个menu作为下面的点击项
3.获取头部:View.headerView=navigationView.getHeaderView(0)
4.item点击navigationView.setNavigationItemSelectedListener()

首先第一步定义侧滑菜单的头部布局:

<?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="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#AB594C"
        android:src="@mipmap/bg_header" />
</RelativeLayout>
第二步:定义侧滑菜单内容,在Menu下定义一个布局:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_app_update"
        android:icon="@mipmap/ic_ref"
        android:title="应用更新" />
    <item
        android:id="@+id/menu_message"
        android:icon="@mipmap/ic_message"
        android:title="消息中心" />
    <item
        android:id="@+id/menu_setting"
        android:icon="@mipmap/ic_setting"
        android:title="设置" />
</menu>
第三步:定义一个主布局:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.yijia.yijia5play.MainActivity">
    <!--内容控件-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name" />
    </LinearLayout>
    <!--侧滑控件-->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/layout_header"
        app:menu="@menu/menu_left">

    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
第四步:DrawerLayout的点击事件

drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {
        Log.e(TAG, "onDrawerSlide");
    }

    @Override
    public void onDrawerOpened(View drawerView) {
        Log.e(TAG, "onDrawerOpened");
    }

    @Override
    public void onDrawerClosed(View drawerView) {
        Log.e(TAG, "onDrawerClosed");
    }

    @Override
    public void onDrawerStateChanged(int newState) {
        Log.e(TAG, "onDrawerStateChanged");
    }
});
headerView = navigationView.getHeaderView(0);//获取 头部
headerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "点击了头部", Toast.LENGTH_LONG).show();
    }
});
第五步:获得侧滑菜单头部的view并设置点击事件

headerView = navigationView.getHeaderView(0);//获取 头部
headerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "点击了头部", Toast.LENGTH_LONG).show();
    }
});
第六步:侧滑菜单内容的点击事件:

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu_app_update:
                Toast.makeText(MainActivity.this, "点击了应用更新", Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_message:
                Toast.makeText(MainActivity.this, "点击了消息中心", Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_setting:
                Toast.makeText(MainActivity.this, "点击了设置", Toast.LENGTH_LONG).show();
                break;
        }
        return false;
    }
});


http://www.niftyadmin.cn/n/3649159.html

相关文章

nuxt.js 全局 js_如何在Nuxt.js应用程序中实现身份验证

nuxt.js 全局 jsIn this tutorial, you’ll implement authentication in a Nuxt.js app using the Auth module. For the purpose of this tutorial we’ll be using JWT for authentication. 在本教程中&#xff0c;您将使用Auth模块在Nuxt.js应用中实现身份Auth 。 就本教程…

Drawerlayout和ToolBar进行整合

首先可以看一下效果 \ 上一篇文章我们使用的是Drawerlayout和Naviagtion实现了侧滑的效果,大家可以看下http://blog.csdn.net/qq_24675479/article/details/78743924。这个项目是基于上个项目来实现的 第一步&#xff1a;我们定义一下样式,因为我们默认的Toolbar标题和图标是…

vue使用jwt加密_如何使用Vue和Node构建轻量级发票应用程序:JWT身份验证和发送发票

vue使用jwt加密介绍 (Introduction) In the previous parts of the series, we looked at how to create the User Interface of our Invoicing Application that allowed users to create and view existing invoices. In this final part of the series, you will set up per…

TabLayout、ViewPager、fragment实现可滑动的顶部菜单

首先看下效果 第一步&#xff1a;主布局 <LinearLayoutandroid:layout_width"wrap_content"android:layout_height"wrap_content"android:orientation"vertical"><android.support.v7.widget.Toolbarandroid:id"id/tool_bar"…

node.js运行js_如何使用Node.js创建和运行计划的作业

node.js运行js介绍 (Introduction) Ever wanted to do specific things on your application server at certain times without having to manually run them yourself? This is where scheduled tasks come in handy. 是否曾经想过在特定时间在应用程序服务器上执行特定操作…

正确地做事与做正确的事同样重要

正确地做事与做正确的事同样重要一位软件工程师的6年总结作者&#xff1a;成晓旭http://blog.csdn.net/cxxsoft(声明&#xff1a;欢迎转载&#xff0c;请保证文章的完整性)“又是一年毕业时”&#xff0c;看到一批批学子离开人生的象牙塔&#xff0c;走上各自的工作岗位&#x…

recyclerView和retrofit的简单使用

第一步&#xff1a;导入相关包 //butterknife compile com.jakewharton:butterknife:8.4.0 annotationProcessor com.jakewharton:butterknife-compiler:8.4.0//retrofit compile com.squareup.retrofit2:retrofit:2.1.0 compile com.squareup.retrofit2:adapter-rxjava:2.1.0 …

Intent ACTION值自定义

在启动一个ACTIVITY时&#xff0c;作为信使的Intent主要由三部分构成&#xff1a;Intent<Action,Data,Category>&#xff1b;对于Action&#xff0c;有时候我们不一定非得用系统自定义的值&#xff0c;而可以自定义&#xff0c;同样可以达到启动其它Activity的效果。 这里…