Toolbar+NavigationView实现抽屉式菜单

来源:互联网 发布:金数据登录 编辑:程序博客网 时间:2024/06/05 09:17

一、Menu部分

在res文件上右键->new->Android resource directory,新建Menu文件夹

这里写图片描述

toolbar_menu.xml,在本例中toolbar仅包含一个扫一扫的菜单

<?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/toolbar_menu_QRcode"    android:icon="@mipmap/saoyis"    android:title="扫一扫"    app:showAsAction="ifRoom"/></menu>

drawer_menu.xml

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:id="@+id/drawer_menu_home"        android:icon="@mipmap/ic_home"        android:title="@string/drawer_menu_home_title" />    <item        android:id="@+id/drawer_menu_notification"        android:title="@string/drawer_menu_notification_title"        android:icon="@mipmap/ic_notification"/>    <item        android:id="@+id/drawer_menu_setting"        android:title="@string/drawer_menu_setting_title"        android:icon="@mipmap/ic_setting"/>    <item        android:id="@+id/drawer_menu_logout"        android:title="@string/drawer_menu_logout_title"        android:icon="@mipmap/ic_logout"/></menu>

toolbar_menu.xml和drawer_menu.xml分别是Toolbar和NavigationView对应的菜单文件

二、布局文件

添加依赖库

dependencies {    compile fileTree(include: ['*.jar'], dir: 'libs')    testCompile 'junit:junit:4.12'    compile 'com.android.support:appcompat-v7:24.2.1'    compile 'com.android.support:design:24.2.1'}

修改主题,不显示ActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item></style>

主要的布局文件

drawer_header.xml,此布局文件为抽屉菜单的头部布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="150dp"    android:paddingTop="30dp"    android:paddingLeft="16dp"    android:background="@color/colorPrimary">    <ImageView        android:id="@+id/drawer_header_userHead"        android:layout_width="50dp"        android:layout_height="50dp"        android:background="@mipmap/ic_persion"/>    <TextView        android:id="@+id/drawer_header_userName"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/userName"        android:layout_marginTop="5dp"        android:layout_marginLeft="16dp"        android:layout_toRightOf="@id/drawer_header_userHead"        android:textSize="16sp"        android:textColor="#fff"/>    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="Here is a personalized signature"        android:singleLine="true"        android:textSize="12sp"        android:textColor="#fff"        android:paddingTop="5dp"        android:layout_marginLeft="16dp"        android:layout_below="@id/drawer_header_userName"        android:layout_toRightOf="@id/drawer_header_userHead"        android:layout_marginTop="5dp"/></RelativeLayout>

activity_main.xml,为了让标题居中显示,在toolbar下写了一个TextView让其居中,toolbar和navigationView必须包含在DrawerLayout下

<?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:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/activity_main_drawerlayout">    <android.support.design.widget.CoordinatorLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.v7.widget.Toolbar            android:id="@+id/activity_main_toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="@color/colorPrimary">            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="首页"                android:gravity="center"                android:textSize="20sp"                android:textColor="@color/white"/>        </android.support.v7.widget.Toolbar>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="Drawer"            android:layout_marginTop="?attr/actionBarSize"/>    </android.support.design.widget.CoordinatorLayout>    <android.support.design.widget.NavigationView        android:id="@+id/activity_main_navigationView"        android:layout_width="wrap_content"        android:layout_height="match_parent"        app:headerLayout="@layout/drawer_header"        app:menu="@menu/drawer_menu"        android:layout_gravity="start">    </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

三、主界面

MainActivity.java

package com.example.drawer.drawermenu;import android.support.annotation.NonNull;import android.support.design.widget.NavigationView;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import android.view.View;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    private Toolbar mToolbar;    private DrawerLayout mDrawerLayout;    private ActionBarDrawerToggle mActionBarDrawerToggle;    private NavigationView mNavigationView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        init();    }    public void init(){        mToolbar = (Toolbar) findViewById(R.id.activity_main_toolbar);        mNavigationView = (NavigationView) findViewById(R.id.activity_main_navigationView);        mDrawerLayout = (DrawerLayout) findViewById(R.id.activity_main_drawerlayout);        /**         * 添加Toolbar的menu部分         */        mToolbar.inflateMenu(R.menu.toobar_menu);        mActionBarDrawerToggle = new ActionBarDrawerToggle(this , mDrawerLayout , mToolbar , R.string.drawer_open , R.string.drawer_close){            @Override            public void onDrawerOpened(View drawerView) {                super.onDrawerOpened(drawerView);            }            @Override            public void onDrawerClosed(View drawerView) {                super.onDrawerClosed(drawerView);            }        };        /**         * 禁止使用ActionBarDrawerToggle默认的导航图标         */        mActionBarDrawerToggle.setDrawerIndicatorEnabled(false);        mActionBarDrawerToggle.setHomeAsUpIndicator(R.mipmap.ic_drawer_home);        /**         *  将导航图标设置成自己的图片后,导航图标会失去点击打开抽屉菜单的效果,所以需要自己添加点击事件         */        mActionBarDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                mDrawerLayout.openDrawer(GravityCompat.START);            }        });        mActionBarDrawerToggle.syncState();        mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);        /**         * 给抽屉菜单的菜单项设置点击事件         */        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                int id = item.getItemId();                switch (id){                    case R.id.drawer_menu_home:                        Toast.makeText(MainActivity.this , "Home" , Toast.LENGTH_LONG).show();                        mDrawerLayout.closeDrawers();                        break;                    case R.id.drawer_menu_logout:                        Toast.makeText(MainActivity.this , "logout" , Toast.LENGTH_LONG).show();                        mDrawerLayout.closeDrawers();                        break;                    case R.id.drawer_menu_notification:                        Toast.makeText(MainActivity.this , "notification" , Toast.LENGTH_LONG).show();                        mDrawerLayout.closeDrawers();                        break;                    case R.id.drawer_menu_setting:                        Toast.makeText(MainActivity.this , "setting" , Toast.LENGTH_LONG).show();                        mDrawerLayout.closeDrawers();                        break;                }                return true;            }        });    }}

四、效果展示

这里写图片描述

源码地址:https://github.com/Sunrise7878/DrawerMenu

0 0
原创粉丝点击