版权声明：本文为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

（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中添加以下代码

     
         
      
       #3F51B5
          
      
       #303F9F
          
      
       #FF4081
          
          
      
       #3F51B5
          
          
      
       #ffffff
      
     

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

     
         
          
      
       56dp
      
     

三、使用方法

（1）布局文件如下

（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("");                }            }        });    }}

混淆配置

无

参考资料

项目demo下载地址