MD-CollapsingToolbarLayout 可折叠标题栏

最新推荐文章于 2022-12-31 20:19:09 发布

little-mouse

最新推荐文章于 2022-12-31 20:19:09 发布

阅读量548

点赞数

分类专栏： Material Design 文章标签： CollapsingToolbarLayout

本文链接：https://blog.csdn.net/u013247461/article/details/103860383

版权

Material Design 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

顾名思义，CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，它也是由Design Support库提供的。CollapsingToolbarLayout 可以让Toolbar的效果变得更加丰富，不仅仅是展示一个标题栏，而是能够实现非常华丽的效果。
不过，CollapsingToolbarLayout 是不能独立存在的，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。而AppBarLayout又必须是CoordinatorLayout的子布局。

<?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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </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">

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

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp" />
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_comment"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout新增了一些属性：

android: theme属性指定了一个ThemeOverlay.AppCompat.Dark.ActionBar 的主题，其实对于这部分我们也并不陌生，因为之前在activity_main.xml中给Toolbar 指定的也是这个主题，只不过这里要实现更加高级的Toolbar效果，因此需要将这个主题的指定提到上一层来。app:contentScrim属性用于指定CollapsingToolbarLayout 在趋于折叠状态以及折叠之后的背景色，其实CollapsingToolbarLayout在折叠之后就是一个普通的Toolbar, 那么背景色肯定应该是colorPrimary 了，具体的效果我们待会儿就能看到。app: layout_scrollFlags 属性我们也是见过的，只不过之前是给Toolbar指定的，现在也移到外面来了。其中，scroll 表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动，exitUntilCollapsed表示当CollapsingToolbarlayout随着滚动完成折叠之后就保留在界面上,不再移出屏幕。

CollapsingToolbarLayout里面包着两个布局，一个是Imageview和一个toolbar；这里新增的属性有app:layout_collapseMode：表示当前控件在CollapsingToolbarLayout折叠过程中的折叠模式；

其中Toolbar指定成pin,表示在折叠的过程中位置始终保持不变，
ImageView 指定成parallax, 表示会在折叠的过程中产生一定的错位偏移，这种模式的视觉效果会非常好。

可以看到，这里还加入了一个FloatingActionButton,它和AppBarLayout以及NestedScrollView是平级的。FlatingActionButton 中使用app: layout_anchor属性指定了一个锚点，我们将锚点设置为AppBarLayout,这样悬浮按钮就会出现在水果标题栏的区域内,接着又使用app:layout_anchorGravity属性将悬浮按钮定位在标题栏区域的右下角。

新属性：android:fitsSystemWindows。只不过很可惜的是，在Android 5.0 系统之前，我们是无法对状态栏的背景或颜色进行操作的，那个时候也还没有Material Design的概念。但是Android 5.0 及之后的系统都是支持这个功能的，因此这里我们就来实现一个系统差异型的效果，在Android 5.0及之后的系统中，使用背景图和状态栏融合的模式，在之前的系统中使用普通的模式。使用value21文件夹进行适配。

关于折叠模式：可以看一下源码

AppBarLayout有接口，可以监听滑动：

 private fun initAppBarStatus() {
        binding.appbar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
            val scrollRange = appBarLayout.totalScrollRange
            var fraction = 1f * (scrollRange + verticalOffset) / scrollRange
            if (fraction < 0) {
                fraction = 0f
            }
            val alpha = ((1f - fraction) * 255f).toInt()
            val color = Color.argb(alpha, 0xff, 0xff, 0xff)
            binding.toolbar.setBackgroundColor(color)

            if (Math.abs(verticalOffset) >= appBarLayout.totalScrollRange * 0.8f) {
               // appbar_text_title.setVisibility(View.VISIBLE)
                ll_location.visibility=View.GONE
            } else {
               // appbar_text_title.setVisibility(View.INVISIBLE)
                ll_location.visibility=View.VISIBLE
            }

        })
    }