Toolbar+DrawerLayout+NavigationView的使用

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html（转载）

Toolbar介绍

ActionBar由于其设计的原因，被限定只能位于活动的顶部。从而不能实现一些Material Design的效果，因此官方现在已经不再建议使用Actionbar了。Toolbar的强大之处在于，它不仅继承了Actionbar的所有功能，而且灵活性很高，可以配合其他控件来完成一些MaterialDesign的效果。

DrawerLayout介绍

DrawerLayout是在Slidingmenu出现之后的产物。

NavigationView介绍

NavigationView是Design Support库中提供的一个控件，因此使用时需要把这个库引入到项目中才行。

打开app/build.gradle文件，在dependencies闭包中添加如下内容

compile 'com.android.support:design:24.2.1'
compile 'de.hdodenhof:circleimageview:2.1.0'

 第一行是Design Support库，第二行是一个开源项目CircleImageView,该项目可用来轻松实现图片原型化的功能，它的项目地址是https://github.com/hdodenhof/CircleImageView

1.toolbar.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.v7.widget.Toolbar
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     xmlns:app="http://schemas.android.com/apk/res-auto"
 5     android:id="@+id/toolbar_custom"
 6     android:layout_width="match_parent"
 7     android:layout_height="?attr/actionBarSize"
 8     android:background="?attr/colorPrimary"
 9     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
10     app:popupTheme="@style/Theme.AppCompat.Light"
11     >
12 </android.support.v7.widget.Toolbar>
View Code

menu文件夹下的toolbar.xml

<?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/other"
    android:icon="@drawable/other"
    android:title="Other"
    app:showAsAction="always"
    >
    <!-- item包含menu表示该menu是item下的子菜单 -->
    <menu>
        <!-- 将group中的菜单项放于一个组里面 -->
        <group>
            <item android:id="@+id/toolbar_r_1"
                android:title="吃饭"
                android:icon="@drawable/eat"
                app:showAsAction="ifRoom"
                />
            <item android:id="@+id/toolbar_r_2"
                android:title="睡觉"
                android:icon="@drawable/sleep"
                app:showAsAction="ifRoom"
                />
            <item android:id="@+id/toolbar_r_3"
                android:title="打豆豆"
                android:icon="@drawable/dadoudou"
                app:showAsAction="ifRoom"
                />
        </group>
    </menu>
</item>
</menu>
View Code

2.开始使用NavigationView之前需要准备menu和headerLayout

menu文件夹下新建Menu resource file，nav_menu.xml

<?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/nav_peach"
            android:icon="@drawable/peach"
            android:title="桃子"/>
        <item
            android:id="@+id/nav_banana"
            android:icon="@drawable/banana"
            android:title="香蕉"/>
        <item
            android:id="@+id/nav_apple"
            android:icon="@drawable/apple"
            android:title="苹果"/>
        <item
            android:id="@+id/nav_pear"
            android:icon="@drawable/pear"
            android:title="梨子"/>
    </group>
</menu>
View Code

注:checkableBehavior指定为single表示组中的所有菜单项只能单选

需要准备headerLayout，layout下新建资源文件nav_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="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary"
    >
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/username"
        android:layout_centerInParent="true"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="小李飞刀"
        android:textColor="#FFF"
        android:layout_centerInParent="true"
        android:layout_below="@id/icon_image"
        android:paddingTop="20dp"
        android:textSize="14sp"/>
</RelativeLayout>
View Code

3.drawerlayout.xml

<?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"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/iv_main"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/peach"
            android:layout_gravity="center"
            />

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_marginTop="400dp"
            android:layout_marginRight="15dp"
            app:elevation="5dp"
            android:src="@drawable/icon_done"
            />
    </LinearLayout>

    <!--侧滑菜单-->
    <!--<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:layout_gravity="left">
        <ListView
            android:id="@+id/lv_left_menu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@null"
            android:text="DrawerLayout" />
    </LinearLayout>-->

    <!--侧滑菜单-->
    <!--<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:layout_gravity="right">
        <ListView
            android:id="@+id/lv_right_menu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@null"
            android:text="DrawerLayout" />
    </LinearLayout>-->
    <android.support.design.widget.NavigationView
        android:id="@+id/design_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"
        >
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
View Code

注：app:menu设定自己写好的menu文件(nav_menu.xml)

　　app:headerLayout设定写好的headerLayout文件（nav_header.xml）

4.实现的activity_main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:id="@+id/activity_main"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:orientation="vertical"
 8     tools:context="com.example.rgd.mysuperapp.MainActivity">
 9     <!--toolbar-->
10     <include layout="@layout/custom_toolbar"/>
11     <!--DrawerLayout-->
12     <include layout="@layout/custom_drawerlayout"/>
13 </LinearLayout>
View Code

5.如果对Toolbar添加多个Action，则new menu-->toolbar.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <menu xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto">
 4     <item
 5         android:id="@+id/logout"
 6         android:icon="@drawable/ic_logout"
 7         android:title="Logout"
 8         app:showAsAction="always"
 9         />
10 </menu>
View Code

6.完善的Java代码MainActivity

package com.example.rgd.mysuperapp;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;

import static com.example.rgd.mysuperapp.R.menu.toolbar;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawer_layout;
    private ImageView iv_main;
    private ListView lv_left_menu;
    private String[] lvs={"List1","List2","List3"};
    private NavigationView design_navigation_view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_main = (ImageView) findViewById(R.id.iv_main);
        design_navigation_view = (NavigationView) findViewById(R.id.design_navigation_view);
        drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_custom);
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true); //设置返回键点击
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);//是否隐藏返回键。  
        android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        if(actionBar!=null){
            //修改默认的Toolbar图标，Menu
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        }

        //menu的点击事件
        design_navigation_view.setCheckedItem(R.id.nav_apple);
        design_navigation_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                drawer_layout.closeDrawers();
                return true;
            }
        });
    }

    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()){
            case R.id.logout:
                Toast.makeText(this, "你点了注销", Toast.LENGTH_SHORT).show();
                break;
            case android.R.id.home:
                drawer_layout.openDrawer(GravityCompat.START);
                break;
            default:
                break;
        }
        return true;
    }
}
View Code

注：1.menu下的toolbar.xml是在Activity中代码加载的。

　　2.toolbar要有效果，需在manifests中指定一个不带ActionBar的主题，如Theme.AppCompat.NoActionBar。

　　3.NavigationView的setCheckedItem()设置第一个为默认选中，

　　4.NavigationView的setNavigationItemSelectedListener()方法是来设置菜单项选中事件的监听器。

　　5.onCreateOptionsMenu方法是用来设置menu下的toolbar.xml

posted @ 2017-02-14 15:28  鸡毛落一地  阅读(645)  评论(0)  编辑  收藏  举报