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应用开发中更加灵活地使用它。