1.開門見上，先上效果圖

image.png

                                    代碼傳送門

2.CoodinatorLayout及相關(guān)控件簡介
CoordinatorLayout遵循Material Design風(fēng)格，包含在 support Library中，結(jié)合AppBarLayout, CollapsingToolbarLayout,NestScrollView等 可 產(chǎn)生各種炫酷的折疊懸浮效果。作為一個容器可與一個或多個子View進(jìn)行交互。

  AppBarLayout繼承自LinearLayout，布局方向為垂直方向。所以你可以把它當(dāng)成垂直布局的LinearLayout來使用。AppBarLayout是在LinearLayou上加了一些材料設(shè)計的概念，它可以讓你定制當(dāng)某個可滾動View的滾動手勢發(fā)生變化時，其內(nèi)部的子View實現(xiàn)何種動作。

   CollapsingToolbarLayout是用來對Toolbar進(jìn)行再次包裝的ViewGroup，主要是用于實現(xiàn)折疊的App Bar效果。它需要放在AppBarLayout布局里面，并且作為AppBarLayout的直接子View。CollapsingToolbarLayout主要屬性：

   (1) layout_scrollFlags：

scroll - 想滾動就必須設(shè)置這個。

enterAlways - 實現(xiàn)quick return效果, 當(dāng)向下移動時，立即顯示View（比如Toolbar)。

exitUntilCollapsed - 向上滾動時收縮View，但可以固定Toolbar一直在上面。

enterAlwaysCollapsed - 當(dāng)你的View已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時，你的View只能以最小高度進(jìn)入，只有當(dāng)滾動視圖到達(dá)頂部時才擴(kuò)大到完整高度。

contentScrim - 設(shè)置當(dāng)完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。

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

    (2) layout_collapseMode (折疊模式) - 有兩個值:

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

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

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

    Toolbar主要是用來替換ActionBar的，換句話說，ActionBar能做的，Toolbar都能做。如果你對ActionBar的使用比較熟悉，你會發(fā)現(xiàn)Toolbar使用起來非常簡單。ok，既然是替換，當(dāng)然用Toolbar的時候就得先去把ActionBar給隱藏掉。隱藏掉ActionBar方法有多種，我是直接在application的主題里面設(shè)置成<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar”>

    NestedScrollView是support-v4包提供的控件,繼承至FrameLayout, 并實現(xiàn)了NestedScrollingParent,NestedScrollingChild, ScrollingView接口。它的作用類似于android.widget.ScrollView,不同點在于NestedScrollView支持嵌套滑動，常用于內(nèi)部嵌套RecyclerView一起使用。

3.布局文件實現(xiàn)
先看看布局視圖的結(jié)構(gòu)，如下圖：

接下看布局代碼的實現(xiàn)：

<?xml version="1.0" encoding="utf-8"?>
<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/cl_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_barlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentScrim="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <com.youth.banner.Banner
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            android:fitsSystemWindows="true"
            app:image_scale_type="fit_xy"
            app:layout_collapseMode="parallax"
            android:background="@drawable/banner_default"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="65dp"
            app:contentInsetStart="0dp"
            app:layout_collapseMode="pin">

            <RelativeLayout
                android:id="@+id/rl_title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingTop="25dp">

                <ImageView
                    android:id="@+id/iv_left_btn"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_centerVertical="true"
                    android:layout_marginStart="7dp"
                    android:background="@drawable/shap_left_btn_bg"
                    android:paddingBottom="9dp"
                    android:paddingEnd="5dp"
                    android:paddingStart="5dp"
                    android:paddingTop="9dp"
                    android:src="@drawable/left_hot_btn" />

                <LinearLayout
                    android:id="@+id/ll_search"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:layout_marginBottom="7dp"
                    android:layout_marginEnd="15dp"
                    android:layout_marginStart="15dp"
                    android:layout_marginTop="7dp"
                    android:layout_toEndOf="@+id/iv_left_btn"
                    android:layout_toStartOf="@+id/iv_search_btn"
                    android:background="@drawable/search_bg_shap_home"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:visibility="visible">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="5dp"
                        android:layout_marginStart="3dp"
                        android:paddingBottom="7dp"
                        android:paddingTop="7dp"
                        android:src="@drawable/search_gray" />

                    <TextView
                        android:id="@+id/tv_search_hint"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="8dp"
                        android:background="@null"
                        android:drawablePadding="4dp"
                        android:lines="1"
                        android:singleLine="true"
                        android:textColor="#999999"
                        android:textSize="14sp" />

                </LinearLayout>

                <ImageView
                    android:id="@+id/iv_search_btn"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="7dp"
                    android:background="@drawable/shap_left_btn_bg"
                    android:paddingBottom="6dp"
                    android:paddingEnd="5dp"
                    android:paddingStart="5dp"
                    android:paddingTop="6dp"
                    android:src="@drawable/icon_search_white" />

            </RelativeLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>

    <com.flyco.tablayout.SlidingTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/white"
        app:tl_indicator_color="@android:color/holo_red_light"
        app:tl_indicator_corner_radius="30dp"
        app:tl_indicator_height="3dp"
        app:tl_indicator_width_equal_title="true"
        app:tl_tab_padding="25dp"
        app:tl_tab_space_equal="true"
        app:tl_textBold="SELECT"
        app:tl_textSelectColor="@android:color/holo_red_light"
        app:tl_textUnselectColor="@android:color/black"
        app:tl_textsize="17sp" />

</android.support.design.widget.AppBarLayout>

<!-- 若ViewPager中的Fragment用到了實現(xiàn)了NestedScrollingChild接口的控件，則ViewPager外部不需要套一層NestScrollView,反之，則需要嵌套一層NestScrollView -->
<!--<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"
    android:fillViewport="true"
    android:focusableInTouchMode="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">-->

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

<!--</android.support.v4.widget.NestedScrollView>-->

</android.support.design.widget.CoordinatorLayout>
布局中有幾個點需要注意下

CollapsingToolbarLayout要設(shè)置app:layout_scrollFlags="scroll|exitUntilCollapsed”，scroll是讓CollapsingToolbarLayout可折疊，exitUntilCollapsed是向上滾動時收縮view，但可以將Toolbar一直固定在頂部

Toolbar一直固定在頂部需要給Toolbar加上app:layout_collapseMode=“pin”屬性

當(dāng)折疊的時候讓banner出現(xiàn)滾動視差需要設(shè)置app:layout_collapseMode="parallax"

我們這里用到了NestedScrollView嵌套ViewPager(為了保證CollapsingToolbarLayout能夠折疊，ViewPager中的Fragment用到了實現(xiàn)了NestedScrollingChild接口的控件，則ViewPager外部不需要套一層NestScrollView,反之，則需要嵌套一層NestScrollView)，這里需要注意，不管是NestedScrollView嵌套ViewPager還是嵌套RecyclerView，都需要設(shè)置android:fillViewport=“true”，否則會出現(xiàn)內(nèi)容不顯示或者內(nèi)容顯示不全

接下來看MainActivity中的代碼：

package com.example.jokerwan.coolcoodinatorlayout;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.flyco.tablayout.SlidingTabLayout;

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

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

@BindView(R.id.iv_left_btn)
ImageView ivLeftHotBtn;
@BindView(R.id.ll_search)
LinearLayout llSearch;
@BindView(R.id.iv_search_btn)
ImageView ivSearchBtn;
@BindView(R.id.rl_title)
RelativeLayout rlTitle;
@BindView(R.id.tab_layout)
SlidingTabLayout tabLayout;
@BindView(R.id.app_barlayout)
AppBarLayout appBarlayout;
@BindView(R.id.viewpager)
ViewPager viewpager;

private ArrayList<Fragment> fragments;
private HomeFragment homeFragment1;
private HomeFragment homeFragment2;
private String[] titles = new String[]{"恐怖電影", "喜劇專場"};

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

    Utils.setStatusBarTransparent(this);

    viewpager.clearDisappearingChildren();

    fragments = new ArrayList<>();
    List<Fragment> fragments1 = getSupportFragmentManager().getFragments();
    if (fragments1 != null && fragments1.size() > 1) {
        homeFragment1 = (HomeFragment) fragments1.get(0);
        homeFragment2 = (HomeFragment) fragments1.get(1);
    } else {
        homeFragment1 = new HomeFragment();
        homeFragment2 = new HomeFragment();
    }

    fragments.add(homeFragment1);
    fragments.add(homeFragment2);

    tabLayout.setViewPager(viewpager, titles,this,fragments);


    appBarlayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (verticalOffset == 0) {
                rlTitle.setBackgroundColor(Color.argb(0, 221, 48, 10));
                ivLeftHotBtn.setBackground(getResources().getDrawable(R.drawable.shap_left_btn_bg));
                ivSearchBtn.setVisibility(View.VISIBLE);
                ivSearchBtn.setBackground(getResources().getDrawable(R.drawable.shap_left_btn_bg));
                llSearch.setVisibility(View.GONE);
            } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
                rlTitle.setBackgroundColor(Color.argb(255, 221, 48, 10));
                ivLeftHotBtn.setBackground(null);
                llSearch.setVisibility(View.VISIBLE);
                ivSearchBtn.setBackground(null);
            } else {
                int alpha = (int) (255 - verticalOffset / (float) appBarLayout.getTotalScrollRange() * 255);
                rlTitle.setBackgroundColor(Color.argb(alpha, 221, 48, 10));
                llSearch.setVisibility(View.GONE);
                ivSearchBtn.setVisibility(View.VISIBLE);
            }
        }
    });
}

}
關(guān)于滑動改變搜索框的透明度和按鈕的變化，起初我想的是通過監(jiān)聽CollapsingToolbarLayout的收縮來做，結(jié)果發(fā)現(xiàn)CollapsingToolbarLayout并沒有提供監(jiān)聽收縮的方法，尷尬了，后來發(fā)現(xiàn)AppBarLayout有一個偏移量監(jiān)聽的方法addOnOffsetChangedListener()，符合我們的需求。對了，差點兒忘了banner沉浸式，在MainActivity中可以看到我將浸式狀態(tài)欄的代碼封裝到Utils中，代碼給大家貼出來。

public static void setStatusBarTransparent(Activity activity){

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

        Window window = activity.getWindow();

        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

        window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);

        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

        window.setStatusBarColor(Color.TRANSPARENT);

    } else {

        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

    }

}

好了，大功告成。