摘要：通過設(shè)置子的來調(diào)度子。如下澀郎的介紹是在開始推出的一個(gè)風(fēng)格的導(dǎo)航控件，非常推薦大家使用來作為客戶端的導(dǎo)航欄，以此來取代之前的。提供一個(gè)水平布局來顯示選項(xiàng)卡。

特別喜歡稀土掘金個(gè)人界面的樣子，那我們就來看看如何實(shí)現(xiàn)這個(gè)效果吧，要想實(shí)現(xiàn)這個(gè)效果，肯定需要的是Material Design風(fēng)格，那就需要學(xué)會使用以下控件：CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout，Toolbar，TabLayout等，如果你做出這個(gè)效果來，那這些控件你就基本掌握了。

介紹之前，我們先來看看效果對比圖：

CoordinatorLayout作為“super-powered FrameLayout”基本實(shí)現(xiàn)兩個(gè)功能：

作為頂層布局

調(diào)度協(xié)調(diào)子布局

CoordinatorLayout使用新的思路通過協(xié)調(diào)調(diào)度子布局的形式實(shí)現(xiàn)觸摸影響布局的形式產(chǎn)生動(dòng)畫效果。CoordinatorLayout通過設(shè)置子View的 Behaviors來調(diào)度子View。系統(tǒng)（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior 等。

使用CoordinatorLayout需要在Gradle加入Support Design Library：

compile "com.android.support:design:22.2.1"

具體的怎么協(xié)調(diào)子控件的，建議大家看下面的參考文章，寫的非常好，看完你就基本明白了：
https://segmentfault.com/a/1190000005024216?utm_source=Weibo&utm_medium=shareLink&utm_campaign=socialShare&from=singlemessage&isappinstalled=0

AppBarLayout 是一個(gè)豎直排列的線性布局，它實(shí)現(xiàn)了很多Material Design風(fēng)格app bar的設(shè)計(jì)概念，換句話說就是滾動(dòng)手勢。

在AppBarLayout里面的View,通過app:layout_scrollFlags屬性來控制,滾動(dòng)時(shí)候的表現(xiàn)。其中有4種Flag的類型。

scroll: this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen

enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern

enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.

exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting

我們的例子中用的是 scroll 和 exitUntilCollapsed。

翻譯的比較爛，英文好的，看上面的英文解釋。

Scroll: 表示向下滾動(dòng)時(shí),這個(gè)View會被滾出屏幕范圍直到隱藏.

enterAlways: 表示向上滾動(dòng)時(shí),這個(gè)View會隨著滾動(dòng)手勢出現(xiàn),直到恢復(fù)原來的位置.

enterAlwaysCollapsed: 顧名思義，這個(gè)flag定義的是何時(shí)進(jìn)入（已經(jīng)消失之后何時(shí)再次顯示）。假設(shè)你定義了一個(gè)最小高度（minHeight）同時(shí)enterAlways也定義了，那么view將在到達(dá)這個(gè)最小高度的時(shí)候開始顯示，并且從這個(gè)時(shí)候開始慢慢展開，當(dāng)滾動(dòng)到頂部的時(shí)候展開完。

exitUntilCollapsed: 同樣顧名思義，這個(gè)flag時(shí)定義何時(shí)退出，當(dāng)你定義了一個(gè)minHeight，這個(gè)view將在滾動(dòng)到達(dá)這個(gè)最小高度的時(shí)候消失。

所以我們就在AppBarLayout里面的CollapsingToolbarLayout進(jìn)行了如下設(shè)置：

記?。何覀儎偛派厦嬉舱f了AppBarLayout是一個(gè)豎直方向的線性布局，如果里面包含多個(gè)子View時(shí)，要想有折疊動(dòng)畫效果，必須把帶有scroll flag的view放在前面，這樣收回的view才能讓正常退出，而固定的view繼續(xù)留在頂部。

CollapsingToolbarLayout作用是提供了一個(gè)可以折疊的Toolbar，它繼承至FrameLayout，給它設(shè)置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件在響應(yīng)layout_behavior事件時(shí)作出相應(yīng)的scrollFlags滾動(dòng)事件(移除屏幕或固定在屏幕頂端)。它是設(shè)計(jì)用于直接AppBarLayout的子視圖。

CollapsingToolbarLayout的子View中可以設(shè)置這兩個(gè)屬性

ayout_collapseMode (折疊模式) - 有兩個(gè)值:

pin - 設(shè)置為這個(gè)模式時(shí)，當(dāng)CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。

parallax - 設(shè)置為這個(gè)模式時(shí)，在內(nèi)容滾動(dòng)時(shí)，CollapsingToolbarLayout中的View（比如ImageView)也可以同時(shí)滾動(dòng)，實(shí)現(xiàn)視差滾動(dòng)效果，通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用。

layout_collapseParallaxMultiplier(視差因子) - 設(shè)置視差滾動(dòng)因子，值為：0~1。

app:collapsedTitleTextAppearance 這是在收縮時(shí)Title文字特點(diǎn)外形的設(shè)置

app:expandedTitleTextAppearance 同理這是在展開時(shí)Title文字特點(diǎn)外形的設(shè)置

app:contentScrim 這是toolbar 標(biāo)題工具欄停留在頂部時(shí)候背景的設(shè)置

app:expandedTitleMarginStart 設(shè)置擴(kuò)張時(shí)候(還沒有收縮時(shí))title向左填充的距離

app:expandedTitleMarginEnd 這個(gè)同理是收縮結(jié)束時(shí)向左填空的距離

其他的就不一一介紹了，具體的去查看API文檔即可獲知。

我在做這里的時(shí)候遇到一個(gè)問題，那就是CollapsingToolbarLayout里的Title的問題，一般默認(rèn)是顯示的，即使你不寫，它也有會一個(gè)默認(rèn)值一直顯示在那里，等折疊收縮完的時(shí)候，停留在標(biāo)題工具欄上。怎么消除這個(gè)默認(rèn)值呢？怎么知道收縮完成了，再把這個(gè)值設(shè)置出來呢？這里我對AppBarLayout設(shè)置了一個(gè)監(jiān)聽，它有一個(gè)監(jiān)聽方法：addOnOffsetChangedListener監(jiān)聽折疊收縮的位移。如下：

app_bar_layout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (verticalOffset <= -head_layout.getHeight() / 2) {
                    mCollapsingToolbarLayout.setTitle("澀郎");
                } else {
                    mCollapsingToolbarLayout.setTitle(" ");
                }
            }
        });

Toolbar 是在 Android 5.0 開始推出的一個(gè) Material Design 風(fēng)格的導(dǎo)航控件 ，Google 非常推薦大家使用 Toolbar 來作為Android客戶端的導(dǎo)航欄，以此來取代之前的 Actionbar 。與 Actionbar 相比，Toolbar 明顯要靈活的多。它不像 Actionbar 一樣，一定要固定在Activity的頂部，而是可以放到界面的任意位置。除此之外，在設(shè)計(jì) Toolbar 的時(shí)候，Google也留給了開發(fā)者很多可定制修改的余地，這些可定制修改的屬性在API文檔中都有詳細(xì)介紹，如：

設(shè)置導(dǎo)航欄圖標(biāo)；

設(shè)置App的logo；

支持設(shè)置標(biāo)題和子標(biāo)題；

支持添加一個(gè)或多個(gè)的自定義控件；

支持Action Menu；

Toolbar的具體使用方法，我在這里就不過多的贅述了，學(xué)習(xí)的點(diǎn)太多了，簡單介紹完了，我給大家推薦兩篇參考學(xué)習(xí)使用的文章就行了，寫的很詳細(xì)和完整，之前我們公眾號也推送過D_clock寫的文章。
學(xué)習(xí)參考文章：

http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html

http://www.jianshu.com/p/79604c3ddcae#rd

毫無疑問，TabLayout也是Material Design設(shè)計(jì)風(fēng)格，當(dāng)然也是5.0以后出來的。TabLayout提供一個(gè)水平布局來顯示選項(xiàng)卡。TabLayout一般都是配合ViewPager一起來使用。TabLayout設(shè)置Tab標(biāo)簽有兩種方法如下：

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

使用TabLayout有個(gè)坑，這個(gè)坑如果一般用戶不知道，解決起來比較麻煩，當(dāng)然看到這篇文章的人有福了，因?yàn)槟阏业浇鉀Q方法。
如果設(shè)計(jì)的需求不要求選項(xiàng)卡在切換時(shí)附帶有圖標(biāo)的切換效果，僅僅文字的顏色發(fā)生變化以響應(yīng)用戶的點(diǎn)擊事件，那么TabLayout和ViewPager建立聯(lián)系可以用官方提供的方法，它可以做到交互雙向聯(lián)動(dòng)，也就是點(diǎn)擊tab，viewpager就會去變動(dòng)，滑動(dòng)viewpager，tab也會自動(dòng)變。相互建立聯(lián)系的方法如下：

setupWithViewPager(ViewPager viewPager)

如果選項(xiàng)卡里帶有圖標(biāo)或者僅僅只有圖標(biāo)時(shí)就麻煩了，那個(gè)選項(xiàng)卡會變得什么都沒有了。解決方法其實(shí)很簡單就是不使用上面的方法，而且這樣用：

viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tabLayout));  
tabLayout.setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));

其實(shí)這個(gè)setupWithViewPager(ViewPager viewPager)方法，跟進(jìn)到源碼里，你可以看到，就是調(diào)用了上面的兩種方式。

到這里基本就講完了，全部的布局代碼如下：

package com.loonggg.coordinatorlayoutdemo;

import android.annotation.SuppressLint;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {
    private LinearLayout head_layout;
    private TabLayout toolbar_tab;
    private ViewPager main_vp_container;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        AppBarLayout app_bar_layout = (AppBarLayout) findViewById(R.id.app_bar_layout);
        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        head_layout = (LinearLayout) findViewById(R.id.head_layout);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.bg);
        head_layout.setBackgroundDrawable(new BitmapDrawable(BlurUtil.fastblur(this, bitmap, 180)));
        //使用CollapsingToolbarLayout必須把title設(shè)置到CollapsingToolbarLayout上，設(shè)置到Toolbar上則不會顯示
        final CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
        mCollapsingToolbarLayout.setContentScrim(new BitmapDrawable(BlurUtil.fastblur(this, bitmap, 180)));
        app_bar_layout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (verticalOffset <= -head_layout.getHeight() / 2) {
                    mCollapsingToolbarLayout.setTitle("澀郎");
                } else {
                    mCollapsingToolbarLayout.setTitle(" ");
                }
            }
        });
        Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem menuItem) {
                String msg = "";
                switch (menuItem.getItemId()) {
                    case R.id.webview:
                        msg += "博客跳轉(zhuǎn)";
                        break;
                    case R.id.weibo:
                        msg += "微博跳轉(zhuǎn)";
                        break;
                    case R.id.action_settings:
                        msg += "設(shè)置";
                        break;
                }

                if (!msg.equals("")) {
                    Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
                }
                return true;
            }
        };

        mToolbar.setOnMenuItemClickListener(onMenuItemClick);
        toolbar_tab = (TabLayout) findViewById(R.id.toolbar_tab);
        main_vp_container = (ViewPager) findViewById(R.id.main_vp_container);

        ViewPagerAdapter vpAdapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
        main_vp_container.setAdapter(vpAdapter);
        main_vp_container.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(toolbar_tab));
        toolbar_tab.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(main_vp_container));
        //tablayout和viewpager建立聯(lián)系為什么不用下面這個(gè)方法呢？自己去研究一下，可能收獲更多
        //toolbar_tab.setupWithViewPager(main_vp_container);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

}

源碼下載地址：https://github.com/loonggg/CoordinatorLayoutDemo
記得star一下哦。

公眾號：非著名程序員（smart_android） 歡迎大家關(guān)注，每天一篇原創(chuàng)技術(shù)文章。