照例上圖

這次的主要靠布局的設定就可以實作效果

我們會需要宣告幾項layout

• CoordinatorLayout
• AppBarLayout
• LinearLayout

AppBarLayout包在CoordinatorLayout裡層，並且指定兩個屬性

• android:fitsSystemWindows="true"
• android:fillViewport="true"

那麼我們要呈現的畫面可以透過AppBarLayout裡層的layout實作，
這邊我們使用ConstraintLayout。

ConstraintLayout要設定的屬性為

• app:layout_scrollFlags="scroll|exitUntilCollapsed"
• android:minHeight="50dp" <= 設定固定高度
• android:orientation="vertical"

這邊要注意當我們選定要呈現固定位置的項目時，這邊是以Button
Button要設定的屬性為

• app:layout_collapseMode="pin"
• app:layout_constraintHorizontal_bias="1.0"
• android:layout_height="50dp"

這時候我們需要一個接在AppBarLayout下方的layout來呈現scroll效果，這邊是宣告一個LinearLayout。

LinearLayout要設定的屬性為

• app:layout_behavior="@string/appbar_scrolling_view_behavior"
• android:orientation="vertical"

完整布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
            android:id="@+id/AppBarLayout"
            android:layout_height="wrap_content"
            android:layout_width="match_parent" android:background="@android:color/holo_orange_dark"
            android:fitsSystemWindows="true" android:fillViewport="true">
        <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:minHeight="50dp" android:orientation="vertical">

            <ImageView
                    android:layout_width="0dp"
                    android:layout_height="464dp" app:srcCompat="@mipmap/ic_launcher"
                    android:id="@+id/imageView" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp"
                    android:layout_marginRight="8dp" app:layout_constraintStart_toStartOf="parent"
                    android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
                    android:layout_marginLeft="8dp" android:layout_marginStart="8dp"
                    app:layout_constraintHorizontal_bias="0.0" app:layout_constraintBottom_toBottomOf="parent"/>
            <Button
                    android:text="Button"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
                    android:id="@+id/button2" app:layout_constraintBottom_toBottomOf="@+id/imageView"
                    app:layout_collapseMode="pin"
                    app:layout_constraintHorizontal_bias="1.0"/>
        </android.support.constraint.ConstraintLayout>
    </android.support.design.widget.AppBarLayout>
    <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:background="@android:color/holo_blue_light">
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView15"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView14"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView13"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView12"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView11"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView10"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView9"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView8"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView7"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView6"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView5"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView4"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView3"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView2"/>
        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/textView"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

這樣一個簡單的Collapsing效果就完成了