CoordinatorLayout
- 相當(dāng)于一個(gè)加強(qiáng)版的FrameLayout
- 給其子view設(shè)置Behavior挪挤,可以控制子view間的交互(onTouch、onMeasure、onLayout)行為
- Behavior可自定義
AppBarLayout
- 是一個(gè)垂直的線性布局
- 通過設(shè)置layout_scrollFlags 屬性或是 setScrollFlags()控制子View的滾動(dòng)行為
- 必須作為CoordinatorLayout的直接子View才能正常工作
- 需要在CoordinatorLayout 中提供一個(gè)可滾動(dòng)view(NestedScrollView、RecyclerView等)
layout_scrollFlags
- 不設(shè)置 layout_scrollFlags view不滾動(dòng)和滾動(dòng)view沒關(guān)系
-
scroll
和滾動(dòng)view一起滾動(dòng),同上同下
除了scroll,其他取值必須和scroll一起使用用“|”連接 scroll|enterAlways
- 向??滾動(dòng) 先完全顯示AppBarLayout 童本,再滾動(dòng)滾動(dòng)view
-
向??滾動(dòng) 一起滾動(dòng),不管滾動(dòng)view當(dāng)前的位置
-
scroll|enterAlways|enterAlwaysCollapsed
enterAlwaysCollapsed需要和enterAlways一起使用
- 需要設(shè)置minHeight才能正常使用
- 向??滾動(dòng) 先滾動(dòng)到AppBarLayout 的最小高度脸候,然后就滾動(dòng)滾動(dòng)view穷娱,滾動(dòng)view滾動(dòng)到頂后,最后再滾動(dòng)AppBarLayout 到完全顯示
-
向??滾動(dòng) 一起滾動(dòng)
exitUntilCollapsed
- 需要設(shè)置minHeight
- 定義了AppBarLayout消失的規(guī)則
- 向??滾動(dòng) 一起滾動(dòng)到最小高度运沦,然后滾動(dòng)view滾動(dòng)泵额,AppBarLayout 不完全滾出屏幕
-
向??滾動(dòng) 先滾動(dòng)滾動(dòng)view,滾動(dòng)view完全展示再滾動(dòng)AppBarLayout
-
snap
當(dāng)一個(gè)滾動(dòng)事件結(jié)束携添,如果視圖是部分可見的嫁盲,那么它將被滾動(dòng)到收縮或展開。例如烈掠,如果視圖只有底部 25%顯示羞秤,它將折疊缸托。相反,如果它的底部 75%可見瘾蛋,那么它將完全展開俐镐。
源碼
只需要修改相應(yīng)的layout_scrollFlags
即可體驗(yàn)對(duì)應(yīng)效果
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".act.design.CoordAppbarActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<androidx.appcompat.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
app:title="標(biāo)題"
app:titleTextColor="@android:color/white"
android:layout_height="?attr/actionBarSize"
android:minHeight="26dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
CollapsingToolbarLayout
- 可折疊的toolBar
- 設(shè)置
layout_collapseMode
控制折疊模式
CollapsingToolbarLayout的子布局有3種折疊模式
- off:這個(gè)是默認(rèn)屬性,布局將正常顯示哺哼,沒有折疊的行為佩抹。
- pin:CollapsingToolbarLayout折疊后,此布局將固定在頂部取董。
- parallax:CollapsingToolbarLayout折疊時(shí)棍苹,此布局也會(huì)有視差折疊效果。
以下為demo展示
Toolbar設(shè)置為pin
固定在底部
ImageView設(shè)置為parallax
滑動(dòng)折疊時(shí),產(chǎn)生視差效果
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--視差滾動(dòng)imageView-->
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="@drawable/ball"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="標(biāo)題欄" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:id="@+id/tv_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>