在Google I/O 15上沃粗,谷歌發(fā)布了一個新的support library,里面包含了一些遵循Material Design's spec的UI組件喳篇,比如,AppbarLayout,CollapsingToolbarLayout和CoordinatorLayout。這些組件配合起來使用可以產(chǎn)生強大的效果
CoordinatorLayout使用新的思路通過協(xié)調(diào)調(diào)度子布局的形式實現(xiàn)觸摸影響布局的形式產(chǎn)生動畫效果臭挽。CoordinatorLayout通過設(shè)置子View的 Behaviors來調(diào)度子View。
簡單學習使用這些組件咬腕,直接上代碼
CoordinatorLayout + AppBarLayout
<?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:orientation="vertical" 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.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
效果顯示欢峰,視圖滾動時,Toolbar會隱藏涨共,這個效果是Android Support Library里面,新增的CoordinatorLayout, AppBarLayout實現(xiàn)的纽帖。通過AppBarLayout的子視圖的屬性控制。觀察AppBarLayout的子布局举反,Toobar有app:layout_scrollFlags屬性懊直,這就是控制滑動時視圖效果的屬性。app:layout_scrollFlags有5個值:
- scroll: 所有想滾動出屏幕的view都需要設(shè)置這個flag火鼻, 沒有設(shè)置這個flag的view將被固定在屏幕頂部室囊。例如,TabLayout 沒有設(shè)置這個值魁索,將會停留在屏幕頂部融撞。
- enterAlways: 設(shè)置這個flag時,向下的滾動都會導致該view變?yōu)榭梢姶治担瑔⒂每焖佟胺祷啬J健薄?/li>
- enterAlwaysCollapsed: 當你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標志時尝偎,你的視圖只能已最小高度進入,只有當滾動視圖到達頂部時才擴大到完整高度鹏控。
- exitUntilCollapsed: 滾動退出屏幕致扯,最后折疊在頂端趁窃。
- snap: 當滾動結(jié)束時,如果View只有部分可見急前,它將會自動滑動到最近的邊界(完全可見或完全隱藏)
CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout
<?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:orientation="vertical" 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="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@mipmap/header"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
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.CoordinatorLayout>
這種效果在詳情頁面用的較多醒陆,展示個性化內(nèi)容,圖像有強烈的吸引力裆针。這個效果重點使用了CollapsingToolbarLayout 刨摩。 CollapsingToolbarLayout可實現(xiàn)Toolbar的折疊效果。CollapsingToolbarLayout的子視圖類似與LinearLayout垂直方向排放世吨。
CollapsingToolbarLayout 提供以下屬性和方法是用:
- Collapsing title:ToolBar的標題澡刹,當CollapsingToolbarLayout全屏沒有折疊時,title顯示的是大字體耘婚,在折疊的過程中罢浇,title不斷變小到一定大小的效果。你可以調(diào)用setTitle(CharSequence)方法設(shè)置title沐祷。
- Content scrim:ToolBar被折疊到頂部固定時候的背景嚷闭,你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。
- Status bar scrim:狀態(tài)欄的背景赖临,調(diào)用方法setStatusBarScrim(Drawable)胞锰。還沒研究明白,不過這個只能在Android5.0以上系統(tǒng)有效果兢榨。
- Parallax scrolling children:CollapsingToolbarLayout滑動時嗅榕,子視圖的視覺差,可以通過屬性app:layout_collapseParallaxMultiplier=”0.6”改變吵聪。值de的范圍[0.0,1.0]凌那,值越大視察越大。
- CollapseMode :子視圖的折疊模式吟逝,在子視圖設(shè)置帽蝶,有兩種“pin”:固定模式,在折疊的時候最后固定在頂端澎办;“parallax”:視差模式嘲碱,在折疊的時候會有個視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來改變局蚀。
CoordinatorLayout 還提供了一個 layout_anchor 的屬性麦锯,連同 layout_anchorGravity 一起,可以用來放置與其他視圖關(guān)聯(lián)在一起的懸浮視圖(如 FloatingActionButton)琅绅。
使用CollapsingToolbarLayout實現(xiàn)折疊效果扶欣,需要注意3點
- AppBarLayout的高度固定
- CollapsingToolbarLayout的子視圖設(shè)置layout_collapseMode屬性
- 關(guān)聯(lián)懸浮視圖設(shè)置app:layout_anchor,app:layout_anchorGravity屬性