CollapsingToolbarLayout：自定义contentScrim类似于Facebook

Question

我想为collapsingToolbarLayout创建自定义contentScrim。我的collapsingToolbarLayout里面有一个imageview。当它滚动时，从理论上讲，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"
                >

然而，当您在屏幕上滚动3/4时，Android默认稀松布似乎才开始工作。在此之前，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>

framelayout包含背景imageview，它保存在我的collapsingToolbarLayout中显示的图片，在它前面是一个imageview，它只保存'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作为他们的{{ 1}}。下面的代码重复了Facebook在他们的应用程序中所做的事情。

您必须为活动设置collapsingToolbarLayout，然后使用以下代码来衡量工具栏的大小和appBarLayout的大小。

当您的侦听器被调用时，AppBarLayout.OnOffsetChangedListener实际上会测量verticalOffset从完全展开到触及固定collapsingToolbarLayout时的偏移量。因此，toolbar排除了verticalOffset的高度。要将苹果与苹果进行比较，我们还需要从toolbar的高度排除toolbar高度，以便在我们将appBarLayout除以verticalOffset时，也不会将verticalOffset除以也不是totalHeight包含totalHeight高度。这是获得将255 alpha值应用于的一个百分比所必需的。

toolbar

当您立即滚动时， @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)); } 会在您向上滚动时逐渐获得alpha，以便它与fading_backdrop中的图像完全叠加，类似于facebook自定义collapsingToolbarLayout。< / p>