之前在知乎客户端第一次看到CoordinatorLayout+AppBarLayout的时候就被其特效深深吸引,那时我还没入android这个深坑,如今终于一探其奥秘,想想还有点小激动呢~
AppBarLayout以其强大的灵活性接替了枯燥的ActionBar的职位,使得整个应用的头部变得不再单调。
废话不多说,直接来看效果吧。
一、标题栏固定
AppBarLayout有着良好的滚动基因,配上CollapsingToolbarLayout对子布局滚动效果的协助,可谓如虎添翼。
以CoordinaryLayout为根布局,AppBarLayout为被滚动布局,再加上NestedScrollView或者RecycleView作为主动滚动布局,就能实现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:id="@+id/coordinator_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_main"
android:layout_width="match_parent"
android:layout_height="300dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false"
app:contentScrim="@color/colorPrimary">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bar_bg"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:titleTextColor="#fff"
app:title="Hello World"
app:titleMarginTop="15dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycle_view_main"
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>
CollapsingToolbarLayout的app:layout_scrollFlags属性有5种滚动标识:
·scroll:最基本的标识,只要你想实现AppBarLayout的滚动效果,就必须加上此标识。
·enterAlways:折叠后,一有下拉动作就展开。
·enterAlwaysCollapsed:①定义了minHeight ②定义了enterAlways 之后再加上此标识就能使view达到minHeight是就开始显示。
·exitUntilCollapsed:当定义了minHeight后,达到minHeight就折叠。
·snap:使动画完整化,当view未完全展开到一定程度则自动展开或折叠,优化了体验效果。
子布局的app:layout_collapseMode有3种折叠模式:
·none:默认属性,无折叠行为。
·pin:折叠后,此布局固定在顶部。(单独使用无效!必须和exitUntilCollapsed配合才能有此效果)
·parallax:折叠时,布局有视差折叠效果。设置完后还需设app:layout_collapseParallaxMultiplier
关于图片折叠时的渐隐效果,必须在CollapsingToolbarLayout中设置app:contentScrim属性,否则图片不会有渐隐效果,另外Toolbar会显示在图片上。
二、标题栏随动
代码如下:
<?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:id="@+id/coordinator_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_main"
android:layout_width="match_parent"
android:layout_height="240dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:contentScrim="@color/colorPrimary">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bar_bg"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycle_view_main"
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>
改动的地方:
去掉Toolbar的app:layout_collapseMode="pin"以及title相关的设置,改为在控制层代码中动态添加。动态添加代码时最好使用mCollapsingToolbarLayout的方法添加,测试时使用mToolbar发现可以设置标题文字但是颜色不好设置。
mCollapsingToolbarLayout.setTitle("Hello World"); //标题
mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE); //折叠时标题颜色
mCollapsingToolbarLayout.setExpandedTitleColor(Color.CYAN); //展开时标题颜色