Android控件之Toolbar + DrawerLayout的使用

載請標明出處： http://blog.csdn.net/u011974987/article/details/50963495；

最近閒着沒事兒，在關注一些遵循最新的Material Design設計規範的應用和效果，感受很高大上；一直都沒有去嘗試過Material Design的一些新控件，不少仍是不熟悉的，因此最近就寫Demo 來熟悉下這些控件的使用，接下來使用官方支持庫來快速實現這類效果，須要使用到Toolbar和DrawerLayout，若是你還不知道這兩個Widget，先去google看下文檔吧~，詳細步驟以下：

一、首先須要添加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去下載。

二、在主佈局文件添加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>

三、添加包含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 的；

四、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