Android5.0+(CollapsingToolbarLayout)

CollapsingToolbarLayout做用是提供了一個能夠摺疊的Toolbar,它繼承至FrameLayout,給它設置layout_scrollFlags,它能夠控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在響應layout_behavior事件時做出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。
java

使用CollapsingToolbarLayout:android

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#30469b"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg"
                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.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

咱們在CollapsingToolbarLayout中設置了一個ImageView和一個Toolbar。並把這個CollapsingToolbarLayout放到AppBarLayout中做爲一個總體。
app

一、在CollapsingToolbarLayout中:ide

咱們設置了layout_scrollFlags:關於它的值我這裏再說一下:佈局

  • scroll - 想滾動就必須設置這個。字體

  • enterAlways - 實現quick return效果, 當向下移動時,當即顯示View(好比Toolbar)。ui

  • exitUntilCollapsed - 向上滾動時收縮View,但能夠固定Toolbar一直在上面。spa

  • enterAlwaysCollapsed - 當你的View已經設置minHeight屬性又使用此標誌時,你的View只能以最小高度進入,只有當滾動視圖到達頂部時才擴大到完整高度。
    code

其中還設置了一些屬性,簡要說明一下:orm

  • contentScrim - 設置當徹底CollapsingToolbarLayout摺疊(收縮)後的背景顏色。

  • expandedTitleMarginStart - 設置擴張時候(尚未收縮時)title向左填充的距離。

沒擴張時候如圖:


二、在ImageView控件中:

咱們設置了:

  • layout_collapseMode (摺疊模式) - 有兩個值:

    • pin -  設置爲這個模式時,當CollapsingToolbarLayout徹底收縮後,Toolbar還能夠保留在屏幕上。

    • parallax - 設置爲這個模式時,在內容滾動時,CollapsingToolbarLayout中的View(好比ImageView)也能夠同時滾動,實現視差滾動效果,一般和layout_collapseParallaxMultiplier(設置視差因子)搭配使用。

  • layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子,值爲:0~1。 

三、在Toolbar控件中:

咱們設置了layout_collapseMode(摺疊模式):爲pin。


綜上分析:當設置了layout_behavior的控件響應起了CollapsingToolbarLayout中的layout_scrollFlags事件時,ImageView會有視差效果的向上滾動移除屏幕,當開始摺疊時CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變爲咱們設置好的背景色,Toolbar也一直會固定在最頂端。

效果如圖:



【注】:使用CollapsingToolbarLayout時必須把title設置到CollapsingToolbarLayout上,設置到Toolbar上不會顯示。即:

mCollapsingToolbarLayout.setTitle(" ");

該變title的字體顏色:

擴張時候的title顏色:mCollapsingToolbarLayout.setExpandedTitleColor();

收縮後在Toolbar上顯示時的title的顏色:mCollapsingToolbarLayout.setCollapsedTitleTextColor();

這個顏色的過分變化其實CollapsingToolbarLayout已經幫咱們作好,它會自動的過分,好比咱們把收縮後的title顏色設爲綠色,效果如圖:



沒錄好,反正效果出來了。

接下來看看代碼怎麼實現吧:

佈局文件:

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#30469b"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg"
                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.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/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>



代碼文件:

    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        //使用CollapsingToolbarLayout必須把title設置到CollapsingToolbarLayout上,設置到Toolbar上則不會顯示
        CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
        mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");
        //經過CollapsingToolbarLayout修改字體顏色
        mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設置還沒收縮時狀態下字體顏色
        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設置收縮後Toolbar上字體的顏色
相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息