自学“CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout”心得体会，及详细介绍

最新推荐文章于 2025-10-17 23:05:56 发布

原创最新推荐文章于 2025-10-17 23:05:56 发布 · 926 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#Android

Android 专栏收录该内容

180 篇文章

订阅专栏

惯例：先上图后说话，谢谢各位伙伴的支持! 有你们是我的福分！

效果：

欢迎一起讨论和学习，QQ：732258496 微信：15520726587

每日一言：吃学习的饭，赚改变的钱！

温馨提示：CoordinatorLayout作为根布局，为了配合老控件使用只需要在老布局外面包裹一层新的继承自framelayout的的布局就行了。比如NestedScrollView。这样就可以完美实现嵌套滑动，实现各种效果了。

一、CoordinatorLayout介绍：

基本两个功能：

1、作为顶层布局
2、调度协调子布局

功能详细描述：

1.CoordinatorLayout要和AppBarLayout等配合使用。

2.CoordinatorLayout继承自viewgrop，AppBarLayout继承自linerlayout，有orientation等属性。CollapsingToolbarLayout和NestedScrollView继承自framlayout，布局都从左上去开始，多个子布局会重叠。

3.CoordinatorLayout的直接子布局加了这个属性app:layout_behavior="@string/appbar_scrolling_view_behavior"新控件才会嵌套滑动。

4.加了app:layout_scrollFlags="scroll|exitUntilCollapsed"表示会随着一起滑，不加表示会固定在头部。属性里面有多中模式。

5.除了新控件，和recycleview外其它的都不能嵌套滑动，有2中情况，第一种如上图代码布局，把listview放入新控件里面。可以把NestedScrollView这种新控件直接当成framelayout，第二种情况，外面一层是viewpager里面是recyclerview，也能实现嵌套滑动。因为作为CoordinatorLayout的子布局，不管是直接子布局还是子子布局都必须得有一个是能嵌套滑动的，因为新控件实现了NestedScrollingParent,NestedScrollingChild, ScrollingView等关于嵌套滑动的接口，所以新控件能实现嵌套滑动。

6.CollapsingToolbarLayout有个属性app:contentScrim="?attr/colorPrimary"，这里的属性就是设置toolbar的背景的。可以选择#fff等，直接在toolbar里面设置背景并不能实现动画过度效果。

7.toolbar使用如下，需要先设置主题我noactionbar，下面包括设置标题，设置箭头，设置箭头的点击事件等。

Toolbar toolbar = (Toolbar) findViewById(R.id.detail_toolbar);
setSupportActionBar(toolbar);
CollapsingToolbarLayout appBarLayout= (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
appBarLayout.setTitle("标题");
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
    actionBar.setDisplayHomeAsUpEnabled(true);
    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            CoordinatorLayoutText002.this.finish();
        }
    });
}

8.复制一点关于属性的说明

            app:contentScrim="#30469b"//设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
            app:expandedTitleMarginStart="48dp"//设置扩张时候(还没有收缩时)title向左填充的距离。
          app:layout_scrollFlags="scroll|exitUntilCollapsed"//向上滚动时收缩View，但可以固定Toolbar一直在上面。
        app:layout_collapseMode="parallax"//设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
           app:layout_collapseParallaxMultiplier="0.7"//设置视差滚动因子，值为：0~1。
           app:layout_collapseMode="pin"//pin设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

     我们在CollapsingToolbarLayout中设置了一个ImageView和一个Toolbar。并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。

    scroll - 想滚动就必须设置这个。

    enterAlways - 实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。

    exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar一直在上面。

    enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

二.使用步骤

（温馨提示：如果视图没有及时显示出来，可重新编译，clean，rebuild）

1.添加引用

compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.4.0'

2.配置文件

<activity
    android:name=".activity.personCenter.PersonCenterOwnInfoActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    android:screenOrientation="portrait" />

3.xml文件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:theme="@style/TransparentTheme"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        android:theme="@style/TransparentTheme">


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="24dp"
            app:expandedTitleMarginStart="24dp"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Large"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/news_detail_photo_iv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/stat_hall_back"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:transitionName="transition_animation_news_photos"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"
                tools:targetApi="lollipop" />

            <View
                android:id="@+id/mask_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/mask_news_detail_photo"
                android:fitsSystemWindows="true"
                tools:visibility="visible" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/back"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


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

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:orientation="vertical">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civ_update_profile_avatar"
            android:layout_width="@dimen/size_level12"
            android:layout_height="@dimen/size_level12"
            android:background="@android:color/transparent"
            android:clickable="true"
            android:onClick="goToCamera"
            tools:src="@drawable/default_head_round" />


        <TextView
            android:id="@+id/tv_qianming"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:clickable="true"
            android:drawableLeft="@drawable/daily_bar_edit"
            android:gravity="bottom"
            android:hint="编辑个性签名"
            android:maxLength="20"
            android:padding="5dp"
            android:textSize="16sp" />


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