天天看點

Android Material Design詳解(一):AppBarLayout

AppBarLayout主要用來包裹Toolbar,實作Material Design特性的 app bar。AppBarLayout帶有陰影,并且可響應滾動控件,做出某種滾動效果。

一、使用條件

①AppBarLayout和滾動控件必須為CoordinatorLayout的直接子View ②滾動控件必須實作NestedScrollingChild接口,如RecyclerView,NestedScrollingView ③為AppBarLayout包裹的View設定ScrollFlags,指定以何種效果響應滾動控件 ④設定滾動控件的Behavior為ScrollingViewBehavior

<?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:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:minHeight="30dp"
            app:title="标題"
            app:titleTextColor="#ffffff"
            app:layout_scrollFlags="scroll"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
           

二、5種ScrollFlag效果的含義

通過在布局檔案中使用app:layout_scrollFlags指定AppBarLayout包裹的内容以何種滾動效果響應滾動控件。ScrollFlags有5種:scroll,enterAlways,enterAlwaysCollapsed,exitUntilCollapsed,snap。 其中,scroll是必須指定的,不然AppBarLayout不會做出任何響應。而且,幾種效果并不是排斥關系,而是疊加關系,可以指定多個,用 | 隔開,就會得到疊加後的效果。

①scroll 基本效果,代表AppbarLayout包裹的内容會随着滾動控件一起滾動,始終位于滾動控件的頂部,就像是滾動控件的頭布局一樣。效果如下:

app:layout_scrollFlags="scroll"
           
Android Material Design詳解(一):AppBarLayout

②enterAlways

當AppBarLayout随滾動控件滾進螢幕時,不會等到滾動控件滾到頂部才進入,而是直接滾動,直至完全滾進螢幕。 效果如下:

app:layout_scrollFlags="scroll|enterAlways"
           
Android Material Design詳解(一):AppBarLayout

③enterAlwaysCollapsed

當AppBarLayout随滾動控件滾進螢幕時,不會等到滾動控件滾到頂部才進入,而是直接滾動,直至滾動到内容的最小高度完全顯示,然後等到滾動控件滾到頂部時,繼續滾動,直至全部滾進螢幕。需和enterAlways一起使用,否則無效。我們通過wrap_content或者?attr/actionBarSize指定Toolbar高度時,其高度就是最小高度的值(56dp),為了看到效果,是以我們顯示把最小高度改為30dp。看一下效果:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
           
Android Material Design詳解(一):AppBarLayout

④exitUntilCollapsed

當AppBarLayout随滾動控件滾出螢幕時,不會一直滾動到完全出了螢幕,而是滾動到隻剩下最小高度的時候。效果如下:

app:layout_scrollFlags="scroll|exitUntilCollapsed"
           
Android Material Design詳解(一):AppBarLayout

⑤snap

如果AppBarLayout随滾動控件可滾進滾出的區域為整個AppBarLayout時,當滾動控件滾動結束,滾出的部分大于未滾出的部分,則自主滾動,直至完全滾出螢幕;反之,自主滾動,直至完全滾進螢幕。可滾進滾出區域為部分區域時(受enterAlwaysCollapsed或exitUntilCollapsed的限制),則會自主滾動到可滾動的終結位置。 效果如下:

app:layout_scrollFlags="scroll|snap"
           
Android Material Design詳解(一):AppBarLayout

5種效果可以适當疊加的,看你的需求。這裡随便舉個例子:

app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
           
Android Material Design詳解(一):AppBarLayout