MaterialDesign之摺疊標題欄使用

iOS開發 · 發表 2019-03-08 11:19:09

摘要： MaterialDesign系列中最吸引我的便是摺疊標題欄的互動了，剛接觸時有種碾壓iOS的趕腳實現所需控制元件 CoordinatorLayout AppBarLayout CollapsingToolbarLayout Toolbar Nested...

MaterialDesign系列中最吸引我的便是摺疊標題欄的互動了，剛接觸時有種碾壓iOS的趕腳

摺疊效果的實現需要CoordinatorLayout(協調佈局)作為根佈局來支援其他子View實現效果，

AppBarLayout，NestedScrollView則為同級的View；

CollapsingToolbarLayout在設計時就被限定只能作為AppBarLayout的直接子佈局來使用， Toolbar則作為CollapsingToolbarLayout的子View存在。只有這樣才能實現效果，具體詳細可以看後續的解釋

佈局.png

scroll
滾動，設定後配合滾動檢視進行滾動，向上滾動時優先AppBarLayout子View動作執行，向下滾動時優先滾動檢視滾動（如果當前子View之前的子View未設定該屬性則當前子View設定失效）
enterAlways
必須配合第一個屬性使用，優先AppBarLayout子View動作執行
enterAlwaysCollapsed
必須配合第一個第二個屬性一起使用，相較上方的效果，只在下滑時多了一個動作限制，滾動檢視下滑時AppBarLayout的子View優先下滑最小高度的距離，之後繼續滾動檢視的滾動，滾動至邊界時繼續AppBarLayout的動作，在本次程式碼中 CollapsingToolbarLayout設定了Toolbar作為子View，同時它的最小高度便設定為Toolbar的高度，滾動的效果便是滾動檢視下滑時先滑出摺疊的標題欄，滾動至邊界時摺疊標題欄才開始繼續下滑至展開狀態
exitUntilCollapsed
必須配合第一個屬性使用，使用效果類似與第一種，但同樣多了一個最小高度的限制，這個限制決定了最小高度的子View不能被推出螢幕外，在本次程式碼的效果就是狀態列在滾動至摺疊狀態時再不會被滑出螢幕
snap
必須配合上方屬性使用，使用之後AppBarLayout的動作不會出現中間狀態，AppBarLayout在執行動作時失去了手勢響應時會自動執行到動作起始或結束狀態

parallax：視差效果(app:layout_collapseParallaxMultiplier 設定視差值0~1)，摺疊過程中不是完全同步，更符合視覺效果，類似於遮擋住消失的內容
pin：跟隨滾動，在摺疊時會固定在摺疊欄內，不會滑出螢幕
none：無特殊效果，跟隨滾動
app:titleEnabled
設定title是否生效，為false時title的滑動操作會失效(CollapsingToolbarLayout與Toolbar都可以設定提title，當都設定時CollapsingToolbarLayout設定的title會覆蓋生效，否則自動獲取Toolbar內部設定的title)

android:nestedScrollingEnabled設定AppBarLayout是否響應滾動事件