MaterialDesign之折叠标题栏使用

MaterialDesign系列中最吸引我的便是折叠标题栏的交互了,刚接触时有种碾压iOS的赶脚

实现所需控件

  • CoordinatorLayout
  • AppBarLayout
  • CollapsingToolbarLayout
  • Toolbar
  • NestedScrollView

布局结构

折叠效果的实现需要CoordinatorLayout(协调布局)作为根布局来支持其他子View实现效果,AppBarLayout,NestedScrollView则为同级的View;CollapsingToolbarLayout在设计时就被限定只能作为AppBarLayout的直接子布局来使用, Toolbar则作为CollapsingToolbarLayout的子View存在。只有这样才能实现效果,具体详细可以看后续的解释布局.png

CoordinatorLayout

  1. 作用:作为根布局,协调子View之间交互的容器
  2. 原理:NestedScrolling 机制,简要记录下以后再做补充

AppBarLayout

  1. 作用:支持响应滚动手势的app bar布局;继承自LinearLayout,布局方向为垂直方向,可以定制响应滚动手势时内部子View实现的滚动效果
  2. 属性设定

app:layout_scrollFlags 滚动动作设定

  • scroll
    滚动 ,设定后配合滚动视图进行滚动,向上滚动时优先AppBarLayout子View动作执行,向下滚动时优先滚动视图滚动(如果当前子View之前的子View未设置该属性则当前子View设置失效)
  • enterAlways
    必须配合第一个属性使用,优先AppBarLayout子View动作执行
  • enterAlwaysCollapsed
    必须配合第一个第二个属性一起使用,相较上方的效果,只在下滑时多了一个动作限制,滚动视图下滑时AppBarLayout的子View优先下滑最小高度的距离,之后继续滚动视图的滚动,滚动至边界时继续AppBarLayout的动作,在本次代码中 CollapsingToolbarLayout设置了Toolbar作为子View,同时它的最小高度便设置为Toolbar的高度,滚动的效果便是滚动视图下滑时先滑出折叠的标题栏,滚动至边界时折叠标题栏才开始继续下滑至展开状态
  • exitUntilCollapsed
    必须配合第一个属性使用,使用效果类似与第一种,但同样多了一个最小高度的限制,这个限制决定了最小高度的子View不能被推出屏幕外,在本次代码的效果就是状态栏在滚动至折叠状态时再不会被滑出屏幕
  • snap
    必须配合上方属性使用,使用之后AppBarLayout的动作不会出现中间状态,AppBarLayout在执行动作时失去了手势响应时会自动执行到动作起始或结束状态

CollapsingToolbarLayout

  1. 作用:实现折叠标题栏中的效果
  2. 属性设定

app:layout_collapseMode 折叠模式

  • parallax:视差效果(app:layout_collapseParallaxMultiplier 设置视差值0~1),折叠过程中不是完全同步,更符合视觉效果,类似于遮挡住消失的内容
  • pin:跟随滚动,在折叠时会固定在折叠栏内,不会滑出屏幕
  • none:无特殊效果,跟随滚动
    app:titleEnabled
    设置title是否生效,为false时title的滑动操作会失效(CollapsingToolbarLayout与Toolbar都可以设置提title,当都设置时CollapsingToolbarLayout设置的title会覆盖生效,否则自动获取Toolbar内部设置的title)

NestedScrollView

  1. 作用:滚动手势的来源,需要设置 app:layout_behavior = “@string/appbar_scrolling_view_behavior”
  2. 属性设定

android:nestedScrollingEnabled 设置AppBarLayout是否响应滚动事件

Demo代码

Github_AllAndroid_b_materialdesign