CoordinatorLayout是用來協調子View之間動作的一個Layout,能依Layout裡一個View的位置變化,讓其他Layout也跟著移動。在不少的App都可以看到這樣的效果。
這個例子 Head會隨著下方Scrollview 的滑動而隱藏和出現。
CoordinatorLayout 裡包含
在Gradle 加入
compile "com.android.support:design:27.1.1"
顧名思義,CollapsingToolbarLayout就是可折疊式的ToolbarLayout
屬性 app:layout_scrollFlags
快速返回模式,只要一往下滑,CollapsingToolbarLayout就會顯示
往上滑就隱藏,往下滑至最底才會出現
Scrollview 向上滑動時,CollapsingToolbarLayout 會隱藏到 minHeight 的高度,向下滑一點就會出現
CollapsingToolbarLayout 只會有完全隱藏或完全顯示,不會有出現一半的情況
contentScrim
CollapsingToolbarLayout 收縮後的背景顏色。
expandedTitleMarginStart
還沒有收縮時title與左邊間距
expandedTitleMarginEnd
還沒有收縮時title與右邊間距
app:layout_collapseMode (折叠模式)
我們想要完全收縮時仍有ToolBar出現,就需要將
ImageView 設定 app:layout_collapseMode="parallax"
widget.Toolbar 設定 app:layout_collapseMode="pin"
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:title="羅東運動公園"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="24dp"
app:layout_scrollFlags="snap|scroll">
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/scenery"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
layout_behavior
在ScrollView相關加上app:layout_behavior,設定AppBarLayout與ScrollView關聯,表示當Scrollview滑動時影響AppBarLayout。
@string/appbar_scrolling_view_behavior,值為 android.support.design.widget.AppBarLayout$ScrollingViewBehavior
用來通知AppBarLayout發生了滑動事件
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
完整程式:
https://github.com/evanchen76/CoordinatorLayout
給Android 初學者 的快速成長 線上課程
1️⃣ UI 進階實戰 — Material Design Component 讓你簡單做出效果超好的UI
2️⃣ 動畫入門到進階 — 用動畫提升使用者體驗
3️⃣ 架構設計 — MVP、MVVM 讓你程式碼好維護
1️⃣ + 2️⃣ + 3️⃣ 3堂組合包更划算 — Android 架構設計 + 動畫入門到進階 + UI 進階實戰
出版書:
Android TDD 測試驅動開發:從 UnitTest、TDD 到 DevOps 實踐