CollapsingToolbarLayoutDemo【可折疊式標題欄，順便帶有CardView卡片式布局】

版權聲明：本文為HaiyuKing原創文章，轉載請注明出處！

前言

CollapsingToolBarLayout是一個作用於ToolBar基礎之上的布局，它也是由Design Support庫提供的。不過CollapsingToolBarLayout（可折疊的toolbar布局）是不能獨立存在的，它在設計的時候就被限定只能作為AppBarLayout的直接子布局來使用。而APPBarLayout【垂直方向的LinearLayout】又必須是CoordinatiorLayout【加強版的FrameLayout】的子布局。

--摘自《第一行代碼（第2版）》

CardView適用於實現卡片式布局效果的重要控件，由appcompat-v7庫提供，實際上CardView也是一個FrameLayout，只是額外提供了圓角和陰影效果，看上去有立體的感覺。一般CardView用在ListView的item布局中，或者單獨一個區域在導航欄下方。

效果圖

代碼分析

activity_main.xml布局文件示意圖：

使用步驟

一、項目組織結構圖

注意事項：

1、  導入類文件后需要change包名以及重新import R文件路徑

2、  Values目錄下的文件（strings.xml、dimens.xml、colors.xml等），如果項目中存在，則復制里面的內容，不要整個覆蓋

二、導入步驟

（1）在build.gradle中引入design支持庫【版本號跟appcompat保持一致】

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.collapsingtoolbarlayoutdemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //引入design庫 implementation 'com.android.support:design:27.1.1'
}

（2）修改styles.xml文件中的樣式為NoActionBar

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

（3）因為使用到了CardView，所以在build.gradle中引入cardview支持庫【版本號跟appcompat保持一致】

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.collapsingtoolbarlayoutdemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //引入design庫
    implementation 'com.android.support:design:27.1.1'
    //CardView implementation 'com.android.support:cardview-v7:27.1.1'
}

（4） 在colors.xml中添加以下代碼

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <!-- toolbar背景色 -->
    <color name="nav_bg">#3F51B5</color>
    <!-- toolbar標題顏色 -->
    <color name="nav_text_color">#ffffff</color>
</resources>

（5）在dimens.xml中添加以下代碼

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- toolbar高度 -->
    <dimen name="nav_height">56dp</dimen>
</resources>

三、使用方法

（1）布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<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:background="#f4f4f4">

    <!-- 頂部導航欄 -->
    <android.support.design.widget.AppBarLayout android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        >

        <!--app:contentScrim設置折疊時工具欄布局的顏色，默認contentScrim是colorPrimary的色值
        app:statusBarScrim設置折疊時狀態欄的顏色，statusBarScrim是colorPrimaryDark的色值。-->
        <!--app:layout_scrollFlags:
        設置滾動表現：
        1、 Scroll, 表示手指向上滑動的時候,CollapsingToolbarLayout也會向上滾出屏幕並且消失，這個屬性必須要有。
        2、 exitUntilCollapsed, 表示這個layout會一直滾動離開屏幕范圍,直到它收折成它的最小高度。不再移出屏幕-->
        <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/nav_bg"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 這里可以是一張圖片或布局 -->
            <!--app:layout_collapseMode="parallax"設置為這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果, 通常和layout_collapseParallaxMultiplier(設置視差因子，值為0~1)搭配使用。-->
            <!--給layout_collapseParallaxMultiplier設置的值越大可以讓滾動的效果更加明顯。-->
            <!--android:layout_marginTop="@dimen/nav_height"-->
            <LinearLayout
                android:id="@+id/head_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:background="@color/nav_bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.8" android:layout_marginTop="@dimen/nav_height"
                android:padding="8dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="這里是自定義的布局，可以隨意布局。需要注意設置android:layout_marginTop的值是toolbar的高度值，否則就會被擋住一部分。\n還有就是ToolBar的title需要在代碼中設置。"
                    android:textColor="#ffffff"
                    android:textSize="16sp"
                    android:textStyle="bold" />
            </LinearLayout>

            <!--app:layout_collapseMode="pin" 在view折疊的時候Toolbar仍然被固定在屏幕的頂部。-->
            <!-- 這里只是放一個Toolbar，不做任何處理 -->
            <android.support.v7.widget.Toolbar android:id="@+id/toolbar_base"
                android:layout_width="match_parent"
                android:layout_height="@dimen/nav_height"
                android:minHeight="@dimen/nav_height"
                android:background="@color/nav_bg"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_collapseMode="pin"
                />

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

    </android.support.design.widget.AppBarLayout>
    <!--中間滾動區域-->
    <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"是一個系統字符串，值為：android.support.design.widget.AppBarLayout$ScrollingViewBehavior的常量值。
    唯一的作用是把自己（使用者）放到AppBarLayout的下面。（不能理解為什么叫ScrollingViewBehavior）所有View都能使用這個Behavior。-->
    <android.support.v4.widget.NestedScrollView android:layout_width="match_parent"
        android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">

            <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ffffff" android:layout_margin="10dp" app:cardCornerRadius="5dp">
                <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="卡片式布局" android:textSize="20sp" android:layout_margin="20dp"/>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ffffff"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ffffff"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ffffff"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ffffff"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>
            </android.support.v7.widget.CardView>

        </LinearLayout>

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

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

（2）代碼中控制顯示隱藏標題

package com.why.project.collapsingtoolbarlayoutdemo;

import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private AppBarLayout appBarLayout;
    private CollapsingToolbarLayout mCollapsingToolbarLayout;
    private LinearLayout mHeadlayout;
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initToolBar();
        setTitleToCollapsingToolbarLayout();
    }

    private void initViews() {
        appBarLayout = findViewById(R.id.appBar);
        mCollapsingToolbarLayout = findViewById(R.id.collapsing_toolbar);
        mHeadlayout = findViewById(R.id.head_layout);
    }

    private void initToolBar() {
        mToolbar = findViewById(R.id.toolbar_base);
        setSupportActionBar(mToolbar);//由於toolbar只是一個普通控件，我們將ToolBar設置為ActionBar
    }

    /**
     * 使用CollapsingToolbarLayout必須把title設置到CollapsingToolbarLayout上，
     * 設置到Toolbar上則不會顯示【備注：其實是可以的】
     */
    private void setTitleToCollapsingToolbarLayout() { appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { if (verticalOffset <= -mHeadlayout.getHeight() * 4 /5) { mCollapsingToolbarLayout.setTitle("我的");//設置標題 //使用下面兩個CollapsingToolbarLayout的方法設置展開透明->折疊時你想要的顏色
 mCollapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(android.R.color.transparent)); mCollapsingToolbarLayout.setCollapsedTitleTextColor(getResources().getColor(R.color.nav_text_color)); } else { mCollapsingToolbarLayout.setTitle(""); } } }); }
}

混淆配置

無

參考資料

CollapsingToolbarLayout用法詳解（簡潔易懂）

android新特性：使用CollapsingToolbarLayout實現折疊效果及問題解決

CardView卡片式布局

MaterialDesign系列文章（九）CardView的使用及適配

項目demo下載地址

https://github.com/haiyuKing/CollapsingToolbarLayoutDemo