CoordinatorLayout打造酷炫的顶部栏

CoordinatorLayout是在 Google IO/15 大会发布的控件,常常与AppBarLayout和CollapsingToolbarLayout一起使用,用于打造各种炫酷效果的顶部栏。

使用前须知

CoordinatorLayout目前我仅在RecyclerView、NestedScrollView、ViewPager上面成功通过设置behavior来监听滑动事件,ListView和ScrollView都是不行的。什么原因,我们来看下CoordinatorLayout的源码:

图片.png

可以看到CoordinatorLayout继承了NestedScrollingParent接口,那么再看下RecyclerView和NestedScrollView吧:

CoordinatorLayout打造酷炫的顶部栏_第1张图片
图片.png

这样子想必都猜到是什么回事了。
Android 在发布 Lollipop版本之后,Google为Android的滑动机制提供了NestedScrolling机制,为了给用户带来更好的体验。而CoordinatorLayout正是基于NestedScrolling来开发的。
NestedScrolling机制可以简单理解为child将它的一些滑动事件交给了Parent去处理了。ListView和ScrollView无法和CoordinatorLayout配合使用的原因就是因为它们没继承这个NestedScrollingChild接口。那么ViewPager可以配合使用的原因是什么?查看ViewPager的继承关系会发现它没有继承这个Child接口,但是我们去看下onInterceptTouchEvent方法里面,会看到有下面的注释:

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
//省去部分代码
 if (dx != 0 && !isGutterDrag(mLastMotionX, dx)
        && canScroll(this, false, (int) dx, (int) x, (int) y)) {
       // Nested view has scrollable area under this point. Let it be handled there.
       mLastMotionX = x;
       mLastMotionY = y;
       mIsUnableToDrag = true;
       return false;
}
..............

翻译过来大意是这个方向有嵌套的View在滚动,就让它在那里处理吧。换言之,就是ViewPager检测到NestedScrolling相关的事件触发,就不做拦截,让外层的CoordinatorLayout成功监听到ViewPager嵌套的RecyclerViewNestedScrollView的滑动事件。
如果你对NestedScrolling机制很感兴趣,这里推荐下面的文章:
Android NestedScrolling机制完全解析 带你玩转嵌套滑动
Android 嵌套滑动机制(NestedScrolling)
Android NestedScrolling 实战

接下来是本文的重点了。

AppBarLayout

刚才已经提过了,CoordinatorLayout是经常与AppBarLayout配合使用的,所以很有必要搞明白AppBarLayout到底能做哪些事情。
AppBarLayout它继承LinearLayout,布局方向默认为垂直方向,它可以让你定制RecyclerView、NestedScrollView、ViewPager的滚动手势发生变化时,其内部的子View实现某个指定的动作。
目前布局代码如下,这里先用RecyclerView来说明:

 

        

            
        
      
         

这里需要注意的是app:layout_behavior="@string/appbar_scrolling_view_behavior"这个属性,就是这个属性让AppBarLayout与RecyclerView之间动作相互依赖,这也是Google帮我们定义好了一个behavior,我们直接用就是了。
AppBarLayout内部的子View通过在布局中加app:layout_scrollFlags设置执行的动作,那么app:layout_scrollFlags可以设置哪些动作呢?我们一一来看吧,下面的View值的是AppBarLayout里面的子View:

  • 1.scroll: 想要当滑出屏幕的时候View都必须设置这个flag,没有设置这个flag的View将被固定在屏幕顶部,其他的flag属性也无法生效
GIF.gif
  • 2.enterAlways:flag设为scroll|enterAlways的View,当RecyclerView上的手指往上滚动时,该View会直接往上滚动移出屏幕;当RecyclerView上的手指往下滚动时,该View会立刻往下滚动恢复原位
1211.gif
  • 3.exitUntilCollapsed:flag设为scroll|exitUntilCollapsed的View,当这个View要往上逐渐滑出屏幕时,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应RecyclerView的内部滑动事件。请注意,如果没有设置android:minHeight的话,那么这个属性是不会生效的。这里我将toolbar的android:layout_height设为200dp,android:minHeight设为50dp,效果如下:
xxx.gif
  • 4.enterAlwaysCollapsed:这个是enterAlways的附加选项,要跟enterAlways一起使用,同时需要设置android:minHeight属性,否则不起作用的。它是指,当RecyclerView上的手指往下滚动时,View首先是enterAlways效果,当View的高度达到最小高度时,View就暂时不去往下滚动,直到某个可滚动View滑动到顶部并停止滑动时,View再继续往下滑动,直到滑到View的顶部结束。为了更好展示这个效果,我将toolbar的android:layout_height设为200dp,android:minHeight设为50dp,效果如下:
GIF.gif
  • 5.snap:这个和上面的一样,不会单独使用,常与exitUntilCollapsed配合使用。在滚动结束后,如果View只是部分可见,它将滑动到最近的边界。比如,如果View的底部只有25%可见时停止滑动,它将继续滑动直至离开屏幕,而如果底部有75%可见时停止滑动,它将继续滑动到完全显示。
GIF.gif

好了,AppBarLayout相关功能到这里说完了,其实用起来还是蛮简单的。接着,到另一位主角CollapsingToolbarLayout的出场了。

CollapsingToolbarLayout

CollapsingToolbarLayout是用来对Toolbar进行再次包装的FrameLayout,主要是用于实现折叠(个人觉得收缩比较贴实)的AppBar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View。它常用的有以下属性:

  • 1.app:contentScrim:CollapsingToolbarLayout折叠(收缩)完成后的背景颜色
  • 2.app:expandedTitleMarginXXX:设置CollapsingToolbarLayout展开时候title的Margin
  • 3.app:layout_collapseMode:这个是让CollapsingToolbarLayout的子View设置的,共有3个flag可以使用,它们分别为:
    1) parallax:设置为这个flag时为视差模式,也就是子View折叠模式。在RecyclerView等View在滑动时,子View以视差(折叠)的方式来滑动
    2)pin:设置为这个flag时为固定模式,在折叠的时候会固定在顶端
    3)none:设置为这个flag时为没有效果,RecyclerView往上滑动的时候,子View会首先被固定并推出去
  • 4.app:layout_collapseParallaxMultiplier:设置视差滚动因子,值为:0~1,值越小,折叠效果就越明显,需要搭配app:layout_collapseMode的parallax模式使用
    好了,了解上面这些知识后,我们来做一个炫酷的顶部栏吧,这里我使用了Databinding来做了一个全新的布局:



    
        

        

    

    

        

            

                

                
            
        

        
    

我个人是比较喜欢DataBinding的,很多逻辑可以在xml解决,程序猿偷懒的好帮手啊。这里说明一下上面的 app:setCollapsedTitleTextColor 和 app:setExpandedTitleTextColor 这两个属性,其实这里DataBinding查找类里面对应的公共方法,这两个方法前者用于修改标题收缩后的颜色,后者用于修改标题展开后的颜色。
由于在toolbar里面设置的标题,所以CollapsingToolbarLayout会自动获取toolbar的标题来作为自己的标题的。我们来看下效果吧:

voer.gif

总结

这里我只是简单介绍了CoordinatorLayout的一些常见的属性和功能,如果大家希望了解更多的东西,可以去阅读官方的文档:官方文档地址
这里说句题外话,CoordinatorLayout这个控件实现的效果很炫酷,它里面的NestedScrolling机制也让人耳目一新,推荐大家都去仔细了解一下这个NestedScrolling机制,相信能从中受益不少。

你可能感兴趣的:(CoordinatorLayout打造酷炫的顶部栏)