CoordinatorLayout使用(一):簡(jiǎn)單理解

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: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag, 沒有設(shè)置這個(gè)flag的view將被固定在屏幕頂部凭语。例如,TabLayout 沒有設(shè)置這個(gè)值拾因,將會(huì)停留在屏幕頂部修档。
enterAlways: 設(shè)置這個(gè)flag時(shí)若专,向下的滾動(dòng)都會(huì)導(dǎo)致該view變?yōu)榭梢姴焙瑔⒂每焖佟胺祷啬J健薄?br> enterAlwaysCollapsed: 當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí),你的視圖只能已最小高度進(jìn)入角骤,只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度隅忿。
exitUntilCollapsed: 滾動(dòng)退出屏幕,最后折疊在頂端邦尊。
為了ToolBar可以滾動(dòng)背桐,CoordinatorLayout里面,放一個(gè)帶有可滾動(dòng)的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滾動(dòng)的View。CoordinatorLayout包含的子視圖中帶有滾動(dòng)屬性的View需要設(shè)置app:layout_behavior屬性蝉揍。例如链峭,示例中Viewpager設(shè)置了此屬性。

  • app:layout_behavior="@string/appbar_scrolling_view_behavior"

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

  1. CoordinatorLayout作為布局的父布局容器弊仪。
  2. 給需要滑動(dòng)的組件設(shè)置 app:layout_scrollFlags=”scroll|enterAlways” 屬性。
  3. 給滑動(dòng)的組件設(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>

這種效果在詳情頁(yè)面用的較多杖刷,展示個(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顯示的是大字體,在折疊的過(guò)程中乐严,title不斷變小到一定大小的效果瘤袖。你可以調(diào)用setTitle(CharSequence)方法設(shè)置title。
  2. Content scrim:ToolBar被折疊到頂部固定時(shí)候的背景昂验,你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來(lái)改變背景孽椰。
  3. Status bar scrim:狀態(tài)欄的背景,調(diào)用方法setStatusBarScrim(Drawable)凛篙。還沒研究明白,不過(guò)這個(gè)只能在Android5.0以上系統(tǒng)有效果栏渺。
  4. Parallax scrolling children:CollapsingToolbarLayout滑動(dòng)時(shí)呛梆,子視圖的視覺差,可以通過(guò)屬性app:layout_collapseParallaxMultiplier=”0.6”改變磕诊。值de的范圍[0.0,1.0]填物,值越大視察越大纹腌。
  5. CollapseMode :子視圖的折疊模式,在子視圖設(shè)置滞磺,有兩種“pin”:固定模式升薯,在折疊的時(shí)候最后固定在頂端;“parallax”:視差模式击困,在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果涎劈。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來(lái)改變。

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

通過(guò)下面的參數(shù)設(shè)置了FloatingActionButton的位置蹦浦,兩個(gè)屬性共同作用使得FAB 浮動(dòng)按鈕也能折疊消失,展現(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)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蝌诡,一起剝皮案震驚了整個(gè)濱河市溉贿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌送漠,老刑警劉巖顽照,帶你破解...
    沈念sama閱讀 212,332評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異闽寡,居然都是意外死亡代兵,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門爷狈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)植影,“玉大人,你說(shuō)我怎么就攤上這事涎永∷急遥” “怎么了?”我有些...
    開封第一講書人閱讀 157,812評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵羡微,是天一觀的道長(zhǎng)谷饿。 經(jīng)常有香客問我,道長(zhǎng)妈倔,這世上最難降的妖魔是什么博投? 我笑而不...
    開封第一講書人閱讀 56,607評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮盯蝴,結(jié)果婚禮上毅哗,老公的妹妹穿的比我還像新娘听怕。我一直安慰自己,他們只是感情好虑绵,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,728評(píng)論 6 386
  • 文/花漫 我一把揭開白布尿瞭。 她就那樣靜靜地躺著,像睡著了一般翅睛。 火紅的嫁衣襯著肌膚如雪声搁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,919評(píng)論 1 290
  • 那天宏所,我揣著相機(jī)與錄音酥艳,去河邊找鬼。 笑死爬骤,一個(gè)胖子當(dāng)著我的面吹牛充石,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播霞玄,決...
    沈念sama閱讀 39,071評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼骤铃,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了坷剧?” 一聲冷哼從身側(cè)響起惰爬,我...
    開封第一講書人閱讀 37,802評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎惫企,沒想到半個(gè)月后撕瞧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,256評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡狞尔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,576評(píng)論 2 327
  • 正文 我和宋清朗相戀三年丛版,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片偏序。...
    茶點(diǎn)故事閱讀 38,712評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡页畦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出研儒,到底是詐尸還是另有隱情豫缨,我是刑警寧澤,帶...
    沈念sama閱讀 34,389評(píng)論 4 332
  • 正文 年R本政府宣布端朵,位于F島的核電站好芭,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏冲呢。R本人自食惡果不足惜栓撞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,032評(píng)論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瓤湘,春花似錦、人聲如沸恩尾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)翰意。三九已至木人,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間冀偶,已是汗流浹背醒第。 一陣腳步聲響...
    開封第一講書人閱讀 32,026評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留进鸠,地道東北人稠曼。 一個(gè)月前我還...
    沈念sama閱讀 46,473評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像客年,于是被迫代替她去往敵國(guó)和親霞幅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,606評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容