1. CollapsingToolbarLayout
CollapsingToolbarLayout是5.0版本出現的控件,可以實現Toolbar的摺疊效果。
CollapsingToolbarLayout的屬性
- app:contentScrim,指定佈局內部未展開時的背景顏色
- app:collapsedTitleTextAppearance,指定未展開時的標題文字字體
- app:collapsedTitleTextColor,指定未展開時的標題文字顏色
- app:collapsedTitleGravity,指定未展開時的標題文字對齊方式
- app:expandedTitleTextAppearance,指定展開後的標題文字字體
- app:expandedTitleTextColor,指定展開後的標題文字顏色
- app:expandedTitleGravity,指定展開後的標題文字對齊方式
- app:expandedTitleMargin,指定展開後的標題四周間距
我們設置Toolbar的背景爲紅色,可以看到Toolbar實際是在最上面的,但Toolbar的標題文字被移植到中間位置。
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="240dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/colorAccent"
app:collapsedTitleGravity="left"
app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance"
app:expandedTitleGravity="center"
app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/nav_back"
app:title="標題"
android:background="@color/red"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
效果如下
2. layout_scrollFlags配置
在CollapsingToolbarLayout中配置不同layout_scrollFlags屬性,會產生不同的效果。
(1) 設置爲scroll,CollapsingToolbarLayout隨着手勢一起滑動。
(2) 設置爲enterAlways,下滑時CollapsingToolbarLayout先進入。
(3) 設置爲enterAlwaysCollapsed,下滑時CollapsingToolbarLayout先進入但只顯示Toolbar。
(4) 設置爲exitUntilCollapsed,CollapsingToolbarLayout隨着手勢一起滑動到只顯示Toolbar。
(5) 設置爲snap,CollapsingToolbarLayout會根據手勢自動滑入滑出。
3. 設置圖片背景
在CollapsingToolbarLayout內定義一個圖片,並設置ayout_collapseMode,
- pin,當CollapsingToolbarLayout完全收縮後,View還可以保留在屏幕上
- parallax,當CollapsingToolbarLayout收縮時,View也同時收縮,實現視差滾動效果。通常和layout_collapseParallaxMultiplier(0.0~1.0)搭配使用。
在CollapsingToolbarLayout內,添加ImageView
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="@color/colorAccent"
app:collapsedTitleGravity="left"
app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance"
app:expandedTitleGravity="center"
app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/anim"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.4" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/nav_back"
app:title="標題"/>
</android.support.design.widget.CollapsingToolbarLayout>
效果如下
4. FloatingActionButton
FloatingActionButton可以設置layout_anchor屬性,自動根據CollapsingToolbarLayout的滾動來設置自己的狀態。
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_qq"
app:rippleColor="#ffe5e5e5"
app:backgroundTint="#ffffffff"
app:elevation="6dp"
app:pressedTranslationZ="6dp"
app:fabSize="mini"
app:borderWidth="0dp"
app:layout_anchor="@id/app_bar_layout"
app:layout_anchorGravity="bottom|right"
android:layout_margin="20dp" />
效果如下