安卓CollapsingToolbarLayout

1.CollapsingToolbarLayout介绍:

CollapsingToolbarLayout介绍:
collapsingToolbarLayout一般不会单独出现在布局文件中，而是作为另一个控件CoordinatorLayout的子元素出现。

常用属性

• app:contentScrim：当Toolbar收缩到一定程度时的所展现的主体颜色。即Toolbar的颜色。
• app:title:当titleEnable设置为true的时候，在toolbar展开的时候，显示大标题，toolbar收缩时，显示为toolbar上面的小标题。
• app:scrimAnimationDuration：该属性控制toolbar收缩时，颜色变化的动画持续时间。即颜色变为contentScrim所指定的颜色进行的动画所需要的时间
• app:collapsedTitleTextAppearance：指定toolbar收缩时，标题字体的样式。
• app:collapsedTitleGravity : 指定toolbar收缩时的标题文字对齐方式。
• app:expandedTitleTextAppearance : 指定toolbar展开后的标题文字字体。
• app:expandedTitleGravity：指定toolbar展开时，title所在的位置。类似的还有expandedTitleMargin、collapsedTitleGravity这些属性。
• app:expandedTitleMargin : 指定展开后的标题四周间距。

2.结合CardView的小案例

看代码
设置为NoActionBar:传送门
在build.gradle导入：

    implementation 'com.android.support:appcompat-v7:26.0.0-alpha1'
    implementation 'com.android.support:design:26.0.0-alpha1'
    implementation 'com.android.support:cardview-v7:26.0.0-alpha1'

• activity_main_xml
  布局文件是以CoordinatorLayout为根布局，包含了一个AppBarLayout和NestedScrollView,AppBarLayout里面CollapsingToolbarLayout有背景图和一个ToolBar。
• 小知识：在coordinatorLayout做父布局的情况下，给滑动控件设置一个app:layout_behavior="@string/appbar_scrolling_view_behavior"标志位，当带有该标志位的控件滑动时会触发带有layout_scrollFlags标志位的另一个控件滑动。此时imageview的layout_collapseMode是parallax，所以它会以有视差的方式来相对滑动，而toolbar设置了pin的标记位，所以在收缩后会固定在屏幕顶部。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <!-- app:contentScrim 设置当工具栏收缩一定程度时所展示的主体颜色-->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="200dp"
            app:collapsedTitleGravity="left"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="10dp"
            app:expandedTitleMarginStart="10dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <!--ImageView应当方Toolbar上面,因为CollapsingToolbarLayout是帧式布局，如放在下面就在最上层，会覆盖其他的-->
            <ImageView
                android:id="@+id/image_view"
                android:src="@mipmap/ic_launcher"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
            <!--这里工具栏颜色默认是透明，当工具栏折叠后CollapsingToolbarLayout的颜色充当Toolbar背景颜色-->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"></androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            android:paddingTop="24dp">

            <include layout="@layout/card_item" />

            <include layout="@layout/card_item" />

            <include layout="@layout/card_item" />

            <include layout="@layout/card_item" />

            <include layout="@layout/card_item" />

            <include layout="@layout/card_item" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

• card_item.xml
  一个以CardView为根布局的布局。

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    app:contentPadding="10dp"
    app:cardElevation="10dp"
    app:cardCornerRadius="10dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Card"
        android:textSize="20sp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="世界上根本就不存在完美的事物，我们没必要浪费大量的精力去寻找不存在的东西。与其用一生的时间去执着地追求虚无缥缈的东西，不如珍惜和把握现在美好的生活。
        当我们抛开追求完美的幻想和错觉，收获的可能是埋藏在平凡和朴实生活中的幸福"/>
</androidx.cardview.widget.CardView>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    Toolbar mToolbar;
    CollapsingToolbarLayout mCollapsingToolbarLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar=findViewById(R.id.tool_bar);
        mCollapsingToolbarLayout=findViewById(R.id.collapsing_toolbar_layout);
        setSupportActionBar(mToolbar);
        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);
        mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);

    }
}