CollapsingToolbarLayout用法詳解(簡潔易懂)
Collapsing翻譯過來就是摺疊的意思。
CollapsingToolbarLayout:顧名思義就是可摺疊的toolbar佈局。
先看一下使用它的效果:
可以看到有這樣幾個效果:
1、背景圖片漸漸消失變為主題顏色
2、FloatingActionButton在滑到頂部的時候消失了
3、左上角的箭頭保持不動
4、title在滑到頂部的時候自動調整位置和大小
CollapsingToolbarLayout就是這樣一個把各種toolbar的效果組合起來的佈局,它可以實現toolbar的摺疊效果。
要實現這樣的效果還需要CoordinatorLayout+AppBarLayout的配合。
佈局檔案:
activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<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 .design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="60dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="@drawable/material_img"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.5" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/my_txt"
android:textSize="20sp" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="end|bottom|right" />
</android.support.design.widget.CoordinatorLayout>
關鍵詞:
CoordinatorLayout:
Coordinator : 協調。
協調(Coordinate)其他元件, 實現聯動的佈局。只有最外層是這個佈局,一些滾動行為的引數才能使用。
AppBarLayout:
AppBarLayout會將它內部的所有控制元件組合成一個toolbar,它繼承自LinearLayout,佈局方向為垂直方向。它可以設定當某個可滾動View的滾動手勢發生變化時,其內部的子View如何動作。
CollapsingToolbarLayout:
實現可摺疊toolbar的佈局。通過設定一些屬性實現可摺疊的toolbar。
Toolbar:完美代替actionbar的新控制元件。
NestedScrollView
Nested:巢狀
NestedScrollView代替了ScrollView。它符合MD設計風格,並且能更好的和其它新控制元件配合。它自己佈局內的子View滾動的時候會自動觸發CoordinatorLayout中設定的ToolBar的滑入滑出。
FloatingActionButton
浮動按鈕
關鍵屬性:
contentScrim :
當CollapsingToolbarLayout完全摺疊後的背景顏色。
通常設定為:app:contentScrim=”?attr/colorPrimary”,這樣當CollapsingToolbarLayout完全摺疊後就會顯示主題顏色。
expandedTitleMarginStart :
佈局張開的時候title與左邊的距離,如圖:
layout_scrollFlags:
設定滾動表現:
1、 Scroll, 表示手指向上滑動的時候,CollapsingToolbarLayout也會向上滾出螢幕並且消失,這個屬性必須要有。
2、 exitUntilCollapsed, 表示這個layout會一直滾動離開螢幕範圍,直到它收折成它的最小高度.
如圖:
有exitUntilCollapsed屬性
最後會固定在頭部
沒有exitUntilCollapsed 屬性:
最後會滑出去
3、enterAlways: 一旦手指向下滑動這個view就可見。
4、enterAlwaysCollapsed:
這個flag定義的是已經消失之後何時再次顯示。假設你定義了一個最小高度(minHeight)同時enterAlways也定義了, 那麼view將在到達 這個最小高度的時候開始顯示,並且從這個時候開始慢慢展開,當滾動到頂部的時候展開完。
ImageView及Toolbar中的屬性:
layout_collapseMode=””
1、 pin
在view摺疊的時候Toolbar仍然被固定在螢幕的頂部。
2、 parallax
設定為這個模式時,在內容滾動時,CollapsingToolbarLayout中的View(比如ImageView)也可以同時滾動,實現視差滾動效果, 通常和layout_collapseParallaxMultiplier(設定視差因子,值為0~1)搭配使用。
parallax:視差
toolbar設定parallax: 注意看左上角的箭頭,它會滑出頭佈局
toolbar設定pin:注意看左上角的箭頭,它會固定在頭佈局
我們再看看
layout_collapseParallaxMultiplier的影響
layout_collapseParallaxMultiplier=0.8
layout_collapseParallaxMultiplier=0.3
可以看到給layout_collapseParallaxMultiplier設定的值越大可以讓滾動的效果更加明顯。
FloatingActionButton的屬性
app:layout_anchor=”@id/appbar”
app:layout_anchorGravity=”end|bottom|right”
anchor: 錨
app:layout_anchor
設定這個屬性可以讓FloatingActionButton以某一個控制元件為基準調整位置,我們這裡設定這個控制元件就是appbar
app:layout_anchorGravity
設定基於appbar控制元件的位置,我們這裡設定了end|bottom|right
這樣兩行程式碼就可以將FloatingActionButton設定在appbar的右下角,並且行為會和appbar的滾動行為協作。
另外需要注意的是Toolbar的title需要在程式碼裡設定:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("HD TEST");
toolbar.setNavigationIcon(R.drawable.back);
setSupportActionBar(toolbar);
程式碼下載: