Introduction
CollapsingToolbarLayout是被設計為AppBarLayout的子類，用於完成一些折疊的UI視覺效果。CollapsingToolbarLayout的功能大概有以下幾點：
Collapsing title
折疊的Title文字效果，顧名思義在AppBar，完全展開時，會顯示比較大的字型，不過當滑動在螢幕外時，字體會在摺疊動畫結束後，顯示比較小的字型。顯示的文字可以特過屬性setTitle(CharSequence)設置，文字的樣式，可以透過collapsedTextAppearance與expandedTextAppearance兩個屬性調整。
Content scrim
當Appbar滑動到一定的程度時，所顯示/隱藏的主體顏色，即Toolbar顏色。可以特過setContentScrim(Drawable)
Status bar scrim
跟Content scrim相同，不過是狀態列的顏色，可以特過屬性setStatusBarScrim(Drawable)設置，不果只有在Android系統版本5.0以上，並且設定fit system windows時有效果
子類別可以在滾動時選擇，是否以”視差”的方式跟隨滾動，可以透過屬性**layout_collapseMode=”parallax”**設定
Add the Design Library
再使用CollapsingToolbarLayout前，必須先將Design Library加入專案中。在File -> Project Structure -> Dependencles 下新增
Change the Default App Theme
接下來我們必須創建自己的Toolbar，首先將style.xml裡的AppTheme改為NoActionBar，此舉將讓每頁Activity預設無Action Bar
sytle.xml:
1
2
3
4
5
6
7
8
9
10
11
| <resources>
...
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
...
</resources>
|
接下來在Activity.xml裡，新增一個Toolbar，前面我們有介紹過，CollapsingToolbarLayout是被設計用來實現AppBarLayout折疊UI效果的子類，所以我們必須在AppBarLayout下創建它，並在CollapsingToolbarLayout裡新增一張圖片，來作為AppBarLayout展開時的背景。
如果還不清楚CoordinatorLayout與AppBarLayout，可以點連結查看
layout:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <?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:orientation="vertical"
android:fitsSystemWindows="true"
tools:context="net.nickcode4fun.collapsingtoolbarlayout.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/app_bar_layout"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/collpasingToolbarLayout"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
android:src="@drawable/bg_appbar"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
android:contentDescription="@string/firework" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/toolbar"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
|
並在Activity.java中，設置Toolbar
1
2
3
4
5
6
7
8
| public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
}
}
|
運行效果如下：
參考資料：
Android CollapsingToolbarLayout