CoordinatorLayout使用(一):簡單理解

CoordinatorLayout與AppBarLayout

  • AppBarLayout嵌套TabLayout

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"

            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/PopupOverlay" />

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

 
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

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

scroll: 所有想滾動出屏幕的view都需要設(shè)置這個(gè)flag, 沒有設(shè)置這個(gè)flag的view將被固定在屏幕頂部。例如,TabLayout 沒有設(shè)置這個(gè)值,將會停留在屏幕頂部。
enterAlways: 設(shè)置這個(gè)flag時(shí),向下的滾動都會導(dǎo)致該view變?yōu)榭梢?,啟用快速“返回模式”?br> enterAlwaysCollapsed: 當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí),你的視圖只能已最小高度進(jìn)入,只有當(dāng)滾動視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度。
exitUntilCollapsed: 滾動退出屏幕,最后折疊在頂端。
為了ToolBar可以滾動,CoordinatorLayout里面,放一個(gè)帶有可滾動的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滾動的View。CoordinatorLayout包含的子視圖中帶有滾動屬性的View需要設(shè)置app:layout_behavior屬性。例如,示例中Viewpager設(shè)置了此屬性。

  • app:layout_behavior="@string/appbar_scrolling_view_behavior"

為了使得Toolbar有滑動效果,必須做到如下三點(diǎn):

  1. CoordinatorLayout作為布局的父布局容器。
  2. 給需要滑動的組件設(shè)置 app:layout_scrollFlags=”scroll|enterAlways” 屬性。
  3. 給滑動的組件設(shè)置app:layout_behavior屬性
  • AppBarLayout嵌套CollapsingToolbarLayout
    布局文件代碼:
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="aohuan.com.recyclerviewdemo.SecondActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        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"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >
            <ImageView
                android:id="@+id/m_iv_backdrop"
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_launcher"
                />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
              app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>

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

    <FrameLayout
        android:id="@+id/fragment_colto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

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

這種效果在詳情頁面用的較多,展示個(gè)性化內(nèi)容,圖像有強(qiáng)烈的吸引力。這個(gè)效果重點(diǎn)使用了CollapsingToolbarLayout 。
CollapsingToolbarLayout可實(shí)現(xiàn)Toolbar的折疊效果。CollapsingToolbarLayout的子視圖類似與LinearLayout垂直方向排放。

CollapsingToolbarLayout 提供以下屬性和方法是用:

  1. Collapsing title:ToolBar的標(biāo)題,當(dāng)CollapsingToolbarLayout全屏沒有折疊時(shí),title顯示的是大字體,在折疊的過程中,title不斷變小到一定大小的效果。你可以調(diào)用setTitle(CharSequence)方法設(shè)置title。
  2. Content scrim:ToolBar被折疊到頂部固定時(shí)候的背景,你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。
  3. Status bar scrim:狀態(tài)欄的背景,調(diào)用方法setStatusBarScrim(Drawable)。還沒研究明白,不過這個(gè)只能在Android5.0以上系統(tǒng)有效果。
  4. Parallax scrolling children:CollapsingToolbarLayout滑動時(shí),子視圖的視覺差,可以通過屬性app:layout_collapseParallaxMultiplier=”0.6”改變。值de的范圍[0.0,1.0],值越大視察越大。
  5. CollapseMode :子視圖的折疊模式,在子視圖設(shè)置,有兩種“pin”:固定模式,在折疊的時(shí)候最后固定在頂端;“parallax”:視差模式,在折疊的時(shí)候會有個(gè)視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來改變。

CoordinatorLayout 還提供了一個(gè) layout_anchor 的屬性,連同 layout_anchorGravity 一起,可以用來放置與其他視圖關(guān)聯(lián)在一起的懸浮視圖(如 FloatingActionButton)。本例中使用FloatingActionButton。

通過下面的參數(shù)設(shè)置了FloatingActionButton的位置,兩個(gè)屬性共同作用使得FAB 浮動按鈕也能折疊消失,展現(xiàn)。

使用CollapsingToolbarLayout實(shí)現(xiàn)折疊效果,需要注意3點(diǎn)

  1. AppBarLayout的高度固定
  2. CollapsingToolbarLayout的子視圖設(shè)置layout_collapseMode屬性
  3. 關(guān)聯(lián)懸浮視圖設(shè)置app:layout_anchor,app:layout_anchorGravity屬性
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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