学习笔记：CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout实现酷炫标题栏

最新推荐文章于 2024-05-07 21:54:22 发布

淡然一笑、

最新推荐文章于 2024-05-07 21:54:22 发布

阅读量831

点赞数 1

分类专栏：【Android】文章标签： CoordinatorLayout AppbarLayout CollapsingToolbarLayout 5.0新控件折叠标题栏

本文链接：https://blog.csdn.net/weixin_39251617/article/details/79032691

版权

【Android】专栏收录该内容

34 篇文章 13 订阅

订阅专栏

一、前言

依赖关系：
CollapsingToolbarLayout > AppbarLayout > CoordinatorLayout

CollapsingToolbarLayout，用来包装Toolbar实现可折叠标题栏，必须作为AppbarLayout的直接子view使用；AppbarLayout又要作为CoordinatorLayout的直接子view使用，否则功能不能正常使用。

三者都是design包中的，使用需要导入design包

compile 'com.android.support:design:25.3.1'

二、CoordinatorLayout

1. 简介

CoordinatorLayout，design包提供的一个加强版的FrameLayout，可以监听子控件的各种事件，自动协调作出最合理的响应。

2. 要点

1. app:layout_behavior （用于child view）

布局示例：
根部局CoordinatorLayout，子视图 Toolbar + NestedScrollview

因为 CoordinatorLayout 实际上是 FrameLayout，所以 NestedScrollview 会覆盖遮挡 Toolbar。

解决办法：

NestedScrollview 加上 MarginTop 属性，值为 Toolbar 高度。

但是，CoordinatorLayout 为我们提供了更好的解决办法：

为Toolbar包裹一层AppbarLayout
为NestedScrollview添加属性app:layout_behavior="@string/appbar_scrolling_view_behavior"

2. 子视图为滚动视图

子视图为滚动控件时，要选择实现NestedScrollingChild接口的控件，如NestedScrollview 或 Recyclerview ；如果用listview 或 scrollview联动有问题

三、AppbarLayout

1. 简介

AppbarLayout继承自LinearLayout，是个垂直的线性布局，严重依赖CoordinatorLayout。

2. 要点

1. app:layout_scrollFlags （用于child view）

AppbarLayout通过child view设置的这个属性获知它们需要的滚动行为。共有5种常量值：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed。

代码设置：

AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL| AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP);

xml设置：

 <android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    app:layout_scrollFlags="scroll|snap"/>

1. scroll

滚动模式，此属性将会让child view直接与滚动事件关联，随着scroll view滚动而滚动，优先滚动scroll view。

注意：

使用其他常量值，必须结合使用scroll常量值，否则不起作用
使用此常量值的子view，如果前面还有其他子view，也要使用此常量值，否则不起作用

 <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll" />
</android.support.design.widget.AppBarLayout>

2. enterAlways

快速返回模式，向下滚动时优先滚动child view至完全显示，再去滚动scroll view。

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
       ……
    app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>

3. enterAlwaysCollapsed

快速返回折叠标题栏的最小高度，enterAlaways的附加值，向下滚动时优先滚动child view至最小高度，再滚动scroll view 至完全显示，最后滚动child view 至完全显示。

 <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="56dp"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />
</android.support.design.widget.AppBarLayout>

4. exitUntilCollapsed

滚出屏幕至折叠处（最小高度），向上滚动时child view 随 scroll view滚动出屏幕直到最小高度后不再滚动；向下滚动时优先滚动scroll view 至完全显示，再滚动child view至完全显示。

 <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="56dp"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.AppBarLayout>

5. snap

吸附模式，根据child view在我们滑动中松开手指时的滑动高度决定child view 要么完全显示，要么完全不显示。

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="56dp"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" />
</android.support.design.widget.AppBarLayout>

上图因为结合使用了exitUntilCollapsed，toolbar最少显示为最小高度，不能完全不显示

四、CollapsingToolbarLayout

1. 简介

CollapsingToolbarLayout继承自FrameLayout，用来包装Toolbar实现折叠标题栏，必须在AppbarLayout中使用。

2. 要点

1. theme （用于自身）

为实现更高级的toolbar效果，theme属性要提到collapsingtoolbarlayout上，否则collapsingtoolbarlayout使用的是应用的主题。

上图，只给toolbar设置了theme：

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

应用主题:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

collapsingtoolbarlayout使用了应用主题，所以它的标题为黑色

2. app:layout_collapseMode （用于child view）

collapsingtoolbarlayout中的child view的折叠模式。

1. pin

大头针效果，在折叠的过程中保持位置不变。

2. parallax

视觉差效果，在折叠过程中产生错位偏移。

3. app:contentScrim （用于自身）

此属性用于collapsingtoolbarlayout自身，用于设定它在折叠过程中趋于折叠状态和折叠后的背景色，折叠后就是普通的toolbar，一般设为背景色为colorPrimary。

五、整合使用实现酷炫折叠标题栏

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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <ImageView
                android:id="@+id/iv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="4dp"
            android:text="
    宋祖儿（lareina），1998年5月23日出生于天津，中国内地影视女演员。
    2005年，宋祖儿出演了个人首部影视作品《海阔天高》，由此开始涉足演艺圈[1]  。2007年，首次登上央视春晚舞台，并表演节目《阳光下的花朵》[2]  ；同年，由她领衔主演的公益电影《你是天使》上映[3]  。2009年，因在古装神话剧《宝莲灯前传》中饰演哪吒而被观众熟知[4]  。
    2016年，主演喜剧冒险片《洛杉矶捣蛋计划》[5]  。2017年，除了加盟湖南卫视明星自助旅游真人秀《花儿与少年第三季》[6]  ，她还主演古代传奇《九州缥缈录》及青春剧《全职高手》[7]  。
"
            android:textSize="22sp"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        app:elevation="8dp"/>

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

2. 代码设置

final ImageView iv = (ImageView) findViewById(R.id.iv);
iv.post(new Runnable() {
    @Override
    public void run() {
        setPic(iv);
    }
});
        
 public void setPic(ImageView imageView) {
        // 获取imageview控件的宽高
        int targetW = imageView.getWidth();
        int targetH = imageView.getHeight();
        if (targetW == 0 || targetH == 0) {
            imageView.measure(0, 0);
            targetW = imageView.getMeasuredWidth();
            targetH = imageView.getMeasuredHeight();
        }

        // 获取图片的宽高
        BitmapFactory.Options bmOptions = new BitmapFactory.Options();
        bmOptions.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(getResources(),R.drawable.girl,bmOptions);
        int photoW = bmOptions.outWidth;
        int photoH = bmOptions.outHeight;

        // 获得最小压缩比例
        int scaleFactor = Math.min(photoW/targetW, photoH/targetH);

        // Decode the image file into a Bitmap sized to fill the View
        bmOptions.inJustDecodeBounds = false;
        bmOptions.inSampleSize = scaleFactor;
        bmOptions.inPurgeable = true;
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.girl,bmOptions);

        imageView.setImageBitmap(bitmap);
    }

3. 注意

1. 如果不使用iv.post(runnable),会报错在这行

int scaleFactor = Math.min(photoW/targetW, photoH/targetH);

错误为：

java.lang.ArithmeticException: divide by zero

原因是：
代码在onCreate()中执行，而view的绘制分为onMeasure、onDraw()、onLayout()三个步骤，view的宽高要在onLayout()这个步骤才能获取到，但在onCreate()中获取时不能保证view的绘制已经到了这一步，没有到这步，获取的是0，所以报这个除数为零的算术异常。

view.post(Runnable)的作用：
将任务添加到消息队列中，保证在UI线程执行。MessageQueue是按顺序处理消息的，而在setContentView()后队列中会包含一条询问是否完成布局的消息，而我们的任务通过View.post()方法被添加到队列尾部，保证了在layout结束以后才执行。

2.图片压缩

上面代码可看出，collapsingtoolbarlayout中的imageview设置图片是通过代码设置的，并且进行了图片压缩。
如果不压缩，图片尺寸过大，会导致OOM 或者页面非常卡顿。
当然也可以直接用图片处理框架，如glide

个人总结，水平有限，如果有错误，希望大家能给留言指正！如果对您有所帮助，可以帮忙点个赞！如果转载，希望可以标明文章出处！最后，非常感谢您的阅读！

淡然一笑、

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记：CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout实现酷炫标题栏

一、前言依赖关系： CollapsingToolbarLayout &amp;gt; AppbarLayout &amp;gt; CoordinatorLayoutCollapsingToolbarLayout，用来包装Toolbar实现可折叠标题栏，必须作为AppbarLayout的直接子view使用；AppbarLayout又要作为CoordinatorLayout的直接子view使用，...
复制链接

扫一扫