CollapsingToolbarLayout：自定义 contentScrim 类似于 Facebook

Question

我想为我的collapsingToolbarLayout 创建一个自定义 contentScrim。我的 collapsingToolbarLayout 里面有一个imageview。当它滚动时，理论上图像视图应该会淡出，而我的稀松布颜色应该会淡入。

我们都知道我们可以制作这样的稀松布：

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:contentScrim="?attr/colorPrimary"
                android:background="@color/white"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginEnd="64dp"
                android:fitsSystemWindows="true"
                app:expandedTitleTextAppearance="@color/transparent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                >

然而，android 默认 scrim 似乎只有在您向上滚动 3/4 屏幕时才开始工作。在此之前，imageview 仍然完全显示。此外，当您到达屏幕的 3/4 时，稀松布启动并自动将 collapsingtoolbarlayout 的颜色更改为您的稀松布颜色：

当您向上滚动 3/4 并且在我们到达 toolbar 之前，它不会完全填满屏幕，我希望它逐渐消失，直到您向上滚动到 toolbar。

如果您想查看我想要创建的效果的示例，请查看 Facebook 应用程序。这是 collapsingToolbarLayout 完全展开时的 Facebook 应用：

当您向下滚动到大约 3/4 时，collapsingToolbarLayout 具有褪色的蓝色，并且蓝色没有完全饱和：

所以我在collapsingToolbarLayout 中创建了以下内容：

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frame_picture">

        <com.customshapes.SquareImageView
            android:id="@+id/backdrop"
            android:contentDescription="@string/photo"
            android:transitionName="@string/transition"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            />

        <com.customshapes.SquareImageView
            android:id="@+id/fading_backdrop"
            android:layout_width="match_parent"
            android:background="?attr/colorPrimary"
            android:layout_height="240dp"
            android:alpha="0"
            android:fitsSystemWindows="true"
            />

    </FrameLayout>

框架布局由背景imageview 组成，它包含显示在我的 collapsingToolbarLayout 中的图片，并且在它前面是一个图像视图，它只包含 'scrimColor' ?attr/colorPrimary，alpha 为 0，以便背景imageview 会发光。

然后我实现了appBarLayout的onOffsetChangedListener：

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

    fading_backdrop.setImageAlpha(verticalOffset);
    fading_backdrop.invalidate();
}

我们正在设置 fading_backdrop 的 alpha 值，以便在我们向上滚动时它会出现。我正在尝试人工制作稀松布。

但是，这似乎无法正常工作。当我运行这段代码时，完全没有褪色。有谁知道我做错了什么？

Answer 1

这就是我设法创建自定义稀松布的方法，它现在似乎在很多应用程序中使用 - 如果您查看 Facebook，您会发现他们没有使用标准的 contentScrim 来代替他们的 collapsingToolbarLayout。下面的代码复制了 Facebook 在他们的应用中所做的事情。

您必须为您的活动设置AppBarLayout.OnOffsetChangedListener，然后使用下面的代码测量工具栏的大小和appBarLayout的大小。

当你的监听器被调用时，verticalOffset 实际上测量了collapsingToolbarLayout 从完全展开到接触固定toolbar 的点的偏移量。因此，verticalOffset 不包括toolbar 的高度。为了比较苹果和苹果，我们还需要从appBarLayout 的高度中排除toolbar 高度，这样当我们将verticalOffset 除以totalHeight 时，verticalOffset 和totalHeight 都不包含toolbar高度。这对于获得应用 255 alpha 值的百分比是必要的。

  @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

        //measuring for alpha
        int toolBarHeight = toolbar.getMeasuredHeight();
        int appBarHeight = appBarLayout.getMeasuredHeight();
        Float f = ((((float) appBarHeight - toolBarHeight) + verticalOffset) / ( (float) appBarHeight - toolBarHeight)) * 255;
        fading_backdrop.getBackground().setAlpha(255 - Math.round(f));
   }

当您现在滚动时，fading_backdrop 将在您向上滚动时逐渐获得 alpha，以便它与 collapsingToolbarLayout 中的图像很好地重叠，类似于 facebook 自定义 contentScrim。