2. 程式人生 > >CollapsingToolbarLayout 介紹和簡單使用

CollapsingToolbarLayout 介紹和簡單使用

阿新 • • 發佈：2019-02-06

​ 上次我們介紹了AppBarLayout,這一次我們介紹CollapsingToolbarLayout。

CollapsingToolbarLayout 介紹

​ 顧名思義，這是一個可摺疊的Toolbar；不過它的使用必須在AppBarLayout的基礎之上，它必須作為AppBarLayout的直接子類元素使用；否則起不到應用的效果。

​ 在Android Studio 裡建立module/Activity時，就會提供一個ScrollActivity的模板，這個模板就使用了AppBarLayout 和 CollapsingToolbarLayout 實現了可摺疊的Toolbar。這裡就不在具體介紹如何去建立這個模板了。我們先看一下這個模板實現的大概效果：

ScrollingActivity模板效果

xml的設定如下：

<?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: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="200dp"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout

 
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="標題"
                />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

</android.support.design.widget.CoordinatorLayout>

首先我們看一下AppBarLayout ,它設定了app:layout_scrollFlags=”scroll|exitUntilCollapsed”，關於’exitUntilCollapsed’，會涉及到minHeight；當發生向上滾動事件時，AppLayout向上滾動，直到我們設定的minHeight，然後我們的滑動View才開始滾動。就算我們滑動的view完全上滑完畢，我們的AppBarLayout也會一直保留我們設定的民Height顯示在螢幕的上方。但是我們並沒有去設定minHeight呀？從表面上看確實是這樣的。我們去看一下CollapsingToolbarLayout的原始碼來一探究竟。在onLayout方法裡我們可以看到這麼一段程式碼：

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);

    // ……省略若干程式碼
    // Finally, set our minimum height to enable proper AppBarLayout collapsing
    if (mToolbar != null) {
        if (mCollapsingTitleEnabled && TextUtils.isEmpty(mCollapsingTextHelper.getText())) {
            // If we do not currently have a title, try and grab it from the Toolbar
            mCollapsingTextHelper.setText(mToolbar.getTitle());
        }
        if (mToolbarDirectChild == null || mToolbarDirectChild == this) {
            setMinimumHeight(getHeightWithMargins(mToolbar));
            mToolbarDrawIndex = indexOfChild(mToolbar);
        } else {
            setMinimumHeight(getHeightWithMargins(mToolbarDirectChild));
            mToolbarDrawIndex = indexOfChild(mToolbarDirectChild);
        }
    } else {
        mToolbarDrawIndex = -1;
    }
    updateScrimVisibility();
}

在上面程式碼裡我們可以看到它Toolbar的高度作為minHeight了，當我們上滑時，滑到只剩下Toolbar高度時，CollapsingToolbarLayout 就不會再摺疊了，會一直保持在螢幕的頂端。

app:layout_collapseMode

​ 除此之外，我們還可以發下在Toolbar裡還設定了app:layout_collapseMode="pin"，這裡涉及到了摺疊模式。我們依次瞭解一下.

  1. none：這個是預設屬性，Toolbar會正常顯示，不會有摺疊行為；
  2. pin : Toolbar 摺疊以後會放到螢幕頂端，固定不動；
  3. parallax：意為視差，當我們上滑時會有視差效果，但是我們之前設定在Toolbar上的東西會滑出螢幕。

具體我們示例：

當我們把摺疊模式設定為 pin 時：

<?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: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="200dp"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@mipmap/ic_launcher"
                />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

</android.support.design.widget.CoordinatorLayout>

為了看Toolbar的效果，我在Toolbar上加了一個navigationIcon；效果如下：

這裡ToolBar的標題會有摺疊效果，但是Toolbar會一直在螢幕的頂端不動。

接下來我們看 parallax:

上程式碼：

<?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: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="200dp"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax"
                app:title="標題"
                app:navigationIcon="@mipmap/ic_launcher"
                />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

</android.support.design.widget.CoordinatorLayout>

這裡我們只改了一個app:layout_collapseMode，我們看一下效果：

這裡只有摺疊的效果，但是Toolbar會滑出螢幕。至於還有 none，就不在介紹了，沒有任何效果。

app:contentScrim

​ 不知道有有沒有細心同學看到這個app:contentScrim屬性。這個是用來設定摺疊時Toolbar所在位置的顏色,並且在滑動的時候會有一定的過渡。

剛開始研究的時候，這個屬性老是不起作用，後來發現，當CollapsingToolbarLayout裡只有的一個Toolbar時，會使用Theme指定的值。當我們在CollapsingToolbarLayout裡新增其它的控制元件，並且這個控制元件必須是在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: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="wrap_content"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >
            <ImageView
                android:background="@drawable/header_bar"
                android:layout_width="match_parent"
                android:layout_height="260dp"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="標題"
                app:navigationIcon="@mipmap/ic_launcher"
                />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

</android.support.design.widget.CoordinatorLayout>

在Toolbar上面加了一個ImageView，然後在CollapsingToolbarLayout上設定了app:contentScrim=”?attr/colorAccent”,是一個粉紅色。我們看效果：

這裡寫圖片描述

關於CollapsingToolbarLayout的基本的幾個點就差不多完了，我們需要注意的是：

  1. app:layout_scrollFlags 要放到AppBarLayout的直接子控制元件上
  2. app:contentScrim 要放到CollapsingToolbarLayout上
  3. app:contentScrim 這個屬性，需要我們在CollapsingToolbarLayout裡新增其它的控制元件，並且這個控制元件必須是在Toolbar的上方時，這個屬性才會起作用

相關推薦

CollapsingToolbarLayout 介紹和簡單使用

​ 上次我們介紹了AppBarLayout,這一次我們介紹CollapsingToolbarLayout。 CollapsingToolbarLayout 介紹 ​ 顧名思義，這是一個可摺疊的Toolbar；不過它的使用必須在AppBarLay

Polly的多種彈性策略介紹和簡單使用

故障 廣泛 forever 影響 結合 ssim 封裝 n) csharp 什麽是Polly? Polly是一個.NET彈性和瞬態故障處理庫.允許我們以非常順暢和線程安全的方式來執行諸如行重試，斷路，超時，故障恢復等策略。 Polly項目地址：https://github.

[iOS高階]Xcode中的Target介紹和簡單使用

        本文地址：http://blog.csdn.net/zhaoyabei/article/details/45396913   轉載註明出處

Dubbox介紹和簡單使用

Dubbox介紹和簡單使用 Dubbox定義： 1、dubbox是dubbo的一個版本，它是針對於SOA架構的系統，實現系統表現層和服務層之間的關係調用。 2、dubbox使用rpc協議進行遠端呼叫，直接使用socket通訊，傳輸效率高。 而且它可以計算出系統之間的呼叫關係，可以

servlet 介紹和簡單使用

1，servle介紹： html+css+js Servlet:用來開發動態web的技術 屬於javaee規範 【1】，javaEE Servers建立專案      a，new Dynamic Web Project  &nbs

Mongodb的介紹和簡單使用

Mongodb的介紹和簡單使用 ①Mongodb的介紹 MongoDB (名稱來自「humongous (巨大無比的)」)， 是一個可擴充套件的高效能，開源，模式自由，面向文件的NoSQL，基於 分散式 檔案儲存，由 C++ 語言編寫，設計之初旨在為 WEB 應用提供可擴充套件的高效

【轉】理解JMX之介紹和簡單使用

原文連結：https://blog.csdn.net/lmy86263/article/details/71037316  近期在專案上需要新增一些功能，想把一個開源工程整合進來，雖說是整合，但是覺得跟開發有查不了多少，要讓這個開源工程的編碼風格和設計方式與我們的工程保持一

Flume的介紹和簡單操作

Flume是什麼 Flume是Cloudera提供的一個高可用的，高可靠的，分散式的海量日誌採集、聚合和傳輸的系統，Flume支援在日誌系統中定製各類資料傳送方，用於收集資料；同時，Flume提供對資料進行簡單處理，並寫到各種資料接受方（可定製）的能力。 F

flume的介紹和簡單安裝

nbsp 壓縮 容錯能力 故障轉移 apach 有效 color 相關 .html 一：介紹 （1）日誌采集系統 （2）是一種分布式，可靠且可用的服務，用於有效地收集，聚合和移動大量日誌數據。 （3）具有基於流數據流的簡單靈活的架構。 （4）具有可靠的可靠性機制和許多故障轉

Netty專欄 （一）——— Netty初步介紹和簡單Demo

Netty初步介紹和簡單Demo @author 魯偉林 記錄《Netty 實戰》中各章節學習過程，寫下一些自己的思考和總結，幫助使用Netty框架的開發技術人員們，能夠有所得，避免踩坑。 本部落格目錄結構將嚴格按照書本《Netty 實戰》，省略與Netty無關的內容，可能

JDBCTemplate---方法介紹和簡單示例

當sql等查詢方式不能滿足效能或靈活性的要求，必須使用SQL時，大家有三種選擇： 第一、使用Hibernate 的sql 查詢函式，將查詢結果物件轉為Entity物件。 第二、使用Hibernate Session的getConnection 獲得JDBC

Yii2.0框架的介紹和簡單部署

Yii是什麼？         高效能，基於元件 Yii適合做什麼？         大型應用，門戶，社群，OMS，電子商務等 Yii與其他框架相比         1：和其他PHP框架相比，Yii實現了MVC(Model-View-Controller)設計模式並基於該

PHP魔術函式原理介紹和簡單使用

魔術函式 魔術函式是PHP中內建的語言特性，當程式執行到某種情況時，如果定義了這些魔術函式 (php手冊中稱之為“Overloading”)，則PHP會呼叫他們，同時也會傳入相應的引數，可以認為是PHP執行過程中的鉤子函式。常見的魔術函式有__construct, __de

理解JMX之介紹和簡單使用

近期在專案上需要新增一些功能，想把一個開源工程整合進來，雖說是整合，但是覺得跟開發有查不了多少，要讓這個開源工程的編碼風格和設計方式與我們的工程保持一致，其中涉及到應用程式的監控和管理，不可避免的要使用JMX，之前簡單的瞭解過JMX，但是沒有動力深入去了解其中的

vi/vim 介紹和簡單實用（轉自菜鳥教程）

Linux vi/vim 所有的 Unix Like 系統都會內建 vi 文書編輯器，其他的文書編輯器則不一定會存在。 但是目前我們使用比較多的是 vim 編輯器。 vim 具有程式編輯的能力，可以主動的以字型顏色辨別語法的正確性，方便程式設計。 什麼是 vim

Socket.IO for Unity 簡要介紹和簡單應用

在專案中使用到了Socket.IO for unity這個Asset Store上免費的庫，這裡將簡要的介紹一下它的結構，已經使用中的注意事項。 目錄結構 上面為包的目錄結構，簡單的介紹一下具體的內容： JSONObject - 打包與解析JSO

flex佈局介紹和簡單案例

flex佈局可以幫我們快速佈局一些區塊,實現你想要的效果,不用再去float,position之類的.我們在佈局網頁的時候很多時候都是一些特殊佈局,flex就能幫我快速去佈局,不需要去定位. 任何一個盒子都可以指定為flex佈局,但是要注意，設為 Flex 佈局以後，子元素

leveldb研究系列一 .leveldb的簡單介紹和簡單使用

       前些日子閒來無聊，花了一段時間研究了一下leveldb，在網上下了原始碼結合網上的技術文件和部落格，做了細緻的學習，這幾天打算想整理成系列部落格，以便大家參考和指正，這樣是我本人第一次寫技術部落格，不足之處還望指正。         本系列博文，將對 leve

Zookeeper介紹和簡單3臺配置叢集

一.簡介 在Zookeeper的官網上有這麼一句話：ZooKeeper is acentralized service for maintaining configuration information, naming,providing distributed syn

vue的介紹和簡單使用

屬性 圖層 簡單使用 什麽 div rip 界面 highlight tle Vue是什麽? Vue (讀音 /vju?/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關註視圖層，不