Android控件之Toolbar + DrawerLayout的使用

载请标明出处： http://blog.csdn.net/u011974987/article/details/50963495；

最近闲着没事儿，在关注一些遵循最新的Material Design设计规范的应用和效果，感觉很高大上；一直都没有去尝试过Material Design的一些新控件，很多还是不熟悉的，所以最近就写Demo 来熟悉下这些控件的使用，接下来使用官方支持库来快速实现这类效果，需要使用到Toolbar和DrawerLayout，如果你还不知道这两个Widget，先去google看下文档吧~，详细步骤如下：

1、首先需要添加appcompat-v7支持:

如果是在Android Studio 2.1 Preview3 上创建的项目，默认已经添加了appcompat-v7和design支持了，如果不是最新版AndroidStudio则需要在build.gradle中添加如下代码：

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

然后同步一下Gradle去下载。

2、在主布局文件添加DrawerLayout:

activity_main.xml

<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/id_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    
    
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

     <android.support.design.widget.NavigationView
        android:id="@+id/id_navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:itemTextColor="@color/selector_nav_menu_textcolor" />

android.support.v4.widget.DrawerLayout>

3、添加包含ToolBar：

app_bar_main.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_coordinatorlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    
    <android.support.design.widget.AppBarLayout
        android:id="@+id/id_appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        >
        

        
        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleTextColor="@color/comm_white"
            app:title="@string/app_name" />

        
        <android.support.design.widget.TabLayout
            android:id="@+id/id_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/main_white"
            android:fillViewport="false" />


    android.support.design.widget.AppBarLayout>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/id_floatingactionbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_menu_camera"
        app:rippleColor="@color/main_blue_dark" />


android.support.design.widget.CoordinatorLayout>

在布局文件的注释中，一些控件的属性已经说的很清楚了，Toolbar是继承自View，每个页面都有可能用到，所以可以像其他标准控件一样直接主布局文件添加Toolbar，为了提高Toolbar的重用效率，可以在layout中单独建议一个toolbar 的；

4、Java实现的核心代码：

package com.woyou.loveview;

import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

import com.woyou.loveview.utils.SnackbarUtil;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private CoordinatorLayout mCoordinatorLayout;
    private AppBarLayout mAppBarLayout;
    private Toolbar mToolbar;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private FloatingActionButton mFloatingActionButton;
    private NavigationView mNavigationView;

    //TabLayout中的标题
    private String[] mTitles;

    //填充到ViewPager中Fragment
    private List mFragments;

    //ViewPager的数据适配器


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化各种控件
        initViews();

        // 初始化数据
        initData();

        //初始化各种控件的设置、适配。
        initConfigViews();

    }

    private void initViews() {
        mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawer_layout);
        mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.id_coordinatorlayout);
        mAppBarLayout = (AppBarLayout) findViewById(R.id.id_appbarlayout);
        mToolbar = (Toolbar) findViewById(R.id.id_toolbar);
        mTabLayout = (TabLayout) findViewById(R.id.id_tablayout);
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mFloatingActionButton = (FloatingActionButton) findViewById(R.id.id_floatingactionbutton);
        mNavigationView = (NavigationView) findViewById(R.id.id_navigationView);

    }

    private void initData() {
        //Tab的标题采用string-array的方法保存，在res/values/arrays.xml中写
        mTitles = this.getResources().getStringArray(R.array.tab_titles);
        //初始化填充到ViewPager中的Fragment集合
        mFragments = new ArrayList<>();

        for (int i = 0; i < mTitles.length; i++) {
            Bundle mBundle = new Bundle();
            mBundle.putInt("flag", i);
            MyFragment mMyFragment = new MyFragment();
            mMyFragment.setArguments(mBundle);
            mFragments.add(i, mMyFragment);
        }

    }

    private void initConfigViews() {
        //设置显示Toolbar
        setSupportActionBar(mToolbar);
        // 设置Drawerlayout开关指示器，即Toolbar最左边的那个icon
        ActionBarDrawerToggle mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);
        mActionBarDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);


        //给NavigationView填充顶部区域
        mNavigationView.inflateHeaderView(R.layout.header_nav);
        //给NavigationView填充菜单
        mNavigationView.inflateMenu(R.menu.menu_nav);

        onNavgationViewMenuItemSelected(mNavigationView);



    }
    //设置NavigationView中菜单的item的点击事件
    private void onNavgationViewMenuItemSelected(NavigationView mNav) {
        mNav.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                String msgString="";
                switch (item.getItemId()){
                    case R.id.nav_camera:
                        msgString = (String) item.getTitle();
                        break;
                    case R.id.nav_gallery:
                        msgString = (String) item.getTitle();
                        break;
                    case R.id.nav_slideshow:
                        msgString = (String) item.getTitle();
                        break;
                    case R.id.nav_share:
                        msgString = (String) item.getTitle();
                        break;
                }

                // ment item点击后选中，并关闭Drawerlayout
                item.setChecked(true);
                mDrawerLayout.closeDrawers();

                //一个类似Toast的控件。
                SnackbarUtil.show(mViewPager,msgString,0);

                return true;
            }
        });
    }

}

以上是核心代码，ViewPager等的一些控件没有使用到，我是准备实现其他效果的，最后还是觉得一步一步来吧~以上代码还有使用其他的辅助类的代码，具体的看Demo哦！

最后的效果如下：

Demo 下载地址：Toolbar + DrawerLayout