CollapsingToolbarLayout: 自定义contentScrim，类似于Facebook

Question

我希望为我的collapsingToolbarLayout创建自定义的contentScrim。我的collapsingToolbarLayout内部有一个imageview。理论上，当它滚动时，imageview应该淡出，我的scrim颜色应该淡入。

我们都知道可以像这样创建一个scrim：

            <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"
                >

然而，安卓默认的遮罩只有在屏幕滚动到3/4以上时才开始起作用。在此之前，ImageView仍将完全显示。当你滚动到屏幕的3/4位置时，遮罩会自动改变CollapsingToolbarLayout的颜色为你设置的遮罩颜色。

当你滚动屏幕到3/4位置并且还没达到工具栏之前，我希望它能够渐渐变淡，而不是充满整个屏幕。

如果你想看一个我想要创建的效果的例子，请查看Facebook应用程序。这是完全展开时的collapsingToolbarLayout:

当您滚动到页面的约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>

FrameLayout由背景imageview组成，它持有在我的CollapsingToolbarLayout中显示的图片，并且在其前面是一个ImageView，它仅持有带有alpha 0的'scrimColor' ?attr/colorPrimary，以便背景imageview可以透过它发光。

然后我实现了AppBarLayout的onOffsetChangedListener：

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

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

我们正在设置fading_backdrop的alpha值，以便在向上滚动时出现。我试图人工创建一个遮罩。

然而，这似乎并不起作用。当我运行这段代码时，根本没有任何淡入效果。有人知道我做错了什么吗？

- Simon

Answer 1

这是我成功创建自定义蒙版的方法，现在很多应用程序都在使用 - 例如，如果你看Facebook，你会发现他们没有使用标准的contentScrim来实现collapsingToolbarLayout。下面的代码复制了Facebook应用程序中的效果。

在你的Activity中，必须设置一个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。

- Simon

---

这里的 fading_backgrop 是什么？ - Nigam Patro

注意，如果您正在使用TabLayout或透明状态栏，则可能需要将它们添加到f的计算中。 - advice