本文介紹Design Support Library中CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout的使用.
先列出了Design Support Library中的Features, 然后如何set up, 最后附有Demo程序, 介紹CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout的使用.
Design Support Library Features
Design Support Library中有
- FloatingActionButton
- TabLayout
- NavigationView
- SnackBar
- TextInputLayout
- CoordinatorLayout
- AppBarLayout
- CollapsingToolbarLayout
- Bottom Sheets
- PercentRelativeLayout and PercentFrameLayout
- Vector Drawables
Design Support Library Setup
android {
compileSdkVersion 23 // needs to be consistent with major support libs used
}
ext {
supportLibVersion = '23.4.0' // variable that can be referenced to keep support libs consistent
}
dependencies {
compile "com.android.support:appcompat-v7:${supportLibVersion}"
compile "com.android.support:design:${supportLibVersion}"
}
CoordinatorLayout, AppBarLayout使用
CoordinatorLayout
實際上是一個更強大的FrameLayout, 可以通過Behavior 來控制其中各個child view的交互行為. 也可以指定anchor來指定floating view相對于其他某個View的位置. 比如Floating Action Button在顯示Snackbar的時候自動向上移動.
為了使Toolbar響應滾動事件, 我們需要給它外邊包一個AppBarLayout.
它是一個縱向的LinearLayout, 必須要作為CoordinateLayout的直接child使用.
然后, 我們需要定義AppBarLayout和我們scroll的內(nèi)容View的關系.
這里可以是一個RecyclerView, 或者其他支持嵌套scrolling的view, 比如NestedScrollView
(實際上View類就有方法setNestedScrollingEnabled(), 但是還是需要View自己實現(xiàn)nested scrolling的功能, 否則這個開關也沒有效果.)
support library提供了@string/appbar_scrolling_view_behavior, 它映射到AppBarLayout.ScrollingViewBehavior.
它是用來告訴AppBarLayout下面那個scroll view上的scroll事件什么時候發(fā)生.
所以這個屬性必須在觸發(fā)事件的view上指定, 比如:
<android.support.v7.widget.RecyclerView
android:id="@+id/rvToDoList"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
當CoordinatorLayout看到自己的child(比如RecyclerView)聲明了這個屬性, 就會在自己的其他child中尋找相關的view(AppBarLayout).
這樣, 當RecyclerView發(fā)生scroll事件的時候, AppBarLayout和其中的views都會被通知到.
滾動事件怎么通知到AppBarLayout的呢? 還需要一個屬性: app:layout_scrollFlags.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
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"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
app:layout_scrollFlags屬性中:
-
scroll必須有, 這樣scroll的任何效果才能生效. -
enterAlways: 表示只要列表上方內(nèi)容滾動出現(xiàn), View就應該出現(xiàn). 適用的情形: 當把列表滾到底部時, Toolbar被隱藏了, 一旦回滾一點兒, Toolbar就應該立即出現(xiàn). 如果不設置這個flag, 默認的行為是一直要把列表滾到頂部, Toolbar才會出現(xiàn). -
enterAlwaysCollapsed: 正常情況下, 如果只有enterAlways被指定, 在列表向下滾動的過程中Toolbar將會一直展開.
如果同時指定了enterAlwaysCollapsed和minHeight, 那么開始滾動以后, 只滾動到minHeight為止, 直到滾動到達列表頂部的時候, view才會展開到全部高度. -
exitUntilCollapsed: 正常只指定scroll的情況下, scrolling down(即顯示列表底部)將會使得整個Toolbar移動到不見.
如果同時指定了exitUntilCollapsed和minHeight, 那么將會收縮到minHeight為止, Toolbar不會一直滾動和退出屏幕. -
snap: 使用了這個屬性, 等scroll事件結(jié)束的時候, View可見的尺寸小于它的50%, 則它會直接消失, 如果大于50%, 則它會完整地出現(xiàn).
還可以用app:layout_scrollInterpolator屬性指定滾動動畫效果的插值器.
折疊效果
如果想要折疊Toolbar的效果, 可以在Toolbar外面包一層CollapsingToolbarLayout
這個類必須作為AppBarLayout的直接child使用.
<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">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
包了這個類之后, setTitle要調(diào)用這個類的方法:
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Title");
背景圖平行淡出
這個類使得我們可以做更高級的動畫效果, 比如放一個ImageView, 它在折疊的時候淡出.
這時候需要把ImageView的app:layout_collapseMode屬性置為parallax.
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
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"
app:layout_scrollInterpolator="@anim/hero_image_interpolator">
<ImageView
android:id="@+id/logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null"
android:fitsSystemWindows="true"
android:scaleType="fitCenter"
android:src="@drawable/android_logo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1" />
<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>
項目
這里推薦Demo: AndroidDesignWidgetsSample
本文地址: CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout使用
Reference
Handling Scrolls with CoordinatorLayout
Material Design: scrolling techniques
Design Support Library
