天天看点

CoordinatorLayout与CollapsingToolbarLayout实现视差滚动动画和Toolbar滚动

一、CoordinatorLayouy

CoordinatorLayouy是一个能够协调子布局的容器布局。常见的使用方法如下:

1.与AppbarLayout共同包裹Toolbar可以实现滚动隐藏Toolbar和重现Toolbar。

2.CoordinatorLayout+CollapsingToolbarLayout配合ImageView实现视差滚动效果

2.在CoordinatorLayout下使用FloatingActionButton动态协调浮动按钮(随着Snackbar的弹出而上下浮动)

本文将讲解如何实现Toolbar随着滚动实现隐藏和ImageView的视差滚动效果。实现的效果类似于知乎日报

CoordinatorLayout与CollapsingToolbarLayout实现视差滚动动画和Toolbar滚动

开发准备

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,拉到一半都会自动收缩

CoordinatorLayout与CollapsingToolbarLayout实现视差滚动动画和Toolbar滚动

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”

如果不设置这个值,CollapsingToolbarLayout里的View将会遮挡住主布局里的内容切记主布局要设置这个值

继续阅读