美文网首页菜鸟商城学习笔记
17-标题栏滑出屏幕效果实现

17-标题栏滑出屏幕效果实现

作者: 小楠总 | 来源:发表于2016-08-04 18:39 被阅读267次

    一、需求分析

    不知道大家有没有遇到一种情况,由于手机屏幕比较少,一个页面里面有标题栏又有广告条,那么下面的RecycleView就没多少空间了。为了解决这一个问题,我们可以在用户向上滑动RecycleView的时候,把标题栏以及一些广告条等东西向上滑出屏幕。

    实现方式一:

    监听RecycleView的滑动事件,当RecycleView有向上滑动的趋势的时候,根据滑动的像素值给标题栏以及一些广告条设置负值的padding(垂直方向),这样就可以达到我们的目的。同理,当RecycleView有向下滑动的趋势的时候,重新把标题栏以及一些广告条显示回来。

    实现方式二:

    但是这种方式比较麻烦,Google为了解决这个问题,在5.0新特性控件中已经为我们提供了一些布局容器,他们分别是CoordinatorLayout。AppBarLayout。

    二、原理分析

    首先,这两个布局容器都在design包下面,大家引入进来就可以使用了。

    CoordinatorLayout和AppBarLayout必须配合使用。CoordinatorLayout作为布局的根元素,AppBarLayout必须为CoordinatorLayout的第一个直接子元素。

    AppBarLayout里面可以放置一些你想要作为“AppBar”的一且控件,比如你想把标题栏,广告条滑出去的话,就必须把他们放入AppBarLayout里面,并且添加自定义属性:

    app:layout_scrollFlags="scroll|enterAlways"
    

    设置的layout_scrollFlags有如下几种选项:

    scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
    
    enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。
    
    enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
    
    exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
    下滚动有可以出现。
    

    为了使得Toolbar可以滑动,我们必须还得有个条件,就是CoordinatorLayout布局下包裹一个可以滑动的布局,比如 RecyclerView等布局 (经过测试,WebView,ListView,ScrollView不支持)具有滑动效果的组件。并且给这些组件设置如下属性来告诉CoordinatorLayout,该组件是带有滑动行为的组件,然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了。

    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    

    注意的是,如果你的RecycleView外面还包含有其他布局的话,在根节点添加这个属性即可。如果不添加的话,布局会压在AppBarLayout上面。

    如果觉得我的文字对你有所帮助的话,欢迎关注我的公众号:

    公众号:Android开发进阶

    我的群欢迎大家进来探讨各种技术与非技术的话题,有兴趣的朋友们加我私人微信huannan88,我拉你进群交(♂)流(♀)

    相关文章

      网友评论

        本文标题:17-标题栏滑出屏幕效果实现

        本文链接:https://www.haomeiwen.com/subject/lkthsttx.html