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<V extends View> {
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
<?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:id="@+id/main_coordinate"
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:id="@+id/main_appbar"
>
<android.support.v7.widget.Toolbar
android:id="@+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:background="#f00"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main_recycler"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
></android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
效果：
悬浮toolbar.gif
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再加一个底部栏：
<?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:id="@+id/main_coordinate"
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:id="@+id/main_appbar"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:background="#f00"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main_recycler"
></android.support.v7.widget.RecyclerView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/main_bottom"
android:orientation="horizontal"
android:background="#fff"
android:layout_gravity="bottom"
app:layout_behavior="com.linewow.xhyy.coordinatordemo3.FooterBehaviorDependAppBar"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/main_bottom_tv"
android:text="这是我的底部栏"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
其中behavior：
public class FooterBehaviorDependAppBar extends CoordinatorLayout.Behavior<View> {
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;
}
}
效果：
device-2016-11-24-123059.gif
3、CollapsingToolbarLayout和Toolbar
<?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:id="@+id/appbar_coor"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="260dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main_coor2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleGravity="center"
app:expandedTitleGravity="center|bottom"
app:expandedTitleMarginBottom="-200dp"
>
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="123"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:background="#f00"
android:id="@+id/main_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout的设置使得toolbar出现拉伸的效果
CollapsingToolbarLayout：
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main_coor2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleGravity="center"
app:expandedTitleGravity="center|bottom"
app:expandedTitleMarginBottom="-200dp"
>
...
contentScrim:渐变成的颜色
collapsedTitleGravity：折叠时题目的gravity
expandedTitleGravity：伸展时的gravity
整个题目变化的动画的起止状态都是在这里设置的，和toolbar没有关系，但是toolbar会造成一些影响：
1、
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="toolbar的题目"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
此时是没有题目显示的，整个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。
所以有时为了产品需求，写一个空的toolbar 使得标题可以看到title动画变化 同时在collapse中加入相应的icon。
device-2016-11-29-200026.gif
这里多注意title的参数设置，折叠和展开时的title显示是动画的起始位置
4、加入图像
视差图像时，app:layout_collapseMode="parallax"
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
