ToolBar實現滑動伸縮效果

致力於用最簡潔的語言描述最複雜的技術

有時候我們看TitleBar可以隨着下面的內容的滑動而伸縮，這個是怎麼實現的呢（我居然不會發那種動畫，有沒有大神在留言區教一下怎麼發那種動畫），這種效果肯定不是默認的TitleBar實現的，是由Toolbar實現的。
其實只是一個佈局而已，看似功能強大，但強大的功能卻並不難實現。
我們在使用Toolbar之前別忘了添加依賴：

compile 'com.android.support:design:25.0.0'

還有，因爲我們要用Toolbar替代默認的TitleBar，所以使用Toolbar之前先將TitleBar去掉，這裏有我一篇博客講如何去除TitleBar：傳送門

那麼接下來進入主題，我們先看看整體佈局的嵌套吧：

<android.support.design.widget.CoordinatorLayout>
  <android.support.design.widget.AppBarLayout>
    <android.support.design.widget.CollapsingToolbarLayout>
        <android.support.v7.widget.Toolbar/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>
  <android.support.v4.widget.NestedScrollView>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

這就是整體佈局的嵌套原則了，我們看到Toolbar被三層佈局包圍着，分別是CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout。

CoordinatorLayout必須被作爲根佈局，它嵌套兩個佈局：AppBarLayout、NestedScrollView。
AppBarLayout裏面就是標題欄了
NestedScrollView裏面是toolbar下面的空間，可以由程序員自由寫，這個佈局可以使用RecycleView代替

現在佈局裏面並沒有屬性，我們現在給他們加上屬性：

<android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
  <android.support.design.widget.AppBarLayout>
    <android.support.design.widget.CollapsingToolbarLayout>
        <android.support.v7.widget.Toolbar/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>
  <android.support.v4.widget.NestedScrollView>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

添加的屬性只有一個android:fitsSystemWindows=”true”這個可能大家不明白，這個屬性說白了就是防止標題欄裏面的內容跑到狀態欄裏去。
我們繼續添加屬性：

<android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">
    <android.support.design.widget.CollapsingToolbarLayout>
        <android.support.v7.widget.Toolbar/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>
  <android.support.v4.widget.NestedScrollView>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

新添加的這些屬性也不需要說，繼續添加屬性：

<android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbarlayout"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <android.support.v7.widget.Toolbar/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>
  <android.support.v4.widget.NestedScrollView>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

又出來一個新屬性：app:layout_scrollFlags=”scroll|exitUntilCollapsed”
這個屬性的值有多個：
1. scroll：Child View 伴隨着滾動事件而滾出或滾進屏幕。注意兩點：第一點，如果使用了其他值，必定要使用這個值才能起作用；第二點：如果在這個child View前面的任何其他Child View沒有設置這個值，那麼這個Child View的設置將失去作用。
2. enterAlways：快速返回模式。其實就是向下滾動時Scrolling View和Child View之間的滾動優先級問題。對比 scroll 和 scroll | enterAlways 設置，發生向下滾動事件時，前者優先滾動Scrolling View，後者優先滾動Child View，當優先滾動的一方已經全部滾進屏幕之後，另一方纔開始滾動。
3. enterAlwaysCollapsed：enterAlways的附加值。這裏涉及到Child View的高度和最小高度，向下滾動時，Child View先向下滾動最小高度值，然後Scrolling View開始滾動，到達邊界時，Child View再向下滾動，直至顯示完全。
4. exitUntilCollapsed：這裏也涉及到最小高度。發生向上滾動事件時，Child View向上滾動退出直至最小高度，然後Scrolling View開始滾動。也就是，Child View不會完全退出屏幕。
5. snap：簡單理解，就是Child View滾動比例的一個吸附效果。也就是說，Child View不會存在局部顯示的情況，滾動Child View的部分高度，當我們鬆開手指時，Child View要麼向上全部滾出屏幕，要麼向下全部滾進屏幕，有點類似ViewPager的左右滑動。

繼續添加屬性：

 <android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbarlayout"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toobar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>
  <android.support.v4.widget.NestedScrollView>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

新添加的屬性又有一個新屬性：app:layout_collapseMode=”pin”
這裏的值也有多個：
1. app:layout_collapseMode=”none”默認效果，隨父控件一起滑動；
2. app:layout_collapseMode=”pin”縮放模式，在滾動的時候Toolbar不跟着走；
3. app:layout_collapseMode=”parallax”視察效果，隨父控件進行高度縮放

繼續添加新屬性：

 <android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbarlayout"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toobar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>
  <android.support.v4.widget.NestedScrollView
    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>

這裏又出現了新屬性：app:layout_behavior=”@string/appbar_scrolling_view_behavior”
這個string值不需要我們定義，直接拿來用就可以
這個屬性的意思就是當我們滑動這個佈局時，將滑動事件傳遞給上面的Toolbar。

這樣Toolbar部分已經寫完了，我們只需要在NestedScrollView佈局中添加我們想要放入主體的佈局就可以了。