5.0新布局CoordinatorLayout的酷炫动画
来源:互联网 发布:crt软件是什么 编辑:程序博客网 时间:2024/06/06 16:38
曾在网上找了一些关于CoordinatorLayout
的教程,大部分文章都是把CoordinatorLayout
、AppbarLayout
、CollapsingToolbarLayout
以及Toolbar
等一起使用来介绍,这让我不知不觉在心中认为把这几个布局要一起使用,而且只是用于那种场景中。其实CoordinatorLayout
的功能并不是局限于与AppBarLayout
一起使用,它的功能强大着呢,本文主要对CoordinatorLayout
的使用进行介绍,后面再写一篇文章将AppBarLayout
和CollapsingToolBarLayout
整合CoordinatorLayout
一起。那么到底CoordinatorLayout有多好用,请往下感受吧~
CoordinatorLayout能做什么
在学习CoordinatorLayout
之前,很有必要了解CoordinatorLayout
能帮我们做什么,从名字上可以看出,就是帮我们协调子View
的。怎么个协调法呢?就是它根据我们的定制,帮助我们协调各个子View
的布局。我们先看一组动画图~
稍微解释一下这个动画,蓝色的矩形是我们一个普通View
,黄色的Hello是一个Button
。我们水平拖动蓝色矩形时,黄色Button
查着与蓝色矩形相反方向移动;竖直移动蓝色矩形时,黄色也跟着竖直。简而言之:它们在竖直方向同步移动,在水平方向相反。
这个效果如果让你不用CoordinatorLayout
去实现,应该没有任何问题,但是代码的耦合度应该非常大,你的代码必须要持有2个View
的引用,然后在onTouchEvent
里面做各种判断。如果我们想要实现的功能是,有更多的View
要根据蓝色的View
的移动相应作出响应,那么那就得在蓝色View
的onTounchEvent
里面针对其他的View处理各种逻辑。这耦合度未免太伤感了~
而CoordinatorLayout
既然号称能帮我们协调子View的布局,我们接下来看看CoordinatorLayout
如何实现~
CoordinatorLayout使用
CoordinatorLayout
的使用核心是Behavior
,Behavior
就是执行你定制的动作。在讲Behavior
之前必须先理解两个概念:Child
和Dependency
,什么意思呢?Child
当然是子View
的意思了,是谁的子View
呢,当然是CoordinatorLayout
的子View
;其实Child
是指要执行动作的CoordinatorLayout
的子View
。而Dependency
是指Child
依赖的View
。比如上面的gif图中,蓝色的View
就是Dependency
,黄色的View
就是Child
,因为黄色的View的动作是依赖于蓝色的View
。简而言之,就是如过Dependency
这个View发生了变化,那么Child
这个View
就要相应发生变化。发生变化是具体发生什么变化呢?这里就要引入Behavior
,Child
发生变化的具体执行的代码都是放在Behavior
这个类里面。
怎么使用Behavior
呢,首先,我们定义一个类,继承CoordinatorLayout.Behavior<T>
,其中,泛型参数T是我们要执行动作的View
类,也就是Child
。然后就是去实现Behavior
的两个方法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
有了上面的概念后,我们看看具体怎么去实现吧~
为了响应跟随手指移动的操作,我们定义一个非常简单的View
,这个View
只响应跟随手指移动,将这个View
作为Dependency
。由于过于简单,这个View
源码不粘贴,我们只需知道这个View
的类名叫:TempView
。
我们看看Behavior的使用:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
OK,现在我们为Button
类指定了Dependency
,并且定义好了跟随Dependency
一直变化的动作(Behavior
),接下来我们就要指定好为哪个具体的Button
实例来绑定这些。方法很简单,直接在布局文件指定就好:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
是不是很简单呢?我们只需关注Behavior
的编写就好了,把Child
和Dependency
之间的关系完全解耦了~
1Toolbar
Toobar主要是用来替换ActionBar的,换句话说,ActionBar能做的,Toolbar都能做。如果你对ActionBar的使用比较熟悉,你会发现Toolbar使用起来非常简单。ok,既然是替换,当然用Toolbar的时候就得先去把ActionBar给隐藏掉啦~
隐藏ActionBar的方法有很多,可以通过代码的方式隐藏,也可以通过配置文件的方式,我们主要是通过配置文件的方式来隐藏。在我们的styles.xml文件中的AppTheme标签中加入如下两行:
<item name="windowActionBar">false</item><item name="windowNoTitle">true</item>
当然了,你也可以新建一个<style>
标签,将上面两行代码加入,并且将这个新建的标签作为<application>
的theme
。还可以选择通过将AppTheme的parent设置为Theme.AppCompat.Light.NoActionBar
的方式。方法很多,可以自己随便选。
接下来就是将Toolbar放入到布局文件(没啥好解释的):
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:background="?attr/colorPrimary" android:layout_height="?android:attr/actionBarSize" />
最后将Toobar作为“ActionBar”来用
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("这里是Title"); toolbar.setSubtitle("这里是子标题"); toolbar.setLogo(R.drawable.icon); setSupportActionBar(toolbar);
可以对Toolbar设置Logo、标题、子标题等等~还有很多其他的设置,自己去慢慢玩,这里不提啦~。当然了,也可以在布局文件中设置这些,在布局文件设置就不写啦,hongyang大神有篇博客写的挺好的《 Android 5.x Theme 与 ToolBar 实战 》可以去参考一下。
看看效果:
如果Toolbar仅仅是用来对以往的ActionBar做一次替换,那也太没创意啦!完全没必要去替换了,因为它们表现出来的都是一样的,而且并没有让我们觉得用起来比ActionBar方便。那为啥要替换呢,总应该有他的理由吧:ActionBar是固定在顶部,并不能移动,我觉得这是最大的不好,而我们的ToolBar可以让我们随便摆放,就就可以带来很多灵活性和效果啦!
正如你所看的这样,Toolbar根本就不够看的,一点都不复杂。接下来我们继续学习在Toolbar上面再套一层父View,让Toolbar更有互动性。
2 AppBarLayout
AppBarLayout继承自LinearLayout,布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念,它可以让你定制当某个可滚动View的滚动手势发生变化时,其内部的子View实现何种动作。
请注意:上面提到的某个可滚动View,可以理解为某个ScrollView。怎么理解上面的话呢?就是说,当某个ScrollView发生滚动时,你可以定制你的“顶部栏”应该执行哪些动作(如跟着一起滚动、保持不动等等)。那某个可移动的View到底是哪个可移动的View呢?这是由你自己指定的!如何指定,我们后面说。
2.1 AppBarLayout子View的动作
内部的子View通过在布局中加app:layout_scrollFlags
设置执行的动作,那么app:layout_scrollFlags
可以设置哪些动作呢?分别如下:
(1)
scroll
:值设为scroll
的View会跟随滚动事件一起发生移动。
什么意思呢?简单的说,就是当指定的ScrollView发生滚动时,该View也跟随一起滚动,就好像这个View也是属于这个ScrollView一样。
一张gif足以说明:
对应的布局文件
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll" /></android.support.design.widget.AppBarLayout>
(2)
enterAlways
:值设为enterAlways
的View,当ScrollView往下滚动时,该View会直接往下滚动。而不用考虑ScrollView是否在滚动。
看个动画片(Y(^o^)Y)(ToolBar高度设为:?android:attr/actionBarSize
,app:layout_scrollFlags="scroll|enterAlways"
):
(3)
exitUntilCollapsed
:值设为exitUntilCollapsed
的View,当这个View要往上逐渐“消逝”时,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应ScrollView的内部滑动事件。
怎么理解呢?简单解释:在ScrollView往上滑动时,首先是View把滑动事件“夺走”,由View去执行滑动,直到滑动最小高度后,把这个滑动事件“还”回去,让ScrollView内部去上滑。看个gif感受一下(图中将高度设的比较大:200dp,并将最小高度设置为?android:attr/actionBarSize
,app:layout_scrollFlags="scroll|exitUntilCollapsed"
):
(4)
enterAlwaysCollapsed
:是enterAlways
的附加选项,一般跟enterAlways
一起使用,它是指,View在往下“出现”的时候,首先是enterAlways
效果,当View的高度达到最小高度时,View就暂时不去往下滚动,直到ScrollView滑动到顶部不再滑动时,View再继续往下滑动,直到滑到View的顶部结束。
来个gif感受一下(图中将高度设的比较大:200dp,并将最小高度设置为?android:attr/actionBarSize
,app:layout_scrollFlags="scroll|enerAlways|enterAlwaysCollapsed"
):
2.2 将AppBarLayout与ScrollView关联起来
前面说了一直反复说“当ScrollView发生滚动时”,那么怎么将AppBarLayout与ScrollView关联起来呢?我们注意到,AppBarLayout与ScrollView之间动作“相互依赖”,这不就是我们上一篇《CoordinateLayout的使用如此简单 》所学的内容吗?把ScrollView和AppBarLayout作为CoordinateLayout的子View,然后编写一个Behavior,在这个Behavior里面判断当前的操作是应该让ScrollView时刻保持在AppBarLayout之下(即只要改变AppBarLayout的位置就可以一起滑动),还是应该让ScrollView内部滚动而不让AppBarLayout位置发生变化等等这些需求,都是可以在Behavior里面处理的。你可以去针对你的ScrollView编写Behavior。然而,我们看到我们的AppBarLayout事先的功能比较复杂,如果我们自己去定义这样的效果,代码非常复杂,还要考虑很多方面,好在Android帮我们写好啦,我们直接用就是了,这个ScrollView就是NestedScrollView,请注意,它并没有继承ScrollView,它继承的是FrameLayout,但是它实现的效果把它可以看成是ScrollView。
把NestedScrollView放入到我们的layout文件里面就可以啦~~~,很方便~
<android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <!--将你的内容放在这里--> </android.support.v4.widget.NestedScrollView>
有没有注意到有个属性:app:layout_behavior="@string/appbar_scrolling_view_behavior"
,它就是指定Behavior的,appbar_scrolling_view_behavior
对应的类的名称是:android.support.design.widget.AppBarLayout$ScrollingViewBehavior
感兴趣的可以去分析源码。
好了,我们现在会用AppBarLayout啦~是不是发现用起来so easy!接下来我们把剩下CollapsingToolbarLayout
的给"消化"掉!
3 CollapsingToolbarLayout
CollapsingToolbarLayout
是用来对Toolbar
进行再次包装的ViewGroup
,主要是用于实现折叠(其实就是看起来像伸缩~)的App Bar效果。它需要放在AppBarLayout
布局里面,并且作为AppBarLayout
的直接子View
。CollapsingToolbarLayout
主要包括几个功能(参照了官方网站上内容,略加自己的理解进行解释):
(1) 折叠Title(Collapsing title):当布局内容全部显示出来时,title是最大的,但是随着View逐步移出屏幕顶部,title变得越来越小。你可以通过调用setTitle函数来设置title。
(2)内容纱布(Content scrim):根据滚动的位置是否到达一个阀值,来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.
(3)状态栏纱布(Status bar scrim):根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”,你可以通过
setStatusBarScrim(Drawable)
来设置纱布图片,但是只能在LOLLIPOP
设备上面有作用。(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。(PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点)。将布局参数
app:layout_collapseMode
设为parallax
(5)将子View位置固定(Pinned position children):子View可以选择是否在全局空间上固定位置,这对于Toolbar来说非常有用,因为当布局在移动时,可以将Toolbar固定位置而不受移动的影响。 将
app:layout_collapseMode
设为pin
。
了解这些概念后,我们来看看布局吧~
<?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.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/main.backdrop" android:layout_width="wrap_content" android:layout_height="300dp" android:scaleType="centerCrop" android:src="@drawable/material_img" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="50dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/my_txt" android:textSize="20sp" /> </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>
上面的都看得懂吧,每个陌生的属性都是讲过的哦,忘记了的话回头看,稍微解释一下,图片被设置为有视差的滑动,Toolbar设置为固定不动,另外,CollapsingToolbarLayout会对title进行放大和缩小,我们看看效果吧~
如果你希望拖动过程中状态栏是透明的,可以在CollapsingToolbarLayout中加 app:statusBarScrim="@android:color/transparent",并且在onCreate中调用getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)将状态栏设置为透明就好啦~
- 5.0新布局CoordinatorLayout的酷炫动画
- CoordinatorLayout使用实现酷炫的顶部栏动画
- CoordinatorLayout布局的简单实用
- CoordinatorLayout布局的使用方式
- CoordinatorLayout布局的使用方式
- CoordinatorLayout父布局的Behavior
- Android新组件CoordinatorLayout协调布局的使用,结合TabLayout,结合DrawerLayout
- Android 5.0新控件 CoordinatorLayout | 协调布局 介绍及使用详情
- CoordinatorLayout +RecyclerView+加载不同布局的item
- FrameLayout布局的增强版—CoordinatorLayout
- Android中CoordinatorLayout(协调布局)的使用
- CoordinatorLayout:CollapsingToolbarLayout折叠效果的布局容器
- CoordinatorLayout +RecyclerView+加载不同布局的item
- 协调布局CoordinatorLayout的一些方法
- CoordinatorLayout 上的一些布局技巧
- CoordinatorLayout 布局系列 Behavior 的自定义
- CoordinatorLayout实现优雅的炫酷效果
- CoordinatorLayout协调布局
- java8新特性
- 用递归得方式求裴波那契数列的第n个数。
- 路由COPY,DELETE,域名解析,域名服务器小结
- 自定义Recycerview支持多种类型,下拉刷新,上拉加载更多的适配器
- 对memcache的数据(key-value)进行遍历
- 5.0新布局CoordinatorLayout的酷炫动画
- iOS开发知识体系
- Mac中MariaDB数据库的安装步骤
- 求字符串的长度(不适用任何库函数)
- apache--BeanUtils工具类底层代码演示
- 日历、时间日期、星期、月份的算法(Calendar类对日期的处理)
- python切片索引循环砍掉最后一个字符
- Leetcode-118. Pascal's Triangle
- WebView详解