前言#
上一篇文章承諾會(huì)講解折疊伸縮的效果,所以廢話不多說(shuō)
上gif#
一句話#
當(dāng)你初次看見(jiàn)這樣的效果可能會(huì)覺(jué)得實(shí)現(xiàn)起來(lái)比較麻煩严望。而我告訴你,只需要正確的配置XML中的控件即可.
上代碼#
請(qǐng)結(jié)合講解模塊一起閱讀
<?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"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="40dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/image_collapsing"
android:layout_width="match_parent"
android:layout_height="380dp"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:transitionName="@string/transition_fab"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_collapsing"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
講解#
關(guān)鍵控件###
-
CoordinatorLayout
CoordinatorLayout作為整個(gè)布局的父布局容器轮听。
給你的可以滑動(dòng)的控件剥哑,例如RecyclerView設(shè)置如下屬性:
app:layout_behavior=@string/appbar_scrolling_view_behavior
CoordinatorLayout還提供了layout_anchor 和 layout_anchorGravity屬性一起配
合使用掠拳,可以用于設(shè)置FloatingActionButton的位置蚕涤,此處我是放在appBar的右下角筐赔。
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end" -
AppBarLayout
AppBarLayout里面定義的view只要設(shè)置了app:layout_scrollFlags屬性,就可以在RecyclerView滾動(dòng)事件發(fā)生的時(shí)候被觸發(fā)某種行為
例如我給CollapsingToolbarLayout控件設(shè)置了 app:layout_scrollFlags="scroll|exitUntilCollapsed"
此刻如果沒(méi)有這個(gè)屬性揖铜,CollapsingToolbarLayout是不會(huì)折疊的
那么問(wèn)題來(lái)了茴丰,layout_scrollFlags中的屬性值除了可以觸發(fā)折疊的行為,還有其它的屬性值嗎天吓?并且各個(gè)屬性的意義是什么贿肩?來(lái)吧,看下圖
scroll
至少有一個(gè)scroll龄寞,即可滾動(dòng)enterAlways 向下滾動(dòng)即可見(jiàn)汰规。例如下拉時(shí),立即顯示Toolbar exitUntilCollapsed 這個(gè)flag是定義何時(shí)收縮物邑。 當(dāng)你定義了一個(gè)minHeight溜哮,這個(gè)view將在滾動(dòng)到達(dá)這個(gè)最小高度的時(shí)候消失 enterAlwaysCollapsed 這個(gè)flag是定義何時(shí)展開(kāi)。 當(dāng)你定義了一個(gè)最小高度minHeight色解, 同時(shí)enterAlways也定義了茂嗓,那么view將在到達(dá)這個(gè)最小高度的時(shí)候開(kāi)始展示 snap:當(dāng)一個(gè)滾動(dòng)事件結(jié)束,它將根據(jù)顯示百分比的大小自動(dòng)滾動(dòng)到收縮或展開(kāi)冒签。
-
CollapsingToolbarLayout
CollapsingToolbarLayout字面意思就是折疊toolBar在抛。所以不用多說(shuō)你一定可以想到這個(gè)東西就是完成折疊伸縮的玩意兒。
CollapsingToolbarLayout里面定義的view只要設(shè)置了app:layout_collapseMode屬性萧恕,就可以控制子視圖的折疊模式刚梭。那什么是折疊模式?
折疊模式分為兩種:
“pin”: 固定模式票唆。在收縮的時(shí)候最后固定在頂端(例如向上滾動(dòng)的時(shí)候就固定toolBar)
“parallax”:視差模式朴读,在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果。(例如向下滾動(dòng)的時(shí)候就展開(kāi)ImageView)
結(jié)束#
如果你認(rèn)真閱讀過(guò)我的文章走趋,并且認(rèn)真的看過(guò)xml布局
那么細(xì)心的你一定會(huì)發(fā)現(xiàn)在CollapsingToolbarLayout中還有以下屬性衅金。
以這樣的方式講解,主要是希望在你閱讀的時(shí)候結(jié)合上下文去思考簿煌。
contentScrim - 設(shè)置當(dāng)完全折疊(收縮)后的背景顏色氮唯。
expandedTitleMarginEnd - 沒(méi)有擴(kuò)張的時(shí)候標(biāo)題顯示的位置
expandedTitleMarginStart - 擴(kuò)張的時(shí)候標(biāo)題向左填充的距離。
statusBarScrim - 設(shè)置折疊時(shí)狀態(tài)欄的顏色