快捷導(dǎo)航

Android 使用CoordinatorLayout實(shí)現(xiàn)滾動(dòng)標(biāo)題欄效果的實(shí)例

更新時(shí)間：2017年03月13日 10:05:09 投稿：jingxian

下面小編就為大家?guī)硪黄狝ndroid 使用CoordinatorLayout實(shí)現(xiàn)滾動(dòng)標(biāo)題欄效果的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在Material Design里，CoordinatorLayout通常用來作為頂層視圖，來協(xié)調(diào)處理各個(gè)子View之間的動(dòng)作，從而實(shí)現(xiàn)各種動(dòng)畫效果，如Snackbar與FloatingActionButton的配合顯示效果，就是以CoordinatorLayout作為根布局來實(shí)現(xiàn)的

CoordinatorLayout提供Behaviors接口，子View通過實(shí)現(xiàn)Behaviors接口來協(xié)調(diào)和其它View之間的顯示效果，可以這么理解：

CoordinatorLayout讓其子View之間互相知道彼此的存在，任意一個(gè)子View的狀態(tài)變化會(huì)通過Behaviors通知其它子View，CoordinatorLayout就像一個(gè)橋梁，連接不同的View，并使用Behavior處理各個(gè)子View之間的通信

效果一：

想實(shí)現(xiàn)這樣的效果挺簡(jiǎn)單的，主要是在xml布局文件中進(jìn)行設(shè)置

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  xmlns:app="http://schemas.android.com/apk/res-auto">

  <!--包裹頭部View實(shí)現(xiàn)滑動(dòng)效果-->
  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat">

    <!--標(biāo)題欄-->
    <android.support.v7.widget.Toolbar
      android:id="@+id/tb_toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:navigationIcon="@android:drawable/ic_dialog_email"
      app:title="Title"
      app:layout_scrollFlags="scroll" />

    <!--Tab導(dǎo)航欄-->
    <android.support.design.widget.TabLayout
      android:id="@+id/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabMode="fixed"
      app:layout_scrollFlags="scroll|enterAlways"/>

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

  <android.support.v4.view.ViewPager
    android:id="@+id/vp_tab_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

首先給被AppBarLayout包裹的View添加app:layout_scrollFlags屬性，并設(shè)置相應(yīng)的值

• scroll：讓該View可以滾動(dòng)出屏幕

• enterAlways：不需要滾動(dòng)到頂部，只要有向上滾動(dòng)的事件就顯示該View

• enterAlwaysCollapsed：定義該View何時(shí)進(jìn)入，如果你定義了一個(gè)最小高度minHeight，同時(shí)enterAlways也定義了，那么該View將會(huì)在到達(dá)這個(gè)最小高度的時(shí)候開始慢慢顯示，直到滾動(dòng)組件滾動(dòng)到頂部時(shí)再完全展開

• exitUntilCollapsed：定義該View何時(shí)退出，如果你定義了一個(gè)最小高度minHeight，那么這個(gè)View將在滾動(dòng)到達(dá)這個(gè)最小高度時(shí)消失

如果不設(shè)置layout_scrollFlags屬性，那么該View就會(huì)固定在屏幕上

enterAlwaysCollapsed和exitUntilCollapsed屬性主要是在搭配CollapsingToolbarLayout時(shí)使用的

注意：布局的時(shí)候，AppBarLayout里面滾動(dòng)的View要放在固定的View上面

然后在CoordinatorLayout布局里放一個(gè)可以滾動(dòng)的View（不支持ListView），這里使用ViewPager里放置一個(gè)RecylerView，為該ViewPager設(shè)置app:layout_behavior屬性，這里可直接使用Android自帶的值

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

設(shè)置該值的作用相當(dāng)于告訴CoordinatorLayout，此View是一個(gè)滾動(dòng)控件，如果該View滾動(dòng)了，那么設(shè)置了layout_scrollFlags屬性的控件就可以響應(yīng)滾動(dòng)事件了

想實(shí)現(xiàn)效果一，總結(jié)

使用CoordinatorLayout作為根布局

使用AppBarLayout包裹頭部View，并給需要滾動(dòng)的View設(shè)置app:layout_scrollFlags屬性

給滑動(dòng)組件設(shè)置app:layout_behavior屬性

效果二：

想實(shí)現(xiàn)這個(gè)效果，需要使用到CollapsingToolbarLayout布局，我們?cè)谛Ч坏幕A(chǔ)上更改布局代碼

<?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="300dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
      android:id="@+id/collapsing_toolbar"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:contentScrim="?attr/colorPrimary"
      app:expandedTitleMarginEnd="88dp"
      app:expandedTitleMarginStart="66dp"
      app:layout_scrollFlags="scroll|exitUntilCollapsed">

      <!--拉開后顯示的背景圖片-->
      <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/bg_image"
        app:layout_collapseMode="pin"/>

      <!--標(biāo)題欄-->
      <android.support.v7.widget.Toolbar
        android:id="@+id/tb_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        app:navigationIcon="@android:drawable/ic_dialog_email"
        app:title="Title"/>

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

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

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

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

一些屬性的作用

• title：設(shè)置Toolbar的標(biāo)題，注意：如果在CollapsingToolbarLayout中指定了title屬性，那么Toolbar中的title屬性將會(huì)變得無效

• expandedTitleMarginStart：設(shè)置下拉伸縮完成后，ToolBar標(biāo)題文字左邊的margin距離

• expandedTitleMarginEnd：設(shè)置下拉伸縮完成后，Toolbar標(biāo)題文字右邊的margin距離

• contentScrim：設(shè)置Toolbar折疊到頂部后的背景

• layout_collapseMode：折疊效果，有兩個(gè)值，pin代表從底部拉出，parallax代表從中間展開

看文字可能不太理解collapseMode的顯示效果，兩個(gè)值的具體顯示效果如下：

pin：