CollapsingToolbarLayout：カスタムcontentScrim with 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" 
       > 

しかしAndroidのデフォルトのスクリム画面を3/4上にスクロールすると作業が始まるようです。その前に、画像ビューは完全に表示されます。あなたが画面の3/4に達した場合も、スクリムでキックし、自動的にあなたのスクリム色にcollapsingtoolbarlayoutの色を変更します。

代わりにあなたは3をスクロールするとき、それは完全に画面を埋めたの

/私たちが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> 

を0

framelayoutは、背景画像imageviewで構成され、collapsingToolbarLayout内に表示されている画像を保持し、その前面に背景画像imageviewが表示されるように、 'scrimColor'？attr/colorPrimaryが0のアルファベットを持つ画像ビューです輝く。

は、その後、私は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は実際にそれが固定toolbarに触れると、それが完全にポイントに展開されたときからcollapsingToolbarLayoutのオフセットを測定します。したがって、verticalOffsetは、toolbarの高さを除きます。リンゴとリンゴを比較するために、我々はtotalHeightでverticalOffsetを分割する際、verticalOffsetもtotalHeightどちらもtoolbar高さを含むようにもappBarLayoutの高さからtoolbar高さを除外する必要があります。これは255アルファ値を適用する割合を得るために必要です。あなたは今スクロールすると、それはFacebookのカスタムcontentScrimに似collapsingToolbarLayoutの画像、とうまく重なっているので、あなたが上向きにスクロールすると

@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は徐々にアルファを得ることができます。