时间戳

首页 > 技术文章 > CollapsingToolbarLayoutDemo【可折叠式标题栏，顺便带有CardView卡片式布局】

CollapsingToolbarLayoutDemo【可折叠式标题栏，顺便带有CardView卡片式布局】

whycxb 2018-10-04 22:21 原文

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

推荐阅读