CollapsingToolbarLayout：类似于 Facebook 的自定义 contentScrim

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 默认稀松布似乎仅在您向上滚动屏幕 3/4 时才开始工作。在你之前，图像视图仍然完全显示。此外，当您到达屏幕的 3/4 时，稀松布开始并自动将折叠工具栏布局的颜色更改为您的稀松布颜色：

当你向上滚动 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 组成，背景 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 在他们的应用程序中所做的事情。

您必须为您的 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 .

CollapsingToolbarLayout：类似于 Facebook 的自定义 contentScrim

CollapsingToolbarLayout: custom contentScrim similar to Facebook

android

android-collapsingtoolbarlayout

android-appbarlayout