【Android】Material Toolbar

通過(guò) CoordinateLayout + AppBarLayout + CollapsingToolbarLayout 組裝成一個(gè)符合 Material 動(dòng)畫表現(xiàn)的復(fù)合 Toolbar埋酬。

結(jié)構(gòu)

<CoordinatorLayout>  // 提供子類相互關(guān)聯(lián)同步運(yùn)動(dòng)功能
    <AppBarLayout>      // 組裝一個(gè)合成的 App bar翻屈,并提供基本的同步滾動(dòng)功能實(shí)現(xiàn)
        <CollapsingToolbarLayout> // 提供 Toolbar 專用的 Material 折疊笆呆、形變動(dòng)畫
            <Background View />
            <Toolbar 
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />
        </CollapsingToolbarLayout>
        <Other part belong to app bar />  // 同步滾動(dòng)功能對(duì)其他?子View 無(wú)效
    </AppBarLayout>
    
    <NestedScrollingChild />     // 提供滾動(dòng)參考數(shù)據(jù)
    ...
</CoordinatorLayout>

CoordinatorLayout

提供 View 之間的基礎(chǔ)聯(lián)動(dòng)交互功能

布局方式與 FrameLayout 相同,可協(xié)調(diào)(關(guān)聯(lián))內(nèi)部任意某些 子View(指定app:layout_behavior屬性商架,aka "ChildView")跟隨另一個(gè)任意特定 View(aka "DependencyView")的尺寸欺冀、位置變化或被移除碉碉、手勢(shì)交互等動(dòng)作時(shí),做相對(duì)變化響應(yīng)(需要自定義Behavior處理器并設(shè)置到上面的屬性中)恬试。

關(guān)于 anchor

子View 可指定任意另一個(gè) CoordinatorLayout 內(nèi)的子View作為其錨定(anchor)的對(duì)象,用于布置浮動(dòng)跟隨型的View疯暑,此時(shí) 子View 將跟隨其 anchor 指定的 anchoredView 移動(dòng)训柴。
子View 不能錨定自己本身,也不能錨定其 子View(會(huì)形成環(huán)形依賴)妇拯。

屬性

Constructor部分幻馁,用于本體

  • statusBarBackground:狀態(tài)欄背景 Drawable

LayoutParams部分,用于子元素

  • layout_behavior:用于 ChildView 上越锈,指定當(dāng)前 View 相對(duì)于其他 View 的相對(duì)動(dòng)作響應(yīng)處理器
  • layout_anchor:指定一個(gè)錨定對(duì)象View
  • layout_anchorGravity:指定錨定跟隨位置仗嗦,默認(rèn)為目標(biāo)對(duì)象的左上角
  • layout_insetEdge:該子View 從哪個(gè)方向插入 CoordinatorLayout 容器
  • layout_dodgeInsetEdges:該子View 回避下一個(gè)同方向插入的 View 的移動(dòng)方向

Behavior

用于指定當(dāng)前View(Child)相對(duì)于其他View(Dependency)作出自定義響應(yīng)的邏輯腳本監(jiān)聽響應(yīng)類


AppBarLayout

提供基礎(chǔ)關(guān)聯(lián)滾動(dòng)實(shí)現(xiàn)

LinearLayout 子類容器,用于垂直串聯(lián)組裝一個(gè)邏輯上的 AppBar(不限定使用 Toolbar)甘凭,內(nèi)部指定了默認(rèn)Behavior實(shí)現(xiàn)稀拐,可讓(第一個(gè))子View(通過(guò)app:layout_scrollFlags屬性值指定)跟隨外部的 ScrollableView(NestedScrollingChild子類)滾動(dòng)動(dòng)作而做特定滾動(dòng)動(dòng)作。

通常需要在 NestedScrollingChild(或其父容器)上指定app:layout_behavior="@string/appbar_scrolling_view_behavior"丹弱,使該 View 在 CoordinatorLayout 中正確布局在 AppBarLayout 下方德撬,并隨 AppBarLayout 滾動(dòng)做相對(duì)位移。

屬性

Constructor部分躲胳,用于本體(僅在 CoordinatorLayout 內(nèi)生效)

  • expanded:初始化時(shí)是否以擴(kuò)展形式展示

LayoutParams部分蜓洪,僅用于第一個(gè)子元素

  • layout_scrollFlags:指定聯(lián)動(dòng)滾動(dòng)的表現(xiàn)方式
    • scroll:作為頭部,與目標(biāo) View 的 scroll 動(dòng)作同步滾動(dòng)坯苹,該值作為下面其他屬性的前提條件聯(lián)合使用隆檀,如app:layout_scrollFlags="scroll|...
    • enterAlways:scroll 下滑動(dòng)作發(fā)生時(shí),立即觸發(fā) AppBar 下滑彈出
    • enterAlwaysCollapsed:與enterAlways配套粹湃,AppBar 僅彈出一個(gè)最小高度恐仑,直至 scroll 下滑至頂端時(shí),再繼續(xù)下滑彈出完整的 AppBar
    • exitUntilCollapsed:scroll 上滑動(dòng)作發(fā)生時(shí)为鳄,AppBar 僅上滑收縮至一個(gè)最小高度(普通 Toolbar 高度)裳仆,不完全隱藏
    • snap:AppBar 作為一個(gè)整體完整出現(xiàn)或隱藏,并提供彈性動(dòng)畫效果
  • layout_scrollInterpolator:指定動(dòng)畫曲線插值器

CollapsingToolbarLayout

提供 Material 式的關(guān)聯(lián)滾動(dòng)動(dòng)畫實(shí)現(xiàn)(依賴 AppBarLayout)

FrameLayout 子類济赎,用于包裹(層疊) Toolbar 及其 背景View 等部件鉴逞,(通過(guò)指定各種app:屬性值)提供符合 Material Design 規(guī)范的 Toolbar 及其背景的折疊拉伸、遮罩司训、視差動(dòng)畫等視覺效果。

需要放置在 AppBarLayout 下作為直接子View使用(可復(fù)數(shù)并列使用)液南。

使用方式可參考 玩轉(zhuǎn)AppBarLayout壳猜。

屬性

Constructor部分,用于本體

  • collapsedTitleGravity滑凉、expandedTitleGravity:縮放后 Title 的對(duì)齊方式
    • center统扳、center_vertical喘帚、center_horizontal
    • start、end
    • top咒钟、bottom吹由、left、right
    • fill_vertical
  • expandedTitleMargin朱嘴、expandedTitleMarginStart倾鲫、expandedTitleMarginEndexpandedTitleMarginTop萍嬉、expandedTitleMarginBottom:Title 擴(kuò)展后所需的四邊 margin
  • collapsedTitleTextAppearance乌昔、expandedTitleTextAppearance:縮放后 Title 的 style 形式(顏色和大小)
  • contentScrim:內(nèi)容遮罩壤追,Toolbar 折疊完畢后覆蓋原背景圖的新背景顏色
  • statusBarScrim:狀態(tài)欄背景遮罩磕道,要求 API 21 并設(shè)置 fitsSystemWindows
  • scrimVisibleHeightTrigger:觸發(fā)遮罩效果的最小可視高度(帶單位)
  • scrimAnimationDuration:遮罩動(dòng)畫時(shí)長(zhǎng)
  • titleEnabled:是否啟用動(dòng)態(tài)縮放 Title
  • title:Toolbar 折疊后顯示的標(biāo)題文字,會(huì)根據(jù)折疊程度縮放大小
  • toolbarId:指定應(yīng)用動(dòng)畫效果的 Toolbar 組件id行冰,不指定則以第一個(gè)搜索到的 Toolbar 為準(zhǔn)

另外可通過(guò)代碼獨(dú)立指定 Title 的顏色溺蕉、字體、遮罩圖像悼做、遮罩及其動(dòng)畫開閉等效果焙贷。

LayoutParams部分,用于直接子元素

  • layout_collapseMode
    Bar發(fā)生聯(lián)動(dòng)滾動(dòng)折疊時(shí)贿堰,子View的動(dòng)作模式
    • none:不折疊
    • pin:折疊模式下 Toolbar 保留在頂部位置
    • parallax:視差跟隨滾動(dòng)
  • layout_collapseParallaxMultiplier
    視差浮點(diǎn)系數(shù)辙芍,控制視差滾動(dòng)的偏移量,負(fù)數(shù)表示加速滾動(dòng)羹与,0 表示完全跟隨滾動(dòng)(沒有視差效果)故硅,1f 表示完全逆向滾動(dòng)(相對(duì)靜止?fàn)顟B(tài)),>1f 表示逆向加速滾動(dòng)纵搁,默認(rèn)值為0.5吃衅,源碼視差偏移算法簡(jiǎn)約為offset = Math.round(-verticalOffset * parallaxMult),其中verticalOffset表示 scroll 的垂直滾動(dòng)量

參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末徘层,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子利职,更是在濱河造成了極大的恐慌趣效,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猪贪,死亡現(xiàn)場(chǎng)離奇詭異跷敬,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)热押,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門西傀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)斤寇,“玉大人,你說(shuō)我怎么就攤上這事拥褂∧锼” “怎么了?”我有些...
    開封第一講書人閱讀 163,912評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵饺鹃,是天一觀的道長(zhǎng)莫秆。 經(jīng)常有香客問(wèn)我,道長(zhǎng)尤慰,這世上最難降的妖魔是什么馏锡? 我笑而不...
    開封第一講書人閱讀 58,449評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮伟端,結(jié)果婚禮上杯道,老公的妹妹穿的比我還像新娘。我一直安慰自己责蝠,他們只是感情好党巾,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著霜医,像睡著了一般齿拂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肴敛,一...
    開封第一講書人閱讀 51,370評(píng)論 1 302
  • 那天署海,我揣著相機(jī)與錄音,去河邊找鬼医男。 笑死砸狞,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的镀梭。 我是一名探鬼主播刀森,決...
    沈念sama閱讀 40,193評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼报账!你這毒婦竟也來(lái)了研底?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,074評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤透罢,失蹤者是張志新(化名)和其女友劉穎榜晦,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體琐凭,經(jīng)...
    沈念sama閱讀 45,505評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡芽隆,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了统屈。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片胚吁。...
    茶點(diǎn)故事閱讀 39,841評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖愁憔,靈堂內(nèi)的尸體忽然破棺而出腕扶,到底是詐尸還是另有隱情,我是刑警寧澤吨掌,帶...
    沈念sama閱讀 35,569評(píng)論 5 345
  • 正文 年R本政府宣布半抱,位于F島的核電站,受9級(jí)特大地震影響膜宋,放射性物質(zhì)發(fā)生泄漏窿侈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評(píng)論 3 328
  • 文/蒙蒙 一秋茫、第九天 我趴在偏房一處隱蔽的房頂上張望史简。 院中可真熱鬧,春花似錦肛著、人聲如沸圆兵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)殉农。三九已至,卻和暖如春局荚,著一層夾襖步出監(jiān)牢的瞬間超凳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工耀态, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留轮傍,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,962評(píng)論 2 370
  • 正文 我出身青樓茫陆,卻偏偏與公主長(zhǎng)得像金麸,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子簿盅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評(píng)論 2 354

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