CoordinatorLayout與AppBarLayout
- AppBarLayout嵌套TabLayout
<?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:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
scroll: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag, 沒有設(shè)置這個(gè)flag的view將被固定在屏幕頂部凭语。例如,TabLayout 沒有設(shè)置這個(gè)值拾因,將會(huì)停留在屏幕頂部修档。
enterAlways: 設(shè)置這個(gè)flag時(shí)若专,向下的滾動(dòng)都會(huì)導(dǎo)致該view變?yōu)榭梢姴焙瑔⒂每焖佟胺祷啬J健薄?br>
enterAlwaysCollapsed: 當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí),你的視圖只能已最小高度進(jìn)入角骤,只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度隅忿。
exitUntilCollapsed: 滾動(dòng)退出屏幕,最后折疊在頂端邦尊。
為了ToolBar可以滾動(dòng)背桐,CoordinatorLayout里面,放一個(gè)帶有可滾動(dòng)的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滾動(dòng)的View。CoordinatorLayout包含的子視圖中帶有滾動(dòng)屬性的View需要設(shè)置app:layout_behavior屬性蝉揍。例如链峭,示例中Viewpager設(shè)置了此屬性。
- app:layout_behavior="@string/appbar_scrolling_view_behavior"
為了使得Toolbar有滑動(dòng)效果又沾,必須做到如下三點(diǎn):
- CoordinatorLayout作為布局的父布局容器弊仪。
- 給需要滑動(dòng)的組件設(shè)置 app:layout_scrollFlags=”scroll|enterAlways” 屬性。
- 給滑動(dòng)的組件設(shè)置app:layout_behavior屬性
- 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="aohuan.com.recyclerviewdemo.SecondActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
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="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="@+id/m_iv_backdrop"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/ic_launcher"
/>
<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>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/fragment_colto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
這種效果在詳情頁(yè)面用的較多杖刷,展示個(gè)性化內(nèi)容励饵,圖像有強(qiáng)烈的吸引力。這個(gè)效果重點(diǎn)使用了CollapsingToolbarLayout 滑燃。
CollapsingToolbarLayout可實(shí)現(xiàn)Toolbar的折疊效果役听。CollapsingToolbarLayout的子視圖類似與LinearLayout垂直方向排放。
CollapsingToolbarLayout 提供以下屬性和方法是用:
- Collapsing title:ToolBar的標(biāo)題表窘,當(dāng)CollapsingToolbarLayout全屏沒有折疊時(shí)典予,title顯示的是大字體,在折疊的過(guò)程中乐严,title不斷變小到一定大小的效果瘤袖。你可以調(diào)用setTitle(CharSequence)方法設(shè)置title。
- Content scrim:ToolBar被折疊到頂部固定時(shí)候的背景昂验,你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來(lái)改變背景孽椰。
- Status bar scrim:狀態(tài)欄的背景,調(diào)用方法setStatusBarScrim(Drawable)凛篙。還沒研究明白,不過(guò)這個(gè)只能在Android5.0以上系統(tǒng)有效果栏渺。
- Parallax scrolling children:CollapsingToolbarLayout滑動(dòng)時(shí)呛梆,子視圖的視覺差,可以通過(guò)屬性app:layout_collapseParallaxMultiplier=”0.6”改變磕诊。值de的范圍[0.0,1.0]填物,值越大視察越大纹腌。
- CollapseMode :子視圖的折疊模式,在子視圖設(shè)置滞磺,有兩種“pin”:固定模式升薯,在折疊的時(shí)候最后固定在頂端;“parallax”:視差模式击困,在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果涎劈。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來(lái)改變。
CoordinatorLayout 還提供了一個(gè) layout_anchor 的屬性阅茶,連同 layout_anchorGravity 一起蛛枚,可以用來(lái)放置與其他視圖關(guān)聯(lián)在一起的懸浮視圖(如 FloatingActionButton)。本例中使用FloatingActionButton脸哀。
通過(guò)下面的參數(shù)設(shè)置了FloatingActionButton的位置蹦浦,兩個(gè)屬性共同作用使得FAB 浮動(dòng)按鈕也能折疊消失,展現(xiàn)撞蜂。
使用CollapsingToolbarLayout實(shí)現(xiàn)折疊效果盲镶,需要注意3點(diǎn)
- AppBarLayout的高度固定
- CollapsingToolbarLayout的子視圖設(shè)置layout_collapseMode屬性
- 關(guān)聯(lián)懸浮視圖設(shè)置app:layout_anchor,app:layout_anchorGravity屬性