CollapsingToolbarLayout：与Facebook类似的自定义contentScrim

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

但是Android的默认纱幕只有当您在屏幕上滚动3/4时，似乎才开始工作。在这之前，imageview仍然完全显示。此外，当你到达屏幕的3/4，在纱幕踢和自动改变collapsingtoolbarlayout的颜色，你的棉麻织物颜色：

而是有它完全填满屏幕滚动时3/4的方式和我们到达toolbar之前，我希望它轻轻地褪色，直到您滚动到toolbar。

如果您想查看我想创建的效果示例，请查看Facebook应用程序。这是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，它只保存'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的阿尔法这样，当我们向上滚动，它就会出现。我试图人造地创建一种稀松布。

但是，这似乎并没有正常工作。当我运行这个代码时，根本没有衰落。有谁知道我做错了什么？

Answer 1

这就是我设法创建自定义网格布的方法，现在似乎在很多应用程序中都使用它 - 如果您查看Facebook，则会看到它们的collapsingToolbarLayout不使用标准contentScrim。下面的代码重复了Facebook在其应用中所做的事情。

您必须为您的活动设置一个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会逐渐当你向上滚动，使其与在collapsingToolbarLayout图像，类似facebook的定制contentScrim很好地覆盖获得阿尔法。