美文网首页MobDevGroupAndroid杂识Android开发学习
Android 详细分析AppBarLayout的五种Scrol

Android 详细分析AppBarLayout的五种Scrol

作者: 亦枫 | 来源:发表于2016-08-29 21:59 被阅读31198次

    在前面两篇MD系列的文章中,通过两个案例基本上能够掌握了CoordinatorLayout与AppBarLayout的配合使用。本文我们回过头来详细聊聊AppBarLayout的ScrollFlags属性,了解一下不同值之间的区别。至此,Android Material Design系列的学习已进行到第七篇,大家可以点击以下链接查看之前的文章:

    ScrollFlags共有五种常量值供AppBarLayout的Children View使用,在xml布局文件中通过app:layout_scrollFlags设置,对应的值为:scroll,enterAlways,enterAlwaysCollapsed,snap,exitUntilCollapsed;也可以在代码中通过setScrollFlags(int)方法使用,比如:

    Toolbar toolbar = ... // your toolbar within an AppBarLayout
    AppBarLayout.LayoutParams params = 
        (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
    params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
        | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
    

    下面我们通过官网介绍、XML代码和对应的效果图分别分析这五种值的使用(备注:代码中设置也一样,不再赘述):

    scroll


    The view will be scroll in direct relation to scroll events. This flag needs to be set for any of the other flags to take effect. If any sibling views before this one do not have this flag, then this value has no effect.

    Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点:第一点,如果使用了其他值,必定要使用这个值才能起作用;第二点:如果在这个child View前面的任何其他Child View没有设置这个值,那么这个Child View的设置将失去作用。

    示例XML代码:

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
            <android.support.v7.widget.Toolbar
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/tb_toolbar"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_56"
                app:titleTextColor="@color/white"
                app:title="@string/app_name"
                app:theme="@style/OverFlowMenuTheme"
                app:popupTheme="@style/AppTheme"
                android:background="@color/blue"
                app:layout_scrollFlags="scroll|enterAlways"/>
    
        </android.support.design.widget.AppBarLayout>
    

    对应效果图:

    Samples01.gif

    enterAlways


    When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling. This is commonly referred to as the 'quick return' pattern.

    快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比scrollscroll | enterAlways设置,发生向下滚动事件时,前者优先滚动Scrolling View,后者优先滚动Child View,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动。

    示例XML代码:

    ...
    app:layout_scrollFlags="scroll|enterAlways"
    ...
    

    对应效果图:

    Samples02.gif

    enterAlwaysCollapsed


    An additional flag for 'enterAlways' which modifies the returning view to only initially scroll back to it's collapsed height. Once the scrolling view has reached the end of it's scroll range, the remainder of this view will be scrolled into view. The collapsed height is defined by the view's minimum height.

    enterAlways的附加值。这里涉及到Child View的高度和最小高度,向下滚动时,Child View先向下滚动最小高度值,然后Scrolling View开始滚动,到达边界时,Child View再向下滚动,直至显示完全。

    示例XML代码:

    ...
    android:layout_height="@dimen/dp_200"
    android:minHeight="@dimen/dp_56"
    ...
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
    ...
    

    对应效果图:

    Samples03.gif

    exitUntilCollapsed


    When exiting (scrolling off screen) the view will be scrolled until it is 'collapsed'. The collapsed height is defined by the view's minimum height.

    这里也涉及到最小高度。发生向上滚动事件时,Child View向上滚动退出直至最小高度,然后Scrolling View开始滚动。也就是,Child View不会完全退出屏幕。

    示例SML代码:

    ...
    android:layout_height="@dimen/dp_200"
    android:minHeight="@dimen/dp_56"
    ...
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    ...
    

    对应效果图:

    Samples04.gif

    snap


    Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it's closest edge. For example, if the view only has it's bottom 25% displayed, it will be scrolled off screen completely. Conversely, if it's bottom 75% is visible then it will be scrolled fully into view.

    简单理解,就是Child View滚动比例的一个吸附效果。也就是说,Child View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指时,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕,有点类似ViewPager的左右滑动。

    示例XML代码:

    ...
    android:layout_height="@dimen/dp_200"
    ...
    app:layout_scrollFlags="scroll|snap"
    ...
    

    对应效果图:

    Samples05.gif

    示例源码


    我在GitHub上建立了一个Repository,用来存放整个Android Material Design系列控件的学习案例,会伴随着文章逐渐更新完善,欢迎大家补充交流,Star地址:

    https://github.com/Mike-bel/MDStudySamples

    相关文章

      网友评论

      • 5e30a667061c:你的GIf 怎么生成的?指导下
      • 澎湃的犯二激情:“对比scroll和scroll | enterAlways设置,发生向下滚动事件时,前者优先滚动Scrolling View,后者优先滚动Child View,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动。”
        这句话明显错误吧,我看下滑时候,是先滚动Child View,scroll | enterAlways先滚动Scrolling View。Scrolling View不就是ToolBar么?看list itemscroll的顺序就知道滑动顺序是上滑还是下滑
      • 吉凶以情迁:可以做一个ios11的标题缩放效果吗 我现在所有全部要改,我现在是用父布局动态插入这玩意,然后移除 ,但是效果还没达到。
      • Yang_Bob:你好,我设置了app:layout_scrollFlags="scroll|exitUntilCollapsed",手按住一直下拉正常,如果在Child View隐藏阶段手指向下划一下离开屏幕,Child View不会显示,需要手动拉一下才会显示,怎么设置成手指下划离开屏幕后Child View也能自己滑出来
      • AR7_:楼主,您好,有一种情况,就是使用AppBarLayout+TabLayout+ViewPager时ViewPager里面的RecyclerView滑动到一半,AppBarLayout里面的部分也下滑一部分,这时,滑动AppBarLayout部分并没有办法滑动,但是ViewPager里面的RecyclerView却可以上滑时将AppBarLayout上推,下滑时AppBarLayout不动,怎么解决这种情况AppBarLayout可以自己去滑动?
      • a6393228bea9:看第一遍的时候静不下心,觉得看的不懂,静下来心来慢慢看豁然开朗,果然心不静不能成事啊
      • RamboPan:我看第一个示例代码和第二个示例代码,都是scroll | enterAlways 为什么两个效果不一样。。是示例图在代码的上面吗?:joy:
        RamboPan:花了1个小时认真看完,自己也试了一下,感觉印象深刻了。
        第一个实例代码是不是只留一个scroll啊。:grin:
      • 存存妞:讲解的很清楚,感谢
      • swensun:最好的建议是 一定要自己实现一边,试一下就知道了。
      • 433b60343a21:简直不能太帅。
      • 小强闯江湖:没毛病 老铁!!!
      • 周惊蛰:真好
      • 韦驮天:真的非常棒啊
      • 海在路上:谢谢作者。:smile:
      • 后来Memory:本程序媛特此鼓励一下 不错哟
      • 墨墨_2016:大赞一个!
      • aiyoLZH:不错
      • fendo:赞一个?
      • 真的是叫时光啊:还有一个,也想问问您,想最新版的知乎,底部的TAB标签在下滑的时候隐藏,上滑的时候显示也可以用这个做吗?
        哈哈,没必要回复我,罪过罪过,一味地索取都忘了独立思考了 :joy: ,我自己试试
        2531a62bde91:这个用NestedScrollview可以实现拉~
        亦枫:@真的是叫时光啊 没事,交流沟通而已。你说的知乎的效果可以通过自定义Behaver来实现,最近会写到的,欢迎关注微信公众号,第一时间获取。
      • 真的是叫时光啊:您好,问一下,想朋友圈这种下拉放大的视察特效,能用 Material Design系列的控件做出来吗
        亦枫:@真的是叫时光啊 朋友圈这种效果,需要自己实现的,毕竟系统只是给了一个参考,更多的功能效果还是自己摸索的哈,以不变应万变:smile:
      • 捡淑:马克
        fe2a5bcdf6ea:@捡淑 我只想知道你的头像出处
        捡淑:@亦枫 :joy:
        亦枫:@捡淑 吐温:smile:
      • CalvinNing:Perfect!!!
        亦枫:@CalvinNing :smile:Collap…没有这个属性呢
        CalvinNing:@亦枫 看完这篇,我把这个属性用到CollapsingToolbarLayout,然而并不是一回事了,我去看看API,不知大神会不会写一个《CollapsingToolbarLayout的ScrollFlags》?
        亦枫:@CalvinNing TuoTuoDi!

      本文标题:Android 详细分析AppBarLayout的五种Scrol

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