CollapsingToolbarLayout:类似于Facebook的自定义contentScrim [英] CollapsingToolbarLayout: custom contentScrim similar to Facebook

问题描述

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

I want to create a custom contentScrim for my collapsingToolbarLayout. My collapsingToolbarLayout has an imageview inside. When it scrolls, in theory the imageview is suppose to fade out and my scrim color is suppose to fade in.

我们都知道我们可以像这样创建稀松布:

We all know we can create a scrim like this:

            <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的颜色更改为稀松布的颜色:

However the android default scrim only seems to start working when you scroll 3/4 up the screen. Before you that point, the imageview is still fully shown. Also when you reach 3/4 of the screen, the scrim kicks in and automatically changes the color of the collapsingtoolbarlayout to your scrim color:

当您向上滚动3/4并到达toolbar之前，它并没有完全填充屏幕，而是希望它逐渐消失，直到您向上滚动到toolbar.

Instead of having it fill the screen fully when you scroll 3/4 of the way up and before we reached the toolbar, I want it to fade gently till your scrolled up to the toolbar.

如果要查看我要创建的效果的示例，请查看Facebook应用程序.当collapsingToolbarLayout完全展开时，这是Facebook应用程序:

If you want to see an example of the effect I want to create, have a look at the Facebook app. This is the Facebook app when the collapsingToolbarLayout is fully expanded:

当您向下滚动至大约3/4时，collapsingToolbarLayout的颜色为淡蓝色，并且蓝色未完全饱和:

When you scroll to about 3/4 of the way down, the collapsingToolbarLayout has a faded blue color and the blue is not completely saturating:

因此，我在collapsingToolbarLayout中创建了以下内容:

So I have create the following inside my 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会发光.

The framelayout comprises of the backdrop imageview which holds the picture that is displayed inside my collapsingToolbarLayout and in front of it is an imageview which just holds the 'scrimColor' ?attr/colorPrimary with an alpha of 0 so that the backdrop imageview will shine through.

然后我实现了appBarLayout的onOffsetChangedListener:

Then I implemented the appBarLayout's onOffsetChangedListener:

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

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

我们正在设置fading_backdrop的Alpha，以便在我们向上滚动时将其显示.我正在尝试人工创建稀松布.

We are setting the alpha of the fading_backdrop so that it will appear when we scroll up. I'm trying to create a scrim artifically.

但是，这似乎无法正常工作.当我运行此代码时，根本没有褪色.有人知道我在做什么错吗?

However, this doesn't seem to work properly. There is no fading at all when I run this code. Does anyone know what I'm doing wrong?

推荐答案

这就是我设法创建自定义稀松布的方式，该稀松布如今已在许多应用程序中使用-如果您查看Facebook，您会看到它们不要将标准contentScrim用于其collapsingToolbarLayout.下面的代码重复了Facebook在其应用程序中的操作.

This is how I managed to create a custom scrim, which seems to be used in quite a few apps nowadays - if you look at Facebook, you will see they do not use the standard contentScrim for their collapsingToolbarLayout. The code below duplicates what Facebook does in their app.

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

You must set a AppBarLayout.OnOffsetChangedListener to your activity and then use the following code below to measure the size of the toolbar and the size of the appBarLayout.

当调用您的侦听器时，verticalOffset实际上测量的是collapsingToolbarLayout从完全展开到触摸固定的toolbar的点的偏移量.因此，verticalOffset不包括toolbar的高度.为了将苹果与苹果进行比较，我们还需要从appBarLayout的高度中排除toolbar的高度，以便在将verticalOffset除以totalHeight时，verticalOffset和totalHeight都不包含toolbar高度.为了获得将您的255 alpha值应用到的百分比，这是必需的.

When your listener is called, the verticalOffset actually measures the offset of the collapsingToolbarLayout from when it is fully expanded to the point when it touches the pinned toolbar. Therefore, the verticalOffset EXCLUDES the height of the toolbar. To compare apples with apples, we need to also EXCLUDE the toolbar height from the height of the appBarLayout so that when we divide the verticalOffset by the totalHeight, neither the verticalOffset nor the totalHeight contains the toolbar height. This is necessary in order to obtain a percentage to apply your 255 alpha value to.

  @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.

When you scroll now, the fading_backdrop will gradually gain alpha when you scroll upwards so that it overlays nicely with the image in the collapsingToolbarLayout, similar to the facebook custom contentScrim.

这篇关于CollapsingToolbarLayout:类似于Facebook的自定义contentScrim的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！