一、CoordinatorLayouy
CoordinatorLayouy是一个能够协调子布局的容器布局。常见的使用方法如下:
1.与AppbarLayout共同包裹Toolbar可以实现滚动隐藏Toolbar和重现Toolbar。
2.CoordinatorLayout+CollapsingToolbarLayout配合ImageView实现视差滚动效果
2.在CoordinatorLayout下使用FloatingActionButton动态协调浮动按钮(随着Snackbar的弹出而上下浮动)
本文将讲解如何实现Toolbar随着滚动实现隐藏和ImageView的视差滚动效果。实现的效果类似于知乎日报
CoordinatorLayout与CollapsingToolbarLayout实现视差滚动动画和Toolbar滚动
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiNzgDOygDMyEjMwETM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
开发准备
Gradle引入
compile ‘com.android.support:design:24.0.0’
布局
使用CollapsingToolbarLayout时,必须使用AppbarLayout包裹住CollapsingToolbarLayout和Toolbar;CoordinatorLayout则作为整个布局的容器。
注意:要实现这些通过滚动而产生的效果,主布局中应该放置带有滚动效果的layout组件,在这里我放了RecylerView(ListView好像不行)
<?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:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/italia"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@id/recycle_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
>
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
参数讲解
先看CollapsingToolbarLayout下的
app:contentScrim=”?attr/colorPrimary”
作用是当整个视图收缩时,它Layout下的View的背景色应该变成什么颜色。最后Toolbar也会变成这种背景色。所以在这里直接把视图收缩时的背景色设置成Toolbar的标准色。
app:expandedTitleMarginStart=”48dp”
设置Tittle,当视图还没收缩时,Tittle离左边的距离
app:layout_scrollFlags=”scroll|exitUntilCollapsed”
scrollFlags,通过设置它的值可以实现不同的滚动模式,有四种值
1.scroll ,滚动。所有的Flag都要设置这个值,设置了之后可以向上滚动出屏幕。
2.enterAlways ,设置了这个值的话,该View会在向下滑动的时候立刻显示出来。
3.exitUntilCollapsed ,向上滑动时,所有组件都会滚出屏幕,但Toolbar除外。
4.enterAlwaysCollapsed ,如果你的View设置了最小高度(minHeight),该View只会以这个最小高度滚出屏幕
ImageView下
app:layout_collapseMode=”parallax”.
app:layout_collapseParallaxMultiplier=”0.7”
第一行是设置折叠模式,设置为parallax,Pin是不折叠。为了使Toobar不折叠,在下面的Toolbar里我设置成了pin。
那第二行的layout_collapseParallaxMultiplier=”0.7”又是什么鬼呢,这个是视差滚动因子。视差滚动因子又是什么?假如我ImageView把这个值设置成0.7,那么当这个图片有70%被收缩时,你送开手指不点击屏幕,该图片会自动收缩。同理,设置成0是碰一下就全部自动收缩,设置成1是怎么滑它都不会自动收缩,需要你自己滑上去
这个值的范围是0~1,我们来看看效果
app:layout_collapseParallaxMultiplier设置成0,拉到一半都会自动收缩
app:layout_collapseParallaxMultiplier设置成1,不会自动收缩
CoordinatorLayout与CollapsingToolbarLayout实现视差滚动动画和Toolbar滚动
其他细节设置
在演示图里,Title颜色从未收缩时的蓝色变为了白色,可以通过简单的两行代码实现
mCollapsingToolbar.setExpandedTitleColor(Color.BLUE);
mCollapsingToolbar.setCollapsedTitleTextColor(Color.WHITE);
如果只想实现Toolbar的隐藏和重现的话,只需要把Image去掉,CollapsingToolbarLayout也可以去掉。在Appbarlayout里重新设置一下scrollFlag
注意事项
在主布局中,我在LinearLayout里设置了
app:layout_behavior=”@string/appbar_scrolling_view_behavior”