CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar混合使用經驗

哎。。差點學崩潰了,好幾個概念都搞混了,有些明白了,趕緊記錄!儘量簡單。

CoordinatorLayout作爲頂層佈局,裏面的組件可以設置behavior,有相關動作時可以進行處理。這裏還是主要講一些交互效果吧。

情景就是這個頁面有toolbar,中間有滾動視圖,滾動時可以讓toolbar的部分產生響應,再配合CollapsingToolbarLayout,附加一些摺疊的效果。

<android.support.design.widget.CoordinatorLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:orientation="vertical"> 子view有兩部分,一個可滑動視圖,一個appbarlayout

<android.support.v7.widget.RecyclerView
android:id="@+id/rvUserProfile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />  滑動視圖需要設置這個behavior。

<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">    //作爲demo這裏放置兩個子view,一個CollapsingToolbarLayout實現toolbar的部分,還有一個

                                                               //tablayout,可以實現整個toolbar部分都消失後,tablayout停在頂部的效果

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:title="test"
app:layout_scrollFlags="scroll|enterAlways">   //作爲AppBarLayout的子view,可以設置app:layout_scrollFlags="scroll|enterAlways",它最終可以完全滑出屏幕,如果想保留


     toolbar,可以設置成exitUntilCollapsed,當然它表示的是它自己保留在頂部,如果只想toolbar保留,還需要設置摺疊屬性

<ImageView android:layout_width="match_parent"

android:layout_height="400dp"

app:layout_collapseMode="parallax"       //大圖 設置摺疊mode,表示可以隨着CollapsingToolbarLayout進行摺疊慢慢消失
/>

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:elevation="@dimen/default_elevation"
app:layout_collapseMode="pin"                           //此屬性表示摺疊之後會保留在頂部,結合前面,如果CollapsingToolbarLayout設置了exitUntilCollapsed,則最後toolbar就可以停留在頂部,如果沒設置成exitUntilCollapsed,那麼及時此處mode爲pin,它不會摺疊,但也會消失在頂部。
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

</android.support.v7.widget.Toolbar>

</android.support.design.widget.CollapsingToolbarLayout>


<FrameLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:minHeight="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">           //如果上面設置exitUntilCollapsed,tablayout會和上面保留toolbar之後一起停留在頂部,如果自己設置成其他的,則會滾動出屏幕,整個屏幕只留下toolbar和滾動視圖。如果上面沒有設置成exitUntilCollapsed,tablayout就會自己保留在頂部,如果自己和上面都沒有設置,那麼就全部滾動出去了

<android.support.design.widget.TabLayout
android:id="@+id/tlUserProfileTabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="?attr/colorAccent"
app:tabGravity="fill"
app:tabIndicatorColor="#5be5ad"

app:tabIndicatorHeight="4dp"
app:tabMode="scrollable" />

</FrameLayout>

</android.support.design.widget.AppBarLayout>


上面已經總了註釋,下面把一些網上學到的屬性分享一下,學的時候一上來就被各種嵌套搞蒙了,各種屬性也理解錯了,比如我給toolbar設置app:layout_scrollFlags這個屬性,其實根本沒有作用,因爲它不是AppBarLayout的直接子view,這個屬性是屬於AppBarLayout的子view的。

那我就先寫app:layout_scrollFlags:主要是轉自http://www.jianshu.com/p/7caa5f4f49bd。因爲擔心目標地址失效,所以還是要在這裏複製一遍

scroll

The view will be scroll in direct relation to scroll events. This flag needs to be set for any of the other flags to take effect. If any sibling views before this one do not have this flag, then this value has no effect.
Child View 伴隨着滾動事件而滾出或滾進屏幕。注意兩點:第一點,如果使用了其他值,必定要使用這個值才能起作用;第二點:如果在這個child View前面的任何其他Child View沒有設置這個值,那麼這個Child View的設置將失去作用。

示例XML代碼:

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_56"
app:titleTextColor="@color/white"
app:title="@string/app_name"
app:theme="@style/OverFlowMenuTheme"
app:popupTheme="@style/AppTheme"
android:background="@color/blue"
app:layout_scrollFlags="scroll|enterAlways"/>

</android.support.design.widget.AppBarLayout>


enterAlways

When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling. This is commonly referred to as the 'quick return' pattern.
快速返回模式。其實就是向下滾動時Scrolling View和Child View之間的滾動優先級問題。對比scroll和scroll | enterAlways設置,發生向下滾動事件時,前者優先滾動Scrolling View,後者優先滾動Child View,當優先滾動的一方已經全部滾進屏幕之後,另一方纔開始滾動。


enterAlwaysCollapsed

An additional flag for 'enterAlways' which modifies the returning view to only initially scroll back to it's collapsed height. Once the scrolling view has reached the end of it's scroll range, the remainder of this view will be scrolled into view. The collapsed height is defined by the view's minimum height.
enterAlways的附加值。這裏涉及到Child View的高度和最小高度,向下滾動時,Child View先向下滾動最小高度值,然後Scrolling View開始滾動,到達邊界時,Child View再向下滾動,直至顯示完全。

示例XML代碼:

...
android:layout_height="@dimen/dp_200"
android:minHeight="@dimen/dp_56"
...
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
...


exitUntilCollapsed

When exiting (scrolling off screen) the view will be scrolled until it is 'collapsed'. The collapsed height is defined by the view's minimum height.
這裏也涉及到最小高度。發生向上滾動事件時,Child View向上滾動退出直至最小高度,然後Scrolling View開始滾動。也就是,Child View不會完全退出屏幕。

示例SML代碼:

...
android:layout_height="@dimen/dp_200"
android:minHeight="@dimen/dp_56"
...
app:layout_scrollFlags="scroll|exitUntilCollapsed"
...



snap

Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it's closest edge. For example, if the view only has it's bottom 25% displayed, it will be scrolled off screen completely. Conversely, if it's bottom 75% is visible then it will be scrolled fully into view.
簡單理解,就是Child View滾動比例的一個吸附效果。也就是說,Child View不會存在局部顯示的情況,滾動Child View的部分高度,當我們鬆開手指時,Child View要麼向上全部滾出屏幕,要麼向下全部滾進屏幕,有點類似ViewPager的左右滑動。

示例XML代碼:

...
android:layout_height="@dimen/dp_200"
...
app:layout_scrollFlags="scroll|snap"
...


接下來是CollapsingToolbarLayout的摺疊屬性:layout_collapseMode,這個就不多解釋了,就兩種:parallax,pin。前者表示會摺疊消失。pin是摺疊後顯示在頂部保留。爲了測試,大家可以把toolbar換下位置,比如放在父佈局的bottom,依然會停留在頂部。另外就是設置前者的時候,還有一個屬性,表示差值的,layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子,值爲:0~1。大家自己改下值就能發現不同,值越大摺疊比例越小



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章