【Android】Material Toolbar

通过 CoordinateLayout + AppBarLayout + CollapsingToolbarLayout 组装成一个符合 Material 动画表现的复合 Toolbar。

结构

<CoordinatorLayout>  // 提供子类相互关联同步运动功能
    <AppBarLayout>      // 组装一个合成的 App bar,并提供基本的同步滚动功能实现
        <CollapsingToolbarLayout> // 提供 Toolbar 专用的 Material 折叠、形变动画
            <Background View />
            <Toolbar 
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />
        </CollapsingToolbarLayout>
        <Other part belong to app bar />  // 同步滚动功能对其他�子View 无效
    </AppBarLayout>
    
    <NestedScrollingChild />     // 提供滚动参考数据
    ...
</CoordinatorLayout>

CoordinatorLayout

提供 View 之间的基础联动交互功能

布局方式与 FrameLayout 相同,可协调(关联)内部任意某些 子View(指定app:layout_behavior属性,aka "ChildView")跟随另一个任意特定 View(aka "DependencyView")的尺寸、位置变化或被移除、手势交互等动作时,做相对变化响应(需要自定义Behavior处理器并设置到上面的属性中)。

关于 anchor

子View 可指定任意另一个 CoordinatorLayout 内的子View作为其锚定(anchor)的对象,用于布置浮动跟随型的View,此时 子View 将跟随其 anchor 指定的 anchoredView 移动。
子View 不能锚定自己本身,也不能锚定其 子View(会形成环形依赖)。

属性

Constructor部分,用于本体

  • statusBarBackground:状态栏背景 Drawable

LayoutParams部分,用于子元素

  • layout_behavior:用于 ChildView 上,指定当前 View 相对于其他 View 的相对动作响应处理器
  • layout_anchor:指定一个锚定对象View
  • layout_anchorGravity:指定锚定跟随位置,默认为目标对象的左上角
  • layout_insetEdge:该子View 从哪个方向插入 CoordinatorLayout 容器
  • layout_dodgeInsetEdges:该子View 回避下一个同方向插入的 View 的移动方向

Behavior

用于指定当前View(Child)相对于其他View(Dependency)作出自定义响应的逻辑脚本监听响应类


AppBarLayout

提供基础关联滚动实现

LinearLayout 子类容器,用于垂直串联组装一个逻辑上的 AppBar(不限定使用 Toolbar),内部指定了默认Behavior实现,可让(第一个)子View(通过app:layout_scrollFlags属性值指定)跟随外部的 ScrollableView(NestedScrollingChild子类)滚动动作而做特定滚动动作。

通常需要在 NestedScrollingChild(或其父容器)上指定app:layout_behavior="@string/appbar_scrolling_view_behavior",使该 View 在 CoordinatorLayout 中正确布局在 AppBarLayout 下方,并随 AppBarLayout 滚动做相对位移。

属性

Constructor部分,用于本体(仅在 CoordinatorLayout 内生效)

  • expanded:初始化时是否以扩展形式展示

LayoutParams部分,仅用于第一个子元素

  • layout_scrollFlags:指定联动滚动的表现方式
    • scroll:作为头部,与目标 View 的 scroll 动作同步滚动,该值作为下面其他属性的前提条件联合使用,如app:layout_scrollFlags="scroll|...
    • enterAlways:scroll 下滑动作发生时,立即触发 AppBar 下滑弹出
    • enterAlwaysCollapsed:与enterAlways配套,AppBar 仅弹出一个最小高度,直至 scroll 下滑至顶端时,再继续下滑弹出完整的 AppBar
    • exitUntilCollapsed:scroll 上滑动作发生时,AppBar 仅上滑收缩至一个最小高度(普通 Toolbar 高度),不完全隐藏
    • snap:AppBar 作为一个整体完整出现或隐藏,并提供弹性动画效果
  • layout_scrollInterpolator:指定动画曲线插值器

CollapsingToolbarLayout

提供 Material 式的关联滚动动画实现(依赖 AppBarLayout)

FrameLayout 子类,用于包裹(层叠) Toolbar 及其 背景View 等部件,(通过指定各种app:属性值)提供符合 Material Design 规范的 Toolbar 及其背景的折叠拉伸、遮罩、视差动画等视觉效果。

需要放置在 AppBarLayout 下作为直接子View使用(可复数并列使用)。

使用方式可参考 玩转AppBarLayout

属性

Constructor部分,用于本体

  • collapsedTitleGravityexpandedTitleGravity:缩放后 Title 的对齐方式
    • center、center_vertical、center_horizontal
    • start、end
    • top、bottom、left、right
    • fill_vertical
  • expandedTitleMarginexpandedTitleMarginStartexpandedTitleMarginEndexpandedTitleMarginTopexpandedTitleMarginBottom:Title 扩展后所需的四边 margin
  • collapsedTitleTextAppearanceexpandedTitleTextAppearance:缩放后 Title 的 style 形式(颜色和大小)
  • contentScrim:内容遮罩,Toolbar 折叠完毕后覆盖原背景图的新背景颜色
  • statusBarScrim:状态栏背景遮罩,要求 API 21 并设置 fitsSystemWindows
  • scrimVisibleHeightTrigger:触发遮罩效果的最小可视高度(带单位)
  • scrimAnimationDuration:遮罩动画时长
  • titleEnabled:是否启用动态缩放 Title
  • title:Toolbar 折叠后显示的标题文字,会根据折叠程度缩放大小
  • toolbarId:指定应用动画效果的 Toolbar 组件id,不指定则以第一个搜索到的 Toolbar 为准

另外可通过代码独立指定 Title 的颜色、字体、遮罩图像、遮罩及其动画开闭等效果。

LayoutParams部分,用于直接子元素

  • layout_collapseMode
    Bar发生联动滚动折叠时,子View的动作模式
    • none:不折叠
    • pin:折叠模式下 Toolbar 保留在顶部位置
    • parallax:视差跟随滚动
  • layout_collapseParallaxMultiplier
    视差浮点系数,控制视差滚动的偏移量,负数表示加速滚动,0 表示完全跟随滚动(没有视差效果),1f 表示完全逆向滚动(相对静止状态),>1f 表示逆向加速滚动,默认值为0.5,源码视差偏移算法简约为offset = Math.round(-verticalOffset * parallaxMult),其中verticalOffset表示 scroll 的垂直滚动量

参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容