マテリアルデザイン

Android5.0 +（CollapsingToolbarLayout）



Android5 0



CollapsingToolbarLayoutは、FrameLayoutを継承し、layout_scrollFlagsを設定する折りたたみ可能なツールバーを提供します。これは、CollapsingToolbarLayoutに含まれるコントロール（ImageViewやToolbarなど）を制御して、layout_behaviorイベントに応答して対応するscrollFlagsスクロールイベントを作成します。画面に加えて、または画面の上部に固定されています）。

CollapsingToolbarLayoutを使用します。



 1 <android.support.design.widget.AppBarLayout  2 android:layout_width='match_parent'  3 android:layout_dp'  4 android:fitsSystemWindows='true'>  5 <android.support.design.widget.CollapsingToolbarLayout  6 android:id='@+id/collapsing_toolbar_layout'  7 android:layout_width='match_parent'  8 android:layout_height='match_parent'  9 app:contentScrim='#30469b' 10 app:expandedTitleMarginStart='48dp' 11 app:layout_scrollFlags='scroll|exitUntilCollapsed'> 12 <ImageView 13 android:layout_width='match_parent' 14 android:layout_height='match_parent' 15 android:scaleType='centerCrop' 16 android:src='@mipmap/bg' 17 app:layout_collapseMode='parallax' 18 app:layout_collapseParallaxMultiplier='0.7' /> 19 <android.support.v7.widget.Toolbar 20 android:id='@+id/toolbar' 21 android:layout_width='match_parent' 22 android:layout_height='?attr/actionBarSize' 23 app:layout_collapseMode='pin' /> 24 25

CollapsingToolbarLayoutにImageViewとツールバーを設定します。そして、このCollapsingToolbarLayoutを全体としてAppBarLayoutに配置します。

1、CollapsingToolbarLayoutで：



layout_scrollFlagsを設定します。ここでそれについて話します：

  • スクロール-スクロールしたい場合はこれを設定する必要があります。

  • enterAlways-クイックリターン効果を実現し、下に表示するとすぐにビュー（ツールバーなど）を表示します。



  • exitUntilCollapsed-上にスクロールするとビューが縮小しますが、ツールバーをそこまで固定できます。

  • enterAlwaysCollapsed-ビューがminHeightプロパティを設定し、このフラグを使用している場合、ビューは最小の高さでのみ入力でき、スクロールビューが最上部に達したときにのみ完全な高さに拡張できます。

いくつかのプロパティセット、簡単な説明もあります。

  • contentScrim-完全なCollapsingToolbarLayoutが折りたたまれた（縮小された）ときの背景色を設定します。

  • ExpandedTitleMarginStart-拡大したとき（縮小していないとき）にタイトルが左に塗りつぶされる距離を設定します。

図に示すように、拡張しない場合：

勉強中に穴に遭遇しました。

ツールバーの背景色を最初から直接設定します。

android:background='@color/homepage_toolbar_color'  
The effect is this

It can be seen that the Toolbar becomes opaque at this time, obscuring the upper part of the image, but what we want is that the Toorbar is transparent when the CollapsingToolbarLayout is expanded. 
So we don't set the background color for the Toolbar, but we should set it in the CollapsingToolbarLayout.
app:contentScrim='@color/color'， To set the color of the Toolbar after the Toolbar is stacked.

2、ImageViewコントロールで：

私たちは設定しました：

  • layout_collapseMode（折りたたみモード）-2つの値があります。

    • ピン- このモードに設定すると、CollapsingToolbarLayoutが完全に縮小されたときに、ツールバーを画面に表示したままにすることができます。

    • 視差-このモードに設定すると、CollapsingToolbarLayoutのビュー（ImageViewなど）をコンテンツのスクロールと同時にスクロールすることもでき、通常はlayout_collapseParallaxMultiplier（視差係数を設定）と組み合わせて視差スクロールを実現します。

  • layout_collapseParallaxMultiplier（視差係数）-視差スクロール係数を0〜1の値に設定します。

3、ツールバーコントロールで：

layout_collapseMode（fold mode）：pinを設定します。

要約：CollapsingToolbarLayoutのlayout_scrollFlagsイベントに応答するようにlayout_behaviorコントロールが設定されている場合、ImageViewには、画面を上にスクロールして削除する視差効果があります。折り畳みが始まると、CollapsingToolbarLayoutの背景色（つまり、ツールバーの背景色）は次のようになります。設定した背景色になり、ツールバーは常に上部に固定されます。

[注]：CollapsingToolbarLayoutを使用する場合、タイトルはCollapsingToolbarLayoutに設定する必要があり、ツールバーに設定すると表示されません。これは：

mCollapsingToolbarLayout.setTitle（ ''）

変数タイトルのフォントの色：

展開時のタイトルの色：mCollapsingToolbarLayout.setExpandedTitleColor（）

縮小後にツールバーに表示されたときのタイトルの色：mCollapsingToolbarLayout.setCollapsedTitleTextColor（）

終わり。 

転載：https：//www.cnblogs.com/xjx22/p/5329290.html