CollapsingToolbarLayout:自定义contentScrim类似于Facebook

我想为我的collapsingToolbarLayout创build一个自定义的contentScrim。 我的collapsingToolbarLayout里面有一个imageview 。 当它滚动时,理论上图像视图被设想淡出,并且我的稀松布颜色被设想淡入。

我们都知道我们可以像这样创build一个网格:

  <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时,网格布会自动将collapsingtoolbarlaylay的颜色更改为您的网格布颜色:

纱幕

当你向上滚动3/4时,在我们到达toolbar之前,不要让它完全填满屏幕,而是要让它轻轻地褪去,直到滚动到toolbar

如果你想看一个我想创build的效果的例子,看看Facebook应用程序。 当collapsingToolbarLayout完全展开时,这是Facebook应用程序:

在这里输入图像说明

当您滚动到3/4左右的时候,collapsingToolbarLayout的颜色变淡,蓝色不完全饱和:

在这里输入图像说明

所以我在collapsingToolbarLayout创build了以下内容:

  <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视图组成,该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(); } 

我们正在设置淡入淡出的alpha值,以便在向上滚动时出现。 我试图人造地创造一个稀松布。

但是,这似乎不能正常工作。 当我运行这个代码时,根本没有衰落。 有谁知道我在做什么错?

Solutions Collecting From Web of "CollapsingToolbarLayout:自定义contentScrim类似于Facebook"

这就是我设法创build一个自定义的网格布,现在似乎在很多应用程序中使用 – 如果你看Facebook,你会看到他们不使用标准的contentScrimcollapsingToolbarLayout 。 下面的代码重复了Facebook在他们的应用程序中做什么。

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

在调用监听器时, verticalOffset实际上会测量collapsingToolbarLayout从完全展开到接触固定toolbar时的偏移量。 因此, verticalOffset EXCLUDES toolbar的高度。 为了将苹果与苹果进行比较,我们还需要从appBarLayout的高度中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 custom contentScrim