-
CoordinatorLayout 介绍
1.作为顶层布局
2.调度协调子布局
CoordinatorLayout提供了很棒的交互体验，并且也有良好的定制性，可以制作自己想要的交互效果，下面看下一些基本用法。
-
A.很常见的一种效果
2.jpg
1.jpg
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:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="220dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_collapseParallaxMultiplier="0.6"
>
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:fitsSystemWindows="true"
android:src="@drawable/nner"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
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="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<include layout="@layout/content_main"/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@android:drawable/ic_dialog_email"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
其实只是xml文件来实现的，需要注意有以下几点：
a.
ToolBar的标题，使用setTitle()方法设置title。
b.
Content scrim：ToolBar被折叠到顶部固定时候的背景，
可以使用setContentScrim(Drawable)方法或者在属性中
使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
c.
Parallax scrolling children：CollapsingToolbarLayout滑动时,
子视图的视觉差
app:layout_collapseParallaxMultiplier=”0.6”改变。
值de的范围0.0~1.0，值越大视差越大。
d.
CollapseMode ：子视图的折叠模式，在子视图设置，有两种
“pin”：固定模式，在折叠的时候最后固定在顶端；
“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。
我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。
e.
layout_anchor 的属性，连同 layout_anchorGravity 一起，设置悬浮view FloatingActionButton的位置 。
f.
app:layout_scrollFlags="scroll|exitUntilCollapsed"
这个属性是所有不停留在顶端的容器或者view都要设置的，如果不设置则会自向上滑动的时候停留在顶部，
不离开屏幕 scrollFlags 有四个值 常用的是上面两个，其他两个再配合 minHeight属性使用时，有不同的动画效果.
layout_scrollFlags的四个值：
1>scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。
2>enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
3>enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
4>exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。
-
B.顶部悬浮不再使用gone visible 实现，使用CoordinatorLayout来控制
xml文件如下：
<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:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll"
app:contentScrim="#000000"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
>
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:fitsSystemWindows="true"
android:src="@drawable/nner"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:background="#ffffff"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="30dp"
android:text="悬浮view"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="121212"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
这样的效果只需要把想要悬浮在顶部的view
写在appbarlayout 最外层里面，NestedScrollview外面就行了， so easy,
最常用的是和TabLayout搭配使用。
-
C. 自定义Behavior，实现非常棒的动画效果。
aa.jpg
cc.jpg
bb.jpg
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="121212"/>
</android.support.v4.widget.NestedScrollView>
app:layout_behavior="@string/appbar_scrolling_view_behavior">
这个@String其实是一个类，这个类可以自定义去实现，
以下提供一些讲的挺好的文章，想要深入探究的可以看看。
http://www.open-open.com/lib/view/open1453021356261.html
http://www.jianshu.com/p/a506ee4afecb
http://www.jianshu.com/p/488283f74e69
网友评论