CoordinatorLayout 实现了多种Material Design中提到的滚动效果
概况
CoordinatorLayout协调布局之间的动画。
- [x] AppBarLayout必须是CoordinatorLayout的直接子View。不使用actionbar而是使用toolbar,注意更改theme为noactionbar。
- [x] 定义AppBarLayout与滚动视图之间的联系。在RecyclerView或者任意支持嵌套滚动的view添加app:layout_behavior。一个特殊的字符串资源@string/appbar_scrolling_view_behavior,它和AppBarLayout.ScrollingViewBehavior相匹配,用来通知AppBarLayout这个特殊的view何时发生了滚动事件,这个behavior需要设置在触发事件(滚动)的view之上。
1、自定义的Behavior
CoordinatorLayout中的一个抽象类。
public abstract static class Behavior {
public Behavior() {
}
public Behavior(Context context, AttributeSet attrs) {
}
}
注意:构造函数一定要重载(xml中根据),泛型一般View即可
在自定义Behavior的时候,我们需要关心的两组四个方法,为什么分为两组呢?看一下下面两种情况:
1、某个view监听另一个view的状态变化,例如大小、位置、显示状态等
2、某个view监听CoordinatorLayout里的滑动状态
对于第一种情况,我们关心的是:
layoutDependsOn和onDependentViewChanged方法,
对于第二种情况,我们关心的是:
onStartNestedScroll和onNestedPreScroll方法。
1、layoutDependsOn决定了关心谁 onDependentViewChanged决定了怎样的做出变化
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof TextView;
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
int offset=dependency.getTop()-child.getTop();
ViewCompat.offsetTopAndBottom(child,offset);
return true;
}
效果:让一个textview跟随另一个textview 移动
2、
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
return (nestedScrollAxes& ViewCompat.SCROLL_AXIS_VERTICAL)!=0;
}
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
int leftScrolled=target.getScrollY();
Log.e(TAG,"滑动距离"+leftScrolled);
child.setScrollY(leftScrolled);
}
@Override
public boolean onNestedFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY, boolean consumed) {
((NestedScrollView)child).fling((int) velocityY);
return true;
}
onStartNestedScroll 中表示垂直滑动 fling表示手指停下时继续滚动
效果:让一个scrollvew 跟随另一个scrollview 移动
2、悬浮式toolbar
效果:
app:layout_scrollFlags属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。可以使用的其他flag有:
enterAlways: 一旦向上滚动这个view就可见。
enterAlwaysCollapsed: 顾名思义,这个flag定义的是何时进入(已经消失之后何时再次显示)。假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。
exitUntilCollapsed: 同样顾名思义,这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。
其中的 > app:layout_behavior="@string/appbar_scrolling_view_behavior"是可以没有的(那为啥还要加上?)
延伸一下 利用自定义的behavior再加一个底部栏:
其中behavior:
public class FooterBehaviorDependAppBar extends CoordinatorLayout.Behavior {
private String TAG="FooterBehaviorDependAppBar";
public FooterBehaviorDependAppBar(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
float translationY = Math.abs(dependency.getTop());
child.setTranslationY(translationY);
return true;
}
}
效果:
3、CollapsingToolbarLayout和Toolbar
CollapsingToolbarLayout的设置使得toolbar出现拉伸的效果
CollapsingToolbarLayout:
...
contentScrim:渐变成的颜色
collapsedTitleGravity:折叠时题目的gravity
expandedTitleGravity:伸展时的gravity
整个题目变化的动画的起止状态都是在这里设置的,和toolbar没有关系,但是toolbar会造成一些影响:
1、
此时是没有题目显示的,整个CollapsingToolbarLayout只显示toolbar,因为toolbar的子view match_parent 题目是无法显示的所以是没有title的动画变化的
2、
app:contentInsetStart="0dp"
需要加上,否则CollapsingToolbarLayout中的折叠时的题目总会和左边有间距
3、
app:layout_collapseMode="pin"
默认时toolbar 随着collapse的压缩被挤出去了,如图所示toolbar的位置一直在假toolbar的位置上只不过没有显示而已。
如果加上app:layout_collapseMode="pin" toolbar不会有任何移动一直在最上方。由于toolbar是看不见的界面上没有任何区别,但是当更新collapse中的view时(view的位置恰好和toolbar重叠)此时collaps的title便会消失掉了!!!所以不要加pin或parallax。
title会消失的demo
所以有时为了产品需求,写一个空的toolbar 使得标题可以看到title动画变化 同时在collapse中加入相应的icon。
这里多注意title的参数设置,折叠和展开时的title显示是动画的起始位置
4、加入图像
视差图像时,app:layout_collapseMode="parallax"