本文主要是介绍coordinatorLayout使用总结篇,看完这篇完全可以开发5.0的高级特效了 +Android 详细分析AppBarLayout的五种ScrollFlags,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
coordinatorLayout使用总结篇,看完这篇完全可以开发5.0的高级特效了
了解相关更多技术,可参考《沉浸式状态栏+ScrollView顶部伸缩+ActionBar渐变》,最近在用coordinatorLayout做一些特效,发现网上有好多人已经走完了坑,借此我们来总结一把。
一言不合就上个图,还是动态的
主要是找了半天,好多人说的都不够详细,而且有好多注意事项没有说明,所以走了好多弯路,这个地方就是解决那些关键疑问的,这些疑问清楚了才能真正掌握它的用法
代码示例(activity的xml代码,只需要xml配置就可实现上面这么炫酷的效果了,是不是超赞呢,后面有分析哦):
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="200dp"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.design.widget.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="170dp"app:contentScrim="@color/colorAccent"app:expandedTitleMarginBottom="100dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"app:title="我是collapsebar的标题"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="第一个固定(pin)"android:textSize="40sp"app:layout_collapseMode="pin" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:text="不设置,跟随滑动"android:textSize="40sp" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:text="视察效果(parallax)"android:textSize="40sp"app:layout_collapseMode="parallax" /><android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="30dp"android:layout_gravity="top"android:background="#600f"app:layout_collapseMode="pin"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="我是toolbar" /></android.support.v7.widget.Toolbar></android.support.design.widget.CollapsingToolbarLayout><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="appbar之内,collap之外"android:textColor="#0f0" /></android.support.design.widget.AppBarLayout><android.support.v4.widget.NestedScrollViewandroid:id="@+id/n_scroll_view"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="哈"android:textColor="#0f0"android:textSize="200sp" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="哈"android:textColor="#0f0"android:textSize="200sp" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="哈"android:textColor="#0f0"android:textSize="200sp" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="哈"android:textColor="#0f0"android:textSize="200sp" /></LinearLayout></android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>
代码分析:
使用注意事项:
1. CoordinatorLayout继承自viewgroup,但是使用类似于framLayout,有层次结构,后面的布局会覆盖在前面的布局之上,但跟behavior属性也有很大关系,的app:layout_behavior属性,只有CoordinatorLayout的直接子布局才能响应,所以不要做徒劳无功的事
2. CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout结合起来才能产生这么神奇的效果,不要想当然的光拿着CoordinatorLayout就要玩出来(刚接触的时候我也有这种想法),累死你
3. AppBarLayout:继承自lineLayout,使用时其他属性随lineLayou,已经响应了CoordinatorLayout的layout_behavior属性,所以他能搞出那么多特效来
4. AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags
- 1.scroll|exitUntilCollapsed如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局
- 2.scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩
- 3.scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来
- 4.如果不设置改属性,则改布局不能滑动
5. CollapsingToolbarLayout,字面意思是折叠的toolbar,它确实是起到折叠作用的,可以把自己的自布局折叠 继承自framLayout,所以它的直接子类可以设置layout_gravity来控制显示的位置,它的直接子布局可以使用的属性:app:layout_collapseMode(折叠模式):可取的值如下:
- 1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开
- 2.parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果)
- 3.不设置:跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离
6. toobar最好是放在CollapsingToolbarLayout,也不是没有其他用法,但是在这套系统中一般只能放在CollapsingToolbarLayout里面,才能达到好的效果,这里toolbar同时设置layout_gravity和app:layout_collapseMode时有一些比较复杂的情况.不一一作介绍,因为一般我们只会把toolbar放在最上面(不用设置layout_gravity属性,默认的),并且设置app:layout_collapseMode为pin,让他固定在最顶端,有兴趣的自己试试其他情况,
7. 告你一个惊天大幂幂:只要CollapsingToolbarLayout里面包含有toolbar那么CollapsingToolbarLayout的折叠后高度就是toolbar的高度,相当于CollapsingToolbarLayout设置了minHeight属性
8. 再告诉你一个惊天大咪咪:CollapsingToolbarLayout折叠到最顶端时,它就是老大,会处于最上层,包括toolbar在内,所有的布局都会被他盖住,显示不出来.
9. CollapsingToolbarLayout 自己的属性 说明,不是直接子布局可用的,是自己可以用的属性 contentScrim折叠后的颜色也是展开时的渐变颜色,效果超赞. title标题,如果设置在折叠时会动画的显示到折叠后的部分上面,拉开时会展开,很好玩的 expandedTitleMargin当title文字展开时文字的margin,当然还有marginTop等属性,脑补吧 app:collapsedTitleTextAppearance=”@style/Text”折叠时title的样式里面可以定义字体大小颜色等 app:collapsedTitleTextAppearance=”@style/Text1”折叠时title的样式里面可以定义字体大小颜色等 当然还有一些,自己试试吧,现在的这些已经完全够用了**
10. 还有最后一个问题:怎么实现固定表头,这个也简单,写一个布局放在CollapsingToolbarLayout之后,AppBarLayout之内即可,xml文件中自己找找看吧.你要是问如果放在CollapsingToolbarLayout之前,AppBarLayout之内会怎么样?这样折叠布局就不起作用了.不会折叠了.
总结
CoordinatorLayout是一个“加强版”的 FrameLayout,我们只需要知道他两个作用
- (1) 用作应用的顶层布局管理器
- (2) 通过为子View指定 behavior 实现自定义的交互行为。 在我们做 Material Design 风格的app时通常都使用 CoordinatorLayout 作为布局的根节点,以便实现特定的UI交互行为。
我们可以用它来做各种常用的特效,如: Toolbar + TabLayout 实现 TabLayout 置顶效果 浸入式 + CollapsingToolbarLayout Fragment + 不同风格布局
更多可以参考: https://www.jianshu.com/p/e9df8c501f92
希望大家少走弯路吧.其实写帖子挺好的,因为你写的时候也是为自己总结,以后自己用的时候方便找,如果不写可能下次用的时候需要重新学一遍了,所以不管帖子有没有人看,自己一定要多写,跟写笔记还不一样,因为帖子你是让别人看的,你会尽量写的好一点,以后自己也会省事,写笔记是给自己看的,不怕丢人.
沉浸式状态栏+ScrollView顶部伸缩+ActionBar渐变
我的Android重构之旅:框架篇
面试必备之UI刷新大解密
Android 详细分析AppBarLayout的五种ScrollFlags
在前面两篇MD系列的文章中,通过两个案例基本上能够掌握了CoordinatorLayout与AppBarLayout的配合使用。本文我们回过头来详细聊聊AppBarLayout的ScrollFlags属性,了解一下不同值之间的区别。至此,Android Material Design系列的学习已进行到第七篇,大家可以点击以下链接查看之前的文章:
- Android TabLayout 分分钟打造一个滑动标签页
- Android 一文告诉你到底是用Dialog,Snackbar,还是Toast
- Android FloatingActionButton 重要的操作不要太多,一个就好
- Android 初识AppBarLayout 和 CoordinatorLayout
- Android CoordinatorLayout实战案例学习《一》
- Android CoordinatorLayout 实战案例学习《二》
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.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.v7.widget.Toolbarxmlns: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之间的滚动优先级问题。对比scroll
和scroll | 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
这篇关于coordinatorLayout使用总结篇,看完这篇完全可以开发5.0的高级特效了 +Android 详细分析AppBarLayout的五种ScrollFlags的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!