-
CoordinatorLayout 介绍
1.作为顶层布局
2.调度协调子布局
CoordinatorLayout提供了很棒的交互体验,并且也有良好的定制性,可以制作自己想要的交互效果,下面看下一些基本用法。
-
A.很常见的一种效果
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,实现非常棒的动画效果。
<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
//www.greatytc.com/p/a506ee4afecb
//www.greatytc.com/p/488283f74e69