CollapsingToolbarLayout詳解

一、介紹

CollapsingToolbarLayout是Android Material Design庫中的一個布局控制項，主要用於實現帶摺疊效果的Toolbar。

它可以在Toolbar上面載入大的圖片或者內容，當向下滾動時，這些內容會向下摺疊，並最終將整個Toolbar收縮起來。 CollapsingToolbarLayout通常與AppBarLayout、NestedScrollView或RecyclerView等其他控制項一起使用，實現類似於網易雲音樂、知乎等APP的樣式，提供了一種優雅、簡潔的設計風格。

二、屬性詳解

1. app:contentScrim

作用：設置當CollapsingToolbarLayout摺疊後的Toolbar顏色為透明時，覆蓋在其上方的一個Drawable。

   <android.support.design.widget.CollapsingToolbarLayout
       ...
       app:contentScrim="@color/colorPrimary"
       ...>

2. app:scrimAnimationDuration

作用：設置摺疊動畫的觸發時間。

   <android.support.design.widget.CollapsingToolbarLayout
       ...
       app:scrimAnimationDuration="500"
       ...>

3. app:expandedTitleMarginStart

作用：設置標題展開時距離左邊屏幕的margin值。

   <android.support.design.widget.CollapsingToolbarLayout
       ...
       app:expandedTitleMarginStart="48dp"
       ...>

4. app:expandedTitleMarginBottom

作用：設置標題展開時距離底部的margin值。

   <android.support.design.widget.CollapsingToolbarLayout
       ...
       app:expandedTitleMarginBottom="48dp"
       ...>

5. app:expandedTitleTextAppearance

作用：設置標題展開時的TextStyle。

   <android.support.design.widget.CollapsingToolbarLayout
       ...
       app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedText"
       ...>

6. app:collapsedTitleTextAppearance

作用：設置標題摺疊時的TextStyle。

   <android.support.design.widget.CollapsingToolbarLayout
       ...
       app:collapsedTitleTextAppearance="@style/CollapsingToolbarLayoutCollapsedText"
       ...>

三、樣例代碼

下面是一個簡單的樣例代碼，演示如何使用CollapsingToolbarLayout：

   <android.support.design.widget.CoordinatorLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">

       <android.support.design.widget.AppBarLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content">

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

               <ImageView
                   android:layout_width="match_parent"
                   android:layout_height="200dp"
                   android:scaleType="centerCrop"
                   android:src="@drawable/image"
                   app:layout_collapseMode="parallax"/>

               <android.support.v7.widget.Toolbar
                   android:layout_width="match_parent"
                   android:layout_height="?attr/actionBarSize"
                   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">

           <TextView
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="@string/large_text"/>

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

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

四、總結

CollapsingToolbarLayout是Android Material Design庫中的一個非常實用的控制項，用於實現帶摺疊效果的Toolbar。通過本篇文章的介紹，相信大家對於CollapsingToolbarLayout有了更加深入的理解，有助於大家在日常的Android應用開發中更加靈活地使用它。