CoordinatorLayout,
AppBarLayout, NestedScrollView,
CollapsingToolbarLayout
使用
CoordinatorLayout(使协调)(一般控制子View用layout_gravity的属性)
的使用核心是Behavior
,Behavior
就是执行你定制的动作。在讲Behavior
之前必须先理解两个概念:Child
和Dependency
,
Child
是CoordinatorLayout
的子View
;其实Child
是指要执行动作的CoordinatorLayout
的子View
。而Dependency
是指Child
依赖的View
就是如过Dependency
这个View发生了变化,那么Child
这个View
就要相应发生变化。发生变化是具体发生什么变化呢?这里就要引入Behavior
,Child
发生变化的具体执行的代码都是放在Behavior
这个类里面。(Behaviorz)
AppBarLayout继承自LinearLayout,布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念,它可以让你定制当某个可滚动View的滚动手势发生变化时,其内部的子View实现何种动作。
ActionBar是固定在顶部,并不能移动,我觉得这是最大的不好,而我们的ToolBar可以让我们随便摆放,就就可以带来很多灵活性和效果啦!
正如你所看的这样,Toolbar根本就不够看的,一点都不复杂。接下来我们继续学习在Toolbar上面再套一层父View,让Toolbar更有互动性。
NestedScrollView相当于scrollView
最少这几个得在一起用
CoordinatorLayout,AppBarLayout, NestedScrollView
demo1:
<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//主要是用来包装toolbar
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
>
< ImageView
android :layout_width= "wrap_content"
android :layout_height= "300dp"
android :scaleType= "centerCrop"
android :src= "@drawable/ab"
app:layout_scrollFlags= "scroll"//相互协同的属性 设置为scroll
android :layout_width= "match_parent"
android :layout_height= "match_parent">
< android.support.design.widget.AppBarLayout//主要是用来包装toolbar
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
>
< ImageView
android :layout_width= "wrap_content"
android :layout_height= "300dp"
android :scaleType= "centerCrop"
android :src= "@drawable/ab"
app:layout_scrollFlags= "scroll"//相互协同的属性 设置为scroll
/>
会把此布局当作nestedScrollView的一部分,随着nestedScrollview的滚动而滚动
< android.support.v7.widget.Toolbar
android :id= "@+id/toolbar"
android :layout_width= "match_parent"
android:layout_height="?android:attr/actionBarSize"//这个可以自己改
app:layout_scrollFlags=
"scroll|enterAlways" />
设置为enterAlways会在nestedScrollView向下滑动的时候抢占向下滑动的触摸事件,
自己向下滑动等到自己全部显示时,再把触摸事件还给nestedScrollView,
它才会向下滑动,而向上滑动不受影响
自己向下滑动等到自己全部显示时,再把触摸事件还给nestedScrollView,
它才会向下滑动,而向上滑动不受影响
</
android.support.design.widget.AppBarLayout>
<
android
.support.v4.widget.NestedScrollView
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
..........................................内容....................
</
android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
app:layout_scrollFlags=
"
exitUntilCollapsed"
:值设为
exitUntilCollapsed
的View,当这个View要往上逐渐“消逝”时,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应ScrollView的内部滑动事件。
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
<
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.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">
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.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">
exitUntilCollapsed
:值设为exitUntilCollapsed
的View,当这个View要往上逐渐“消逝”时,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应ScrollView的内部滑动事件。
<
ImageView
android :id= "@+id/main.backdrop"
android :layout_width= "wrap_content"
android :layout_height= "300dp"
android :scaleType= "centerCrop"
android :src= "@drawable/ab"
app :layout_collapseMode= "parallax" />
android :id= "@+id/main.backdrop"
android :layout_width= "wrap_content"
android :layout_height= "300dp"
android :scaleType= "centerCrop"
android :src= "@drawable/ab"
app :layout_collapseMode= "parallax" />
parallx 其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点
<
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 :id= "@+id/toolbar"
android :layout_width= "match_parent"
android :layout_height= " ?android:attr/actionBarSize "
app :layout_collapseMode= "pin" />
pin:子View可以选择是否在全局空间上固定位置,这对于Toolbar来说非常有用,因为当布局在移动时,可以将Toolbar固定位置而不受移动的影响
</
android.support.design.widget.CollapsingToolbarLayout>
</ android.support.design.widget.AppBarLayout>
< android.support.v4.widget.NestedScrollView//里面只能有一个子child
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
android :paddingTop= "50dp"
app :layout_behavior= "@string/appbar_scrolling_view_behavior">
</ android.support.design.widget.AppBarLayout>
< android.support.v4.widget.NestedScrollView//里面只能有一个子child
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
android :paddingTop= "50dp"
app :layout_behavior= "@string/appbar_scrolling_view_behavior">
</
android.support.v4.widget.NestedScrollView>
</ android.support.design.widget.CoordinatorLayout>
</ android.support.design.widget.CoordinatorLayout>