2

CoordinatorLayoutクラスを使用して、のスクロール位置に応じてToolbarの不透明度を調整しようとしています。私はこの2つのビューを手動でリンクすることに成功し、ScrollViewスクロールイベントを聞いて、私のToolbar背景のアルファ値を報告します。CoordinatorLayoutでスクロールするときにツールバーの背景のアルファ値を変更する

希望の動作は次のとおりです。ツールバーは透明状態(テキストと背景の両方)で始まり、終わるさ

全く白い背景は黒のテキストつのビューが完全にスクロールされ。

動作はおおよそYoutube videoです。

現在実装

レイアウトファイル(簡体字)

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:fitsSystemWindows="true"> 

    <ScrollView 
     android:id="@+id/scrollView" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 

      <my.package.widgets.DetailsTop 
       android:id="@+id/layout_details_top" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 

      <my.package.widgets.DetailsBottom 
       android:id="@+id/layout_details_bottom" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 
     </LinearLayout> 
    </ScrollView> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#00FFFFFF"/> 
</RelativeLayout> 

フラグメント実装

public class SearchVehicleDetailsFragment extends BaseFragment<SearchContract.ParentView> { 

    @Bind(R.id.layout_details_top) DetailsTop detailsTopLayout; 
    @Bind(R.id.layout_details_bottom) DetailsBottom detailsBottomLayout; 
    @Bind(R.id.scrollView) ScrollView scrollView; 
    @Bind(R.id.toolbar) Toolbar toolbar; 

    @Override 
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { 
     super.onViewCreated(view, savedInstanceState); 

     scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() { 
      @Override 
      public void onScrollChanged() { 
       float alpha = (float) scrollView.getScrollY()/vehicleDetailsTopLayout.getHeight(); 
       toolbar.setBackgroundColor(getColorWithAlpha(alpha, getResources().getColor(R.color.white))); 
       toolbar.setTitleTextColor(getColorWithAlpha(alpha, getResources().getColor(R.color.dark_grey))); 
      } 
     }); 
    } 

    public static int getColorWithAlpha(float alpha, int baseColor) { 
     int a = Math.min(255, Math.max(0, (int) (alpha * 255))) << 24; 
     int rgb = 0x00ffffff & baseColor; 
     return a + rgb; 
    } 
} 

通報

ただし、以前のスニペットが完全に機能するように思われる特に簡単な解決策であっても、なぜそれがCoordinatorLayoutで機能しないのか少し混乱しています。また、私はカスタムCoordinatorLayout.Behavior<android.support.v7.widget.Toolbar>の実装でこの仕事を成功させたと思われる男を見つけました。

custom CoordinatorLayout.Behavior implementationをご覧ください。彼はまた、Mediumに関するいくつかの詳細を提供します。しかし、代わりにフルToolbarタグとサポートデザインライブラリー作品のどのようにこの部分の理解の強い不足のちょうど<android.support.v7.widget.Toolbar .../>の多くのためには、私は...それを実装することができなかった

質問

CoordinatorLayoutとそれを取り巻くすべてのクラスがどのように連携しているかを知りたいと思います。だから私は恐らくScrollViewのスクロール位置をツールバーの背景色のアルファ値にリンクするという、私が探している振る舞いを実装することができます。

あなたもこのすべてを実装する方法を知っていればもちろん、私はあなたのスニペットを見て、本当に幸せになります:)

+0

これはクールなコンセプトのようなものです。 –

+1

コーディネーターレイアウトの詳細な説明をお探しの場合は、これを確認してください。 https://medium.com/google-developers/intercepting-everything-with-coordinatorlayout-behaviors-8c6adc140c26#.nvsysrem6 –

答えて

0

私は行動の実験をしてきた、私はあなたが私の記事は、部分的に役に立った幸せです。

私はToolbarチャンクのコードを編集しました。これは重要ではないためです。シンプルToolbar属性、それについて何も特別:

<android.support.v7.widget.Toolbar 
    android:layout_height="?attr/actionBarSize" 
    android:layout_width="match_parent" 
    android:id="@+id/toolbar" 
    app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"/> 

は、私が一緒にどのように動作するかCoordinatorLayout、およびすべてのクラスその周り 、理解したいと思います。だから私はおそらく の動作を実装することができます。これはScrollViewスクロール の位置をツールバーの背景色のアルファ値にリンクしています。

レイアウトでは、CoordinatorLayoutがすべてをラップするトップの親として存在しません。代わりに、あなたはそれだけでScrollViewように動作しますが、違いはNestedScrollViewターゲットを動作させるCoordinatorLayout.BehaviorについてのみAPI 23

後にスクロールを入れ子になったScrollViewとは異なり、古いバージョンでは、ネストされたスクロールを行うことができるということですNestedScrollViewを使用する必要がありますScrollViewを使用しますビューは、CoordinatorLayoutの直系の子孫である必要があります。この記事でわかるように、Toolbarはコーディネーターの直系の子孫です。そうしないと、動作は機能しません。

NestedScrollViewの例では、AppBarLayoutが展開して折りたたむことができるように、Appbarレイアウトの動作があります。この例については、豊富な例があります。

+0

この質問をご覧くださいhttps://stackoverflow.com/questions/45460263/toolbaralphascrollbehavior-coordinatorlayout –

関連する問題