1. 程式人生 > >AppBarLayout、CollapsingToolBarLayout、ToolBar組合實現狂拽屌炸天頭部效果

AppBarLayout、CollapsingToolBarLayout、ToolBar組合實現狂拽屌炸天頭部效果

以前app的頭部非常呆板,MeterialDesign出現之後,頭部欄變的豐富起來,今天介紹幾種常用的酷炫效果,實用為主。

效果一:往上滑動頁面,頭部消失;往下滑動,頭部出現。

這裡寫圖片描述

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.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id
="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?android:actionBarSize" android:background="#53b2d7" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:navigationIcon="@drawable/icon_back_white"
app:title="知乎日報" app:titleTextColor="@color/colorWhite">
</android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:id="@+id/nsv_content" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_image" android:layout_width="match_parent" android:layout_height="250dp" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent"></WebView> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

一臉蒙逼是不是,沒關係,我們來了解一下這幾種MeterialDesign風格的佈局。

Toolbar

不過多解釋,一種類似與actionbar的頭部欄,那為什麼要用它不用actionbar呢?因為這有ToolBar才能配合其他的幾種佈局實現我們想要的效果。

AppBarLayout

AppBarLayout繼承自LinearLayout,佈局方向為垂直方向。所以你可以把它當成垂直佈局的LinearLayout來使用。AppBarLayout是在LinearLayou上加了一些材料設計的概念,它可以讓你定製當某個可滾動View的滾動手勢發生變化時,其內部的子View實現何種動作(這句話很重要,換句話說也就是必須將AppBarLayout作為ToolBar的父容器才能在滾動時支配ToolBar的行為)。

CoordinatorLayout

CoordinatorLayout見名思意,協調者佈局,協調使用新的思路通過協調排程子佈局的形式實現觸控影響佈局的形式產生動畫效果。CoordinatorLayout通過設定子View的 Behaviors來排程子View。換句話說沒有它作為整個xml的父容器的話,那麼材料設計中view與view之間協調的效果也不會出現。

NestedScrollView

這個控制元件其實和普通的ScrollView並沒有多大的區別,這個控制元件其實是MD(Meterial Design)中設計的一個控制元件,目的是跟MD中的其他控制元件相容。應該說在MD中,RecyclerView代替了ListView,而NestedScrollView代替了ScrollView,他們兩個都可以用來跟ToolBar互動,實現上拉下滑中ToolBar的變化。在NestedScrollView的名字中其實就可以看出他的作用了,Nested是巢狀的意思,而ToolBar基本需要巢狀使用

下面介紹實現時必要的屬性:

在可以滾動的View上設定屬性app:layout_behavior=”@string/appbar_scrolling_view_behavior”

該屬性的值實際上是一個完整的class名字,而上面例子中的 @string/appbar_scrolling_view_behavior 是Android Support Library 定義後的值,可以被直接使用,其實就是通知頭部,在這個view滾動時,要做出改變。

在要發生改變的view上新增屬性:app:layout_scrollFlags=”scroll|enterAlways”

設定該屬性,代表在設定了app:layout_behavior=”@string/appbar_scrolling_view_behavior”屬性的view滾動時,自己要做出指定的動作,scrollFlags的型別有:
scroll:這個標誌為檢視滾動出螢幕,不使用這個標誌,他們會保持固定在螢幕的頂部,想滾動就必須用這個。

enterAlways:這個標誌可以確保向下滾動將導致view變得可見。

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

exitUntilCollapsed:向上滾動時收縮View,但可以固定Toolbar一直在上面。

其他屬性

app:contentScrim="#30469b"//設定當完全CollapsingToolbarLayout摺疊(收縮)後的背景顏色。
app:expandedTitleMarginStart="48dp"//設定擴張時候(還沒有收縮時)title向左填充的距離。
app:layout_scrollFlags="scroll|exitUntilCollapsed"//向上滾動時收縮View,但可以固定Toolbar一直在上面。
app:layout_collapseMode="parallax"//設定為這個模式時,在內容滾動時,CollapsingToolbarLayout中的View(比如ImageView)也可以同時滾動,實現視差滾動效果,通常和layout_collapseParallaxMultiplier(設定視差因子)搭配使用。
app:layout_collapseParallaxMultiplier="0.7"//設定視差滾動因子,值為:0~1。
app:layout_collapseMode="pin"//pin設定為這個模式時,當CollapsingToolbarLayout完全收縮後,Toolbar還可以保留在螢幕上。

這樣,效果一就出來了,會了效果一,我們來點拓展的。

效果二(頭部固定,圖片隨著view的滾動而隱藏)

這裡寫圖片描述

這裡面涉及到兩個點,第一ToolBar的固定,第二imageview的摺疊
先看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.support.design.widget.AppBarLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content">

         <android.support.design.widget.CollapsingToolbarLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             app:layout_scrollFlags="scroll|exitUntilCollapsed">

             <ImageView
                 android:id="@+id/iv_image"
                 android:layout_width="match_parent"
                 android:layout_height="250dp"
                 android:scaleType="centerCrop"
                 app:layout_collapseMode="parallax" />

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

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

         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">

             <WebView
                 android:id="@+id/webview"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"></WebView>

         </LinearLayout>
     </android.support.v4.widget.NestedScrollView>

     <android.support.v7.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="?android:actionBarSize"
         android:background="#3b000000"
         app:navigationIcon="@drawable/icon_back_white"
         app:title="知乎日報"
         app:titleTextColor="@color/colorWhite"></android.support.v7.widget.Toolbar>

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

介紹一下CollapsingToolbarLayout:

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

效果4

這裡寫圖片描述

xml:

<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl_collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMarginStart="48dp"
            app:contentScrim="@color/text_content_color"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_image"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                 />

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

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

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

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></WebView>

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

使用CollapsingToolbarLayout時必須把title設定到CollapsingToolbarLayout上,設定到Toolbar上不會顯示。即:
mCollapsingToolbarLayout.setTitle(” “);

app:contentScrim="#30469b"//設定當完全CollapsingToolbarLayout摺疊(收縮)後的背景顏色。

//擴張時候的title顏色:
mCollapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this,R.color.colorWhite));

//收縮後在Toolbar上顯示時的title的顏色:
mCollapsingToolbarLayout.setCollapsedTitleTextColor(ContextCompat.getColor(this,R.color.colorWhite));

這個顏色的過度變化其實CollapsingToolbarLayout已經幫我們做好,它會自動的過度