CollapsingToolbarLayout 设置动画阈值？

Question

在我的应用程序中，当我开始滚动布局时，CollapsingToolbarLayout 几乎立即开始将背景更改为我设置的稀松布颜色。

有没有办法设置 CollapsingToolbar 开始改变背景的值？

这是我的 XML 布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="eu.ericnisoli.ambrosettiap.activities.MeetingActivity"
    android:visibility="visible"
    android:id="@+id/container">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:fitsSystemWindows="true"
        android:layout_height="@dimen/app_bar_height"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:titleEnabled="false">

            <RelativeLayout
                android:id="@+id/relativeLayout_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center_horizontal"
                app:layout_collapseMode="parallax">

                <FrameLayout
                    android:id="@+id/frameLayout_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_above="@+id/frameLayout_info">

                    <ImageView
                        android:id="@+id/imageView_bg"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:src="@drawable/login_bg"
                        android:scaleType="centerCrop"/>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/detail_meeting_gradient" />

                    <LinearLayout
                        android:id="@+id/linearLayout_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:paddingStart="16dp"
                        android:paddingEnd="80dp"
                        android:paddingTop="16dp"
                        android:paddingBottom="16dp"
                        android:layout_gravity="bottom">

                        <TextView
                            android:id="@+id/textView_meeting"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="@string/meeting"
                            android:textColor="@color/text_grey_1"
                            android:textSize="@dimen/text_size_14"
                            android:textAllCaps="true"
                            />

                        <TextView
                            android:id="@+id/textView_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@android:color/white"
                            android:textSize="@dimen/text_size_16"
                            android:text="New Text"
                            />

                    </LinearLayout>

                </FrameLayout>

                <FrameLayout
                    android:id="@+id/frameLayout_info"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:background="@color/grey_2">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">

                        <RelativeLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:paddingTop="32dp"
                            android:paddingBottom="32dp">

                            <LinearLayout
                                android:orientation="vertical"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerHorizontal="true"
                                android:gravity="center">

                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:src="@drawable/pin_small_icon"
                                    android:layout_marginBottom="4dp"/>

                                <TextView
                                    android:id="@+id/textView_place"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textColor="@color/text_black_1"/>

                                <TextView
                                    android:id="@+id/textView_address"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textColor="@color/text_black_1"/>
                            </LinearLayout>

                        </RelativeLayout>

                        <RelativeLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:paddingTop="32dp"
                            android:paddingBottom="32dp">

                            <LinearLayout
                                android:orientation="vertical"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerHorizontal="true"
                                android:gravity="center">

                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:src="@drawable/cal_small_icon"
                                    android:layout_marginBottom="4dp"/>

                                <TextView
                                    android:id="@+id/textView_date"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textColor="@color/text_black_1"/>

                                <TextView
                                    android:id="@+id/textView_time"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textColor="@color/text_black_1"/>
                            </LinearLayout>

                        </RelativeLayout>
                    </LinearLayout>

                </FrameLayout>

            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:title="@string/event_caps"/>

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

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

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:layout_anchor="@+id/app_bar"
            app:layout_anchorGravity="bottom"
            app:layout_collapseMode="pin">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:layout_anchor="@+id/app_bar"
                app:layout_anchorGravity="bottom"
                android:background="@color/grey_2"
                app:tabTextColor="@color/text_black_1"
                app:tabSelectedTextColor="@color/text_black_1"
                style="@style/DetailTab"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@drawable/shadow"
                android:layout_gravity="bottom"/>

        </FrameLayout>

        <android.support.v4.view.ViewPager
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_marginTop="?attr/actionBarSize"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            app:layout_anchor="@id/frameLayout_title"
            app:layout_anchorGravity="bottom|end"/>

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

<ProgressBar
    android:id="@+id/progress"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:indeterminate="true"
    android:layout_gravity="center"
    android:visibility="gone"/>

</FrameLayout>

Answer 1

在 26.1 或更高版本中，您可以使用 scrimVisibleHeightTrigger 属性来设置何时显示稀松布覆盖层的高度阈值。

<android.support.design.widget.CollapsingToolbarLayout
    app:scrimVisibleHeightTrigger="80dp"
    ...>

以像素为单位设置可见高度，用于定义何时触发稀松布可见性变化。

如果此视图的可见高度小于给定值，则稀松布将可见，否则将隐藏。

Answer 2

干燥

查看CollapsingToolbarLayout 的实现后，您可能会看到，当CollapsingToolbarLayout 高度低于其minimum height x 2 + "status bar height" 时，会出现内容稀松布：

if (mContentScrim != null || mStatusBarScrim != null) {
    setScrimsShown(getHeight() + verticalOffset < getScrimTriggerOffset() + insetTop);
}

这里是getScrimTriggerOffset 实现：

final int getScrimTriggerOffset() {
    return 2 * ViewCompat.getMinimumHeight(this);
}

很遗憾，设置minHeight 属性不起作用，因为这段代码会在onLayout 期间覆盖它：

if (mToolbarDirectChild == null || mToolbarDirectChild == this) {
    setMinimumHeight(getHeightWithMargins(mToolbar));
} else {
    setMinimumHeight(getHeightWithMargins(mToolbarDirectChild));
}

解决方案

扩展CollapsingToolbarLayout 并在onLayout 之后调用setMinimumHeight。您还可以使用setContentScrimHeight 方法的以下实现：

import android.content.Context;
import android.support.design.widget.CollapsingToolbarLayout;
import android.util.AttributeSet;

public class MyCollapsingToolbarLayout extends CollapsingToolbarLayout {

    private int contentScrimHeight;

    public MyCollapsingToolbarLayout(Context context) {
        super(context);
    }

    public MyCollapsingToolbarLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyCollapsingToolbarLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        super.setMinimumHeight(contentScrimHeight);
    }

    public int getContentScrimHeight() {
        return contentScrimHeight;
    }

    public void setContentScrimHeight(int contentScrimHeight) {
        this.contentScrimHeight = contentScrimHeight;
        requestLayout();
    }
}

Answer 3

在 ID 为 relativeLayout_title 的视图布局参数上使用 setParallaxMultiplier(float)。

setParallaxMultiplier 更改视差动画开始触发的阈值。默认情况下，它在父高度的一半处触发，相当于设置了 0.5f 的值。

Source