载请标明出处： 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
<?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/id_drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true">
<!-- 第一个位置 -->
<!-- 你的主界面内容，必须放置在DrawerLayout中的第一个位置 根据自己的需要来放置控件， 例如： LinearLayout布局 或者RelativeLayout 布局： 也可以是单个控件。 -->
<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
<?xml version="1.0" encoding="utf-8"?>
<!-- CoordinatorLayout是这次新添加的一个增强型的FrameLayout，通过它可以实现很多东西： 例如： 1.界面向上滚动逐渐隐藏Toolbar； 2.在其中可以放置浮动的View，就像Floating Action Button。 -->
<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">
<!-- AppBarLayout跟它的名字一样，把容器类的组件全部作为AppBar。 将AppBarLayout放在CoordinatorLayout中，就可以实现滚动效果。 本例中，TabLayout在界面滚动时，随着Toolbar的逐渐隐藏，将占据Toolbar的位置， 达到节省屏幕空间，界面动画效果的目的。 -->
<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" >
<!-- 属性解析： app:theme：指定Toolbar的样式，包括ActionbarToggle和popupMenu的指示图标颜色 app:popupTheme：指定popupMenu溢出后的样式 app:title: 指定Toolbar中主Title的内容 -->
<!-- app:layout_scrollFlags的意思是： 设置的layout_scrollFlags有如下几种选项： scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。 enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。 enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。 exitUntilCollapsed: 当视图会在滚动时，它一直滚动到设置的minHeight时完全隐藏。 需要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用， 而前面两种模式基本是需要一起使用的，也就是说，这些flag的使用场景，基本已经固定了。 -->
<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" />
<!-- Tabs选项卡，和ViewPager搭配使用可以增大界面的内容展示量，实现各种个性化分类内容展示而不互相干扰！ Google在Design support library中提供官方的Tab组件，它就是TabLayout。 相比Github上面开源的第三方库，这个更加简单易用。 有以下常用属性： app:tabGravity="fill" 表示TabLayout中的Tabs要占满屏幕的width； app:tabSelectedTextColor：Tab被选中字体的颜色； app:tabTextColor：Tab未被选中字体的颜色； app:tabIndicatorColor：Tab指示器下标的颜色； -->
<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>
<!-- 我们常用的ViewPager，不多说了。你会发现多了一个 app:layout_behavior 属性，没错， 如果你使用CoordinatorLayout来实现Toolbar滚动渐变消失动画效果，那就必须在它下面的那个控件中加入这个属性， 并且下面的这个控件必须是可滚动的。 当设置了layout_behavior的控件滑动时，就会触发设置了layout_scrollFlags的控件发生状态的改变。 -->
<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" />
<!-- 这是一个浮动按钮。由于FloatingActionButton是重写ImageView的， 所有FloatingActionButton拥有ImageView的一切属性。 属性介绍： app:backgroundTint : FAB的背景色。 app:elevation ：FAB的阴影效果。 app:rippleColor ：设置涟漪的颜色，默认是由背景色生成的暗色调，可以自己指定。 app:pressedTranslationZ ：FAB动画效果，在它被按下的时候阴影就会增大。 -->
<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<Fragment> 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
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
