AppBarLayout和CollapsingToolbarLayout的闲谈

包子388321

发布于 2020-06-16 18:21:34

1.5K0

发布于 2020-06-16 18:21:34

文章被收录于专栏：包子的书架包子的书架

背景

自从google的design出来之后，很多控件效果实现起来已经不需要再像以前那样写自定义控件了，最近有个需求是要到页面头部标题栏的折叠效果，因此，想想用CollapsingToolbarLayout

了解

CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器，对容器中的不同View设置layout_collapseMode折叠模式，来达到不同的折叠效果。通常CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout的搭配使用折叠的效果目前已经很常见了，在网上有很多的例子和文章，小编整理了一下知识点。

属性ScrollFlags

这个标志大家都很熟悉，滚动属性，主要有五个值

scroll： Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点：第一点，如果使用了其他值，必定要使用这个值才能起作用；第二点：如果在这个child View前面的任何其他Child View没有设置这个值，那么这个Child View的设置将失去作用
enterAlways：快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比scroll和scroll | enterAlways设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动。
enterAlwaysCollapsed：enterAlways的附加值。这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。
exitUntilCollapsed：这里也涉及到最小高度。发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。也就是，Child View不会完全退出屏幕。
snap：简单理解，就是Child View滚动比例的一个吸附效果。也就是说，Child View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，有点类似ViewPager的左右滑动。

属性contentScrim

设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

属性expandedTitleMarginStart

设置扩张时候(还没有收缩时)title向左填充的距离。

属性scrimAnimationDuration

设置控制Toolbar收缩时，颜色变化持续时间

属性 layout_collapseMode

折叠模式，有两个值

pin：固定模式，在折叠的时候最后固定在顶端。
parallax：视差模式，在折叠的时候会有个视差折叠的效果。在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用

属性layout_collapseParallaxMultiplier

设置视差的系数，介于0.0-1.0之间

属性contentInsetStart

Toolbar自身的边上文字到左边的距离

实现

布局代码

<?xml version="1.0" encoding="utf-8"?>
<com.xxxx.views.ProgressLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/progress_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/ll_bottom_layout">

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

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="@color/base_color"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

                <ImageView
                    android:id="@+id/iv_header_bg"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/bg_personal_homepage_head"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

                <RelativeLayout
                    android:id="@+id/rl_album_bg_layout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="@drawable/bg_personal_homepage_head"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7">

                    <TextView
                        android:id="@+id/tv_album_title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="@dimen/space_10"
                        android:layout_marginRight="@dimen/space_10"
                        android:layout_marginBottom="@dimen/space_10"
                        android:layout_above="@+id/tv_tag_1"
                        android:textColor="@color/white"
                        android:textSize="@dimen/font_size_16"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/tv_tag_1"
                        android:layout_width="wrap_content"
                        android:layout_height="@dimen/space_20"
                        android:layout_alignParentBottom="true"
                        android:layout_marginBottom="@dimen/space_15"
                        android:layout_marginLeft="@dimen/space_10"
                        android:background="@drawable/bg_white_album_tag"
                        android:gravity="center"
                        android:textColor="@color/white"
                        android:textSize="@dimen/font_size_11" />

                    <TextView
                        android:id="@+id/tv_tag_2"
                        android:layout_width="wrap_content"
                        android:layout_height="@dimen/space_20"
                        android:layout_alignParentBottom="true"
                        android:layout_marginBottom="@dimen/space_15"
                        android:layout_marginLeft="@dimen/space_10"
                        android:layout_toRightOf="@+id/tv_tag_1"
                        android:background="@drawable/bg_white_album_tag"
                        android:gravity="center"
                        android:textColor="@color/white"
                        android:textSize="@dimen/font_size_11" />

                    <TextView
                        android:id="@+id/tv_tag_3"
                        android:layout_width="wrap_content"
                        android:layout_height="@dimen/space_20"
                        android:layout_alignParentBottom="true"
                        android:layout_marginBottom="@dimen/space_15"
                        android:layout_marginLeft="@dimen/space_10"
                        android:layout_toRightOf="@+id/tv_tag_2"
                        android:background="@drawable/bg_white_album_tag"
                        android:gravity="center"
                        android:textColor="@color/white"
                        android:textSize="@dimen/font_size_11" />

                    <TextView
                        android:id="@+id/tv_browse_count"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_alignParentRight="true"
                        android:layout_marginBottom="@dimen/space_20"
                        android:layout_marginRight="@dimen/space_10"
                        android:drawableLeft="@drawable/icon_album_detail_browse"
                        android:drawablePadding="@dimen/space_5"
                        android:textColor="@color/white"
                        android:textSize="@dimen/font_size_11" />
                </RelativeLayout>

                <!-- 这边必须使用ToolBar -->
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    app:contentInsetStart="0dp"
                    app:contentScrim="@color/base_color"
                    app:layout_collapseMode="pin"
                    app:theme="@style/ToolbarTheme">

                    <com.xxxx.views.TitleBar
                        android:id="@+id/action_topbar"
                        android:layout_width="match_parent"
                        android:layout_height="48dp"
                        android:background="@color/transparent" />
                </android.support.v7.widget.Toolbar>

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

        <com.xxxx.views.MySwipeRefreshLayout
            android:id="@+id/swipe_refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <com.xxxx.views.LoadMoreRecyclerView
                android:id="@+id/lv_gamelist"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/white"
                android:clipToPadding="false"
                android:overScrollMode="never"
                android:scrollbars="none" />
        </com.xxxx.views.MySwipeRefreshLayout>
    </android.support.design.widget.CoordinatorLayout>

    <LinearLayout
        android:id="@+id/ll_bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white">

        <RelativeLayout
            android:id="@+id/rl_album_support"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/white_item_selector">

            <TextView
                android:id="@+id/tv_album_support"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:drawableLeft="@drawable/icon_album_flower"
                android:drawablePadding="@dimen/space_8"
                android:gravity="center"
                android:textColor="@color/font_gray"
                android:textSize="@dimen/font_size_11" />
        </RelativeLayout>

        <View
            android:layout_width="1px"
            android:layout_height="match_parent"
            android:layout_marginBottom="9dp"
            android:layout_marginTop="9dp"
            android:background="@color/album_line_color" />

        <RelativeLayout
            android:id="@+id/rl_album_collect"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/white_item_selector">

            <TextView
                android:id="@+id/tv_album_collect"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:drawableLeft="@drawable/icon_collect_selector"
                android:drawablePadding="@dimen/space_8"
                android:gravity="center"
                android:textColor="@color/font_gray"
                android:textSize="@dimen/font_size_11" />
        </RelativeLayout>

        <View
            android:layout_width="1px"
            android:layout_height="match_parent"
            android:layout_marginBottom="9dp"
            android:layout_marginTop="9dp"
            android:background="@color/album_line_color" />

        <RelativeLayout
            android:id="@+id/rl_album_comment"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/white_item_selector">

            <TextView
                android:id="@+id/tv_album_comment"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:drawableLeft="@drawable/icon_album_detail_comment"
                android:drawablePadding="@dimen/space_8"
                android:gravity="center"
                android:textColor="@color/font_gray"
                android:textSize="@dimen/font_size_11" />
        </RelativeLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="48dp"
        android:background="@color/album_detail_line" />
</com.xxxx.views.ProgressLayout>

设置折叠收起和展开的监听通过appBarLayout的OnOffsetChangedListener 的监听

appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                if( state == AppBarStateChangeListener.State.EXPANDED ) {
                    //展开状态
                    mTopBar.setTitle("");
                }else if(state == State.COLLAPSED){
                    //折叠状态
                    mTopBar.setTitle(mAlbumName);
                }else {
                    //中间状态
                    mTopBar.setTitle("");
                }
            }
        });

自定义的监听

import android.support.design.widget.AppBarLayout;

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {

    private State mCurrentState = State.IDLE;

    @Override
    public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (i == 0) {
            if (mCurrentState != State.EXPANDED) {
                onStateChanged(appBarLayout, State.EXPANDED);
            }
            mCurrentState = State.EXPANDED;
        } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
            if (mCurrentState != State.COLLAPSED) {
                onStateChanged(appBarLayout, State.COLLAPSED);
            }
            mCurrentState = State.COLLAPSED;
        } else {
            if (mCurrentState != State.IDLE) {
                onStateChanged(appBarLayout, State.IDLE);
            }
            mCurrentState = State.IDLE;
        }
    }

    public abstract void onStateChanged(AppBarLayout appBarLayout, State state);

    public static enum State {
        EXPANDED,
        COLLAPSED,
        IDLE
    }

}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript