CoordinatorLayout可以帮我们协调子View的,当一个子View做出变化时,与之对应子View也会有相应的变化,而要实习这种效果的和新就是Behavior,Behavior就是执行你定制的动作。在讲Behavior之前必须先理解两个概念:Child和Dependency,什么意思呢?Child当然是子View的意思了,是谁的子View呢,当然是CoordinatorLayout的子View;其实Child是指要执行动作的CoordinatorLayout的子View。而Dependency是指Child依赖的View。
使用步骤
1.自定义Behavior
怎么使用Behavior呢,首先,我们定义一个类,继承CoordinatorLayout.Behavior<T>,其中,泛型参数T是我们要执行动作的View类,也就是Child
/**
* 用来决定需要监听哪些控件或者容器的状态(1.知道监听谁;2.什么状态改变)
* CoordinatorLayout parent ,父容器
* View child, 子控件---需要监听dependency这个view的视图们---观察者
View dependency,你要监听的那个View
*/
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, T child, View dependency) {
boolean rs;
//根据逻辑判断rs的取值
//返回false表示child不依赖dependency,ture表示依赖
return rs;
}
/**
* 当dependency发生改变时(位置、宽高等),执行这个函数
* 返回true表示child的位置或者是宽高要发生改变,否则就返回false
*/
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, T child, View dependency) {
//child要执行的具体动作
return true;
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
T child, View directTargetChild, View target,
int nestedScrollAxes) {
// 当观察的View(RecyclerView)发生滑动的开始的时候回调的
//nestedScrollAxes:滑动关联轴, 我们现在只关心垂直的滑动。
return nestedScrollAxes==ViewCompat.SCROLL_AXIS_VERTICAL||super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,target, nestedScrollAxes);
}
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, V child, View target,
int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
}
// 快速滑动的惯性移动(松开手指后还会有滑动效果)
@Override
public boolean onNestedFling(CoordinatorLayout coordinatorLayout,
View child, View target, float velocityX, float velocityY,
boolean consumed) {
((NestedScrollView)child).fling((int) velocityY);
return super.onNestedFling(coordinatorLayout, child, target, velocityX,
velocityY, consumed);
}
后面三个方法监听滑动控件的滑动通过Behavior反馈到其他子控件并执行一些动画。
注意:滑动控件指的是:RecyclerView/NestedScrollView/ViewPager,意味着ListView、ScrollView不行。
2.添加 app:layout_behavior
在以CoordinatorLayout为父布局的布局中需要执行相应动作的view添加 app:layout_behavior=""属性,内容是自定义Behavior路径
注:
如果给FloatingActionButton添加依赖,自定义Behavior直接继承FloatingActionButton.Behavior
与AppBarLayout一起使用
AppBarLayout必须是CoordinatorLayout的直接子View
可通过给子View设置app:layout_scrollFlags="flag",把子View滑出屏幕,需要给滑动组件设置app:layout_behavior="@string/appbar_scrolling_view_behavior",AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变
flag包括:
scroll: 里面所有的子控件想要当滑出屏幕的时候view都必须设置这个flag,
没有设置flag的view将被固定在屏幕顶部。
enterAlways:('quick return' pattern)
enterAlwaysCollapsed:当你的视图设置了minHeight属性的时候,那么视图只能以最小高度入,只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed:滚动退出屏幕,最后折叠在顶端。
例如:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout
可以实现Toolbar折叠效果,通常作为AppBarLayout的子view.
注意:
1.AppBarLayout设置固定高度,并且要实现折叠效果必须比toolbar的高度要高。
2.CollapsingToolbarLayout最好设置成match_parent
app:layout_collapseMode="parallax"
parallax:视差模式,在折叠的时候会有折叠视差效果。
一般搭配layout_collapseParallaxMultiplier=“0.5”视差的明显程度
be between 0.0 and 1.0.
none:没有任何效果,往上滑动的时候toolbar会首先被固定并推出去。
pin:固定模式,在折叠的时候最后固定在顶端。
app1:contentScrim="@color/colorPrimary_pink"//内容部分的沉浸式效果:toolbar和imageview有一个渐变过渡的效果
app1:statusBarScrim="@color/colorPrimary_pink"//和状态栏的沉浸式效果:指定颜色。
例如:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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="260dp" >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:minHeight="200dp"
app1:expandedTitleGravity="center"
app1:collapsedTitleGravity="center_horizontal"
app1:contentScrim="@color/colorPrimary_pink"
app1:expandedTitleMargin="5dp"
app1:statusBarScrim="@color/colorPrimary_pink"
app1:title="标题"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/tulips2"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1"
/>
<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin"
app:logo="@drawable/ic_launcher"
app:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout的title会覆盖Toolbar的title
ViewPager+TabLayout
需要给ViewPager设置app:layout_behavior="@string/appbar_scrolling_view_behavior"
例如:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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.v7.widget.Toolbar
app1:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app1:title="标题"
>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
app1:layout_scrollFlags="scroll|enterAlways"
android:id="@+id/tablayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app1:tabBackground="@color/material_deep_teal_200"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorPrimary_pink"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/colorPrimary_pinkDark"
app:tabTextColor="@color/colorPrimary_pink" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</android.support.design.widget.CoordinatorLayout>
网友评论