CoordinatorLayout,AppBarLayout ,CollapsingToolbarLayout的使用及注意事項(xiàng)

需要添加依賴
compile 'com.android.support:design:25.3.1'
首先先來兩張圖

1949836-537ba9a66e5b59a9.png
1949836-1234b39e6e2a0f61.png

正如圖中所示:coordinatorlayout包括兩大部分,一部分是appbarlayout(這一部分還可以包含CollapsingToolbarLayout,CollapsingToolbarLayout用于對(duì)Toolbar進(jìn)行包裝,因此,它是AppBarLayout的直接子View,同時(shí)也是Toolbar的直接父View),另一部分是實(shí)現(xiàn)了nestedscrollingchild接口的滾動(dòng)列表(比如recycleview,nestedscrollview...)

appbarlayout下方的那個(gè)列表(比如recycleview,nestedscrollview...)中必須設(shè)置app:layout_behavior="@string/appbar_scrolling_view_behavior"或者是app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"

需要將AppBarLayout作為CoordinatorLayout的直接子View,同時(shí)它也是一個(gè)LinearLayout,因此它的所有子View都是線性排列的,而它對(duì)子View的滾動(dòng)顯示管理是通過子View的app:layout_scrollFlags屬性,注意,這個(gè)標(biāo)志位是在AppBarLayout的子View中聲明的,而不是AppBarLayout中。

app:layout_scrollFlags的值有下面五種可選:

  • scroll

注意事項(xiàng)

  • 這個(gè)標(biāo)志位是其它四個(gè)標(biāo)志位生效的前提
  • 帶有scroll標(biāo)志位的子View必須放在AppBarLayout中的最前面
  • exitUntilCollapsed
  • enterAlways
  • enterAlwaysCollapsed
  • snap

這五個(gè)標(biāo)志位在子view中的組合及效果有:

  1. app:layout_scrollFlags="scroll"
    效果:

設(shè)置了scroll的子View可以在滾動(dòng)后收起,而沒有設(shè)置的則不可以。
在手指向上移動(dòng)的時(shí)候,優(yōu)先收起AppBarLayout中的可收起View,當(dāng)它處于收起狀態(tài)時(shí),下面的列表內(nèi)容才開始向尾部滾動(dòng)。
在手指往下移動(dòng)的時(shí)候,優(yōu)先讓下面的列表內(nèi)容向頂部滾動(dòng),當(dāng)列表滾動(dòng)到頂端時(shí),AppBarLayout的可收起View才展開。

  1. app:layout_scrollFlags="scroll|exitUntilCollapsed"
    另外設(shè)置一下android:minHeight="50dp"
    效果:

手指向上移動(dòng)的時(shí)候,會(huì)優(yōu)先收起AppBarLayout中的子View,而收起的最小高度為0,如果想收起時(shí)仍然保留部分可見,那么就需要使用exitUntilCollapsed + minHeight屬性,minHeight就決定了收起時(shí)的最小高度是多少

  1. app:layout_scrollFlags="scroll|enterAlways"
    效果:

enterAlways則決定了手指向下移動(dòng)時(shí)的行為。默認(rèn)情況下,在手指向下移動(dòng)時(shí),會(huì)優(yōu)先讓列表滾動(dòng)到頂部,而如果設(shè)置了enterAlways,那么會(huì)優(yōu)先讓AppBarLayout中的子View滾動(dòng)到展開。

  1. app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
    效果:

優(yōu)先滾動(dòng)AppBarLayout中的子View,但是并不是滾動(dòng)到全部展開,而是只滾動(dòng)到minHeight
AppBarLayout中的子View滾動(dòng)到minHeight之后,開始滾動(dòng)列表,直到列表滾動(dòng)到頭部
列表滾動(dòng)到頭部之后,開始滾動(dòng)AppBarLayout中的子View,直到它完全展開

  1. app:layout_scrollFlags="scroll|snap"
    效果:

默認(rèn)情況下,在手指從屏幕上抬起之后,AppBarLayout中子View的狀態(tài)就不會(huì)變化了,而如果我們?cè)O(shè)置了snap標(biāo)志位,那么在手指抬起之后,會(huì)根據(jù)子View當(dāng)前的偏移量,決定是讓它變?yōu)槭掌疬€是展開狀態(tài)

監(jiān)聽AppBarLayout的滾動(dòng)狀態(tài)

AppBarLayout提供了監(jiān)聽滾動(dòng)狀態(tài)的接口,我們可以根據(jù)這個(gè)偏移值來改變界面的狀態(tài):

private void setAppBar() {
        final TextView moveView = (TextView) findViewById(R.id.iv_move_title);
        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.al_title);
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                Log.d("AppBarLayout", "offset=" + verticalOffset);
                int height = moveView.getHeight();
                int minHeight = moveView.getMinHeight();
                float fraction = verticalOffset / (float) (minHeight - height);
                moveView.setAlpha(1 - fraction);
            }

        });
}

AppBarLayout和CollapsingToolbarLayout結(jié)合

直接上代碼

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/colorPrimaryDark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/iv_title"
                android:src="@drawable/ic_bg"
                android:layout_width="match_parent"
                android:scaleType="centerCrop"
                android:layout_height="150dp"
                app:layout_collapseParallaxMultiplier="0.5"
                app:layout_collapseMode="parallax"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:title="@string/app_name"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:title="Collapse"
                app:navigationIcon="@android:drawable/ic_media_play"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

下面,我們就來介紹上面這個(gè)布局中比較重要的標(biāo)志位:

app:contentScrim
設(shè)置收起之后CollapsingToolbarLayout的顏色,正如例子中的那樣,在收起之后,ImageView的背景被我們?cè)O(shè)置的contentScrim所覆蓋。
app:layout_scrollFlags="scroll|exitUntilCollapsed"
scroll標(biāo)志位是必須設(shè)置的,exitUntilCollapsed保證了我們?cè)谑种干弦频臅r(shí)候,CollapsingToolbarLayout最多收起到Toolbar的高度,使得它始終保持可見。
app:layout_collapseMode="parallax"和app:layout_collapseParallaxMultiplier="0.5"
layout_collapseMode有兩種模式,parallax表示視差效果,簡(jiǎn)單地說,就是當(dāng)CollapsingToolbarLayout滑動(dòng)的距離不等于背景滑動(dòng)的距離,從而產(chǎn)生一種視差效果,而視差效果的大小由app:layout_collapseParallaxMultiplier決定。
app:layout_collapseMode="pin"
layout_collapseMode的另一種模式,它使得Toolbar一直固定在頂端。

參考文獻(xiàn)

Material Design 控件知識(shí)梳理(2) - AppBarLayout & CollapsingToolbarLayout
Material Design之 AppbarLayout 開發(fā)實(shí)踐總結(jié)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容