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很好地覆蓋獲得阿爾法。