天天看點

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将會遮擋住主布局裡的内容切記主布局要設定這個值

繼續閱讀