CoordinatorLayout自定义Bahavior特效及其源码分析
2016-07-27 16:09
411 查看
@[CoordinatorLayout, Bahavior]
CoordinatorLayout是android support design包中可以算是最重要的一个东西,运用它可以做出一些不错的特效,而其中的难点就是Bahavior的使用
拖动效果实例
CoordinatorLayout和Bahavior解析
关于NestScrolling机制
首先看下布局
涉及到本例子的图片、文字等资源的地方不需要关注,我们主要关注这几个地方:
首先根布局是一个 CoordinatorLayout
其次id为search_pane的这个LinearLayout整体就是我们的搜索框,也就是最终需要根据滑动而显示/隐藏的部分
这个搜索框(R.id.search_pane)他必须是直接为CoordinatorLayout的一级child view,从而才能实现上述效果
在这个搜索框中添加了一个属性app:layout_behavior="com.xxx.common.behavior.SearchScrollBehavior",SearchScrollBehavior实际是一个我们自定义的Behavior,而这里需要指定它的完全限定名(后面将会详细说明该如何写这个自定义Behavior)
java代码部分基本上和传统的listview的实现没有任何区别,这里就不再贴出代码。而唯独需要注意的一点是必须要子啊设置完毕ListView后添加这句代码:
后面将会说明加上这句话的原因。当然如果你用的是RecyclerView而不是ListView,那么就不用添加这句代码。
翻开CoordinatorLayout的源码,发现它其实就是一个ViewGroup,确切来说可以看做为一个FrameLayout。
使用CoordinatorLayout主要出于两种目的:
用于应用界面的根布局
作为一个容器用来协调子View之间的交互
说到CoordinatorLayout就不得不说Behavior这个类,他其实是CoordinatorLayout的一个内部抽象类
上面代码中列出了我们在自定义Behavior时需要复写的几个方法(大部分情况),根据需要,一般分为两类:
某个view监听另一个view的状态变化,例如大小、位置、显示状态等
某个view监听CoordinatorLayout里的滑动状态
对于第一种情况,一个例子就是当现实SnackBar的时候,Fab同样的随着Snackbar向上弹出而向上平移。这里不再举例。
对于第二种i情况,我们需要复写前两个方法,泛型V实际制定的是使用该Behavior的View,本例我们在search_pane这个LinearLayout中通过app:layout_behavior将该自定义Behavior加了进来,实际上这个V就是该搜索框。而onStartNestedScroll和onNestedPreScroll中的child即该搜索框。
onStartNestedScroll一般用于滑动开始之前调用,一般用来计算一些child的尺寸,同时指定我们的Behavior感兴趣的滑动方向;onNestedPreScroll用来实时的监听滑动状态,根据状态从而对child做出特定的响应。对于我们的例子来说,如果ListView往上拉动(查看更多)的时候隐藏搜索框,而向下拉动(往回看)的时候展现搜索框。
本例的SearchScrollBehavior代码为:
这样子,我们把自定义的Behavior写到搜素框的xml布局中进行指定一下,不需额外的代码,就实现了本文开头的效果。
在support-v4包中有这两个接口:
NestedScrollingParent
NestedScrollingChild
CoordinatorLayout实现了NestedScrollingParent这个接口,而RecylerView实现了NestedScrollingChild这个接口
我们知道View的事件传递是从子到父的,我们看下实现了NestedScrollingChild接口的RecyclerView 的onTouchEvent是怎么写的,在onTouchEvent的ACTION_MOVE分支,调用了他自己的dispatchNestedPreScroll方法(这个是NestedScrollingChild接口的一个方法,被RecyclerView 实现了)
dispatchNestedPreScroll的实现中实际是调用NestedScrollingChildHelper的dispatchNestedPreScroll方法,看下NestedScrollingChildHelper的该方法的实现:
当发现该子view的isNestedScrollingEnabled被设置的话(RecylerView是开启的,而继承自AbsListview的ListView是关闭的,所以如果使用Behavior的控件是ListView的话,必须要setNestedScrollingEnabled(true)),就调用ViewParentCompat.onNestedPreScroll方法,将滑动的位置传递过去。
而ViewParentCompat就是包含了这个子View(RecyclerView)的父亲布局,所以很显然就是CoordinatorLayout这个ViewGroup了(这里也就说明了第一节所说的使用Behavior的控件必须是直接从属于CoordinatorLayout的原因),而onNestedPreScroll这个方法就是NestedScrollingParent接口的,CoordinatorLayout恰恰实现了这个方法。
那么现在有点眉目了,事件是这样子传递的,当我们滑动RecyclerView的时候,事件会通过NestScrolling机制传给CoordinatorLayout,这是第一步。那么CoordinatorLayout怎么通过Behavior将事件继续传递给它的子View呢。肯定就要看下CoordinatorLayout的onNestedPreScroll中写了什么:
CoordinatorLayout是找出了所有的child view,通过getBehavior一个个的获得child view的Behavior然后直接执行Behavior的onNestedPreScroll方法,将dx/dy等数据以及这个child view本身传递进去。到了这里,我们也就执行到了我们自定义的
这里要提一下
说到这里,好像一直没讲NestScrolling机制,可以参考下这篇博客,有一个很详细的讲解
https://segmentfault.com/a/1190000002873657
可以说CoordinatorLayout的Behavior机制完全离不开NestScrolling!
CoordinatorLayout是android support design包中可以算是最重要的一个东西,运用它可以做出一些不错的特效,而其中的难点就是Bahavior的使用
拖动效果实例
CoordinatorLayout和Bahavior解析
关于NestScrolling机制
拖动效果实例
上述效果图中上部是一个LinearLayout中含有的一个EditText从而做成的一个简单的搜索框,而下部是一个ListView。我们想当ListView往上拉动(查看更多)的时候隐藏搜索框,而向下拉动(往回看)的时候展现搜索框。首先看下布局
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.qianmi.adminapp.lib.utils.widget.BaseSwipeRefreshLayout android:id="@+id/swipeRefreshLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="wrap_content" android:dividerHeight="1px" android:scrollbars="vertical" tools:listitem="@layout/item_member_list" /> <TextView android:id="@+id/empty" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textColor="#444" android:textSize="12sp" android:visibility="gone" /> </com.qianmi.adminapp.lib.utils.widget.BaseSwipeRefreshLayout> </FrameLayout> <LinearLayout android:id="@+id/search_pane" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" app:layout_behavior="com.xxx.common.behavior.SearchScrollBehavior" > <View android:id="@+id/tab_margin" android:layout_width="match_parent" android:layout_height="@dimen/fit_status_bar_height" android:background="@color/toolbar_background_color" android:orientation="vertical" /> <LinearLayout android:id="@+id/search_bg" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/toolbar_background_color" android:gravity="center" android:paddingBottom="10dp" android:paddingLeft="@dimen/content_margin" android:paddingRight="@dimen/content_margin" android:paddingTop="10dp"> <EditText android:id="@+id/et_search" style="@style/search_edit_view_style" android:layout_width="0dp" android:layout_weight="1" android:clickable="true" android:gravity="left|center_vertical" android:hint="@string/member_list_search_hint" android:imeOptions="actionSearch" android:inputType="textPersonName"/> </LinearLayout> </LinearLayout> </android.support.design.widget.CoordinatorLayout>
涉及到本例子的图片、文字等资源的地方不需要关注,我们主要关注这几个地方:
首先根布局是一个 CoordinatorLayout
其次id为search_pane的这个LinearLayout整体就是我们的搜索框,也就是最终需要根据滑动而显示/隐藏的部分
这个搜索框(R.id.search_pane)他必须是直接为CoordinatorLayout的一级child view,从而才能实现上述效果
在这个搜索框中添加了一个属性app:layout_behavior="com.xxx.common.behavior.SearchScrollBehavior",SearchScrollBehavior实际是一个我们自定义的Behavior,而这里需要指定它的完全限定名(后面将会详细说明该如何写这个自定义Behavior)
java代码部分基本上和传统的listview的实现没有任何区别,这里就不再贴出代码。而唯独需要注意的一点是必须要子啊设置完毕ListView后添加这句代码:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { listview.setNestedScrollingEnabled(true); }
后面将会说明加上这句话的原因。当然如果你用的是RecyclerView而不是ListView,那么就不用添加这句代码。
CoordinatorLayout和Bahavior解析
刚解除CoordinatorLayout是从Google的官方的demo里,demo使用了CoordinatorLayout作为布局根节点,同时使用了appbar、tablayout、fab等控件,做出了一个联动效果的demo,很是漂亮。但是刚开始对于其深层次的用法,从来没有深究。翻开CoordinatorLayout的源码,发现它其实就是一个ViewGroup,确切来说可以看做为一个FrameLayout。
使用CoordinatorLayout主要出于两种目的:
用于应用界面的根布局
作为一个容器用来协调子View之间的交互
说到CoordinatorLayout就不得不说Behavior这个类,他其实是CoordinatorLayout的一个内部抽象类
public static abstract class Behavior<V extends View> { public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, V child, View directTargetChild, View target, int nestedScrollAxes) { return false; } public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, V child, View target, int dx, int dy, int[] consumed) { // Do nothing } public boolean onDependentViewChanged(CoordinatorLayout parent, V child, View dependency) { return false; } public void onDependentViewRemoved(CoordinatorLayout parent, V child, View dependency) { } }
上面代码中列出了我们在自定义Behavior时需要复写的几个方法(大部分情况),根据需要,一般分为两类:
某个view监听另一个view的状态变化,例如大小、位置、显示状态等
某个view监听CoordinatorLayout里的滑动状态
对于第一种情况,一个例子就是当现实SnackBar的时候,Fab同样的随着Snackbar向上弹出而向上平移。这里不再举例。
对于第二种i情况,我们需要复写前两个方法,泛型V实际制定的是使用该Behavior的View,本例我们在search_pane这个LinearLayout中通过app:layout_behavior将该自定义Behavior加了进来,实际上这个V就是该搜索框。而onStartNestedScroll和onNestedPreScroll中的child即该搜索框。
onStartNestedScroll一般用于滑动开始之前调用,一般用来计算一些child的尺寸,同时指定我们的Behavior感兴趣的滑动方向;onNestedPreScroll用来实时的监听滑动状态,根据状态从而对child做出特定的响应。对于我们的例子来说,如果ListView往上拉动(查看更多)的时候隐藏搜索框,而向下拉动(往回看)的时候展现搜索框。
本例的SearchScrollBehavior代码为:
public class SearchScrollBehavior extends CoordinatorLayout.Behavior<View> { private int searchPaneHeight = 0;//搜索框的高度 private boolean isAnimate;//动画是否在进行 private Context ctx; public SearchScrollBehavior(Context context, AttributeSet attrs) { super(context, attrs); ctx = context; } @Override public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) { if (child.getVisibility() == View.VISIBLE && searchPaneHeight == 0) { //获取控件高度 searchPaneHeight = DensityUtils.dp2px(ctx, child.getHeight()); } return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;//判断是否竖直滚动 } @Override public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) { //dy大于0是向上滚动 小于0是向下滚动 if (dy >= 0 && !isAnimate && child.getVisibility() == View.VISIBLE) { showSearch(child, false); } else if (dy < 0 && !isAnimate && child.getVisibility() == View.GONE) { showSearch(child, true); } } private void showSearch(final View searchPane, boolean visible) { if (searchPane == null) { return; } float translationY = searchPane.getTranslationY(); if (!visible) { //show -> hide if (translationY < 0 || isAnimate) { return; } L.d("hide, searchPaneHeight" + searchPaneHeight); ViewPropertyAnimator animator = searchPane.animate() .translationY(-searchPaneHeight) .setDuration(800) .setInterpolator(new DecelerateInterpolator()) .setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { isAnimate = true; } @Override public void onAnimationEnd(Animator animation) { searchPane.setVisibility(View.GONE); isAnimate = false; } @Override public void onAnimationCancel(Animator animation) { showSearch(searchPane, true); } @Override public void onAnimationRepeat(Animator animation) { } }); animator.start(); } else { //hide -> show if (translationY >= 0 || isAnimate) { return; } L.d("show, searchPaneHeight" + searchPaneHeight); ViewPropertyAnimator animator = searchPane.animate() .translationY(0) .setDuration(500) .setInterpolator(new DecelerateInterpolator()) .setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { searchPane.setVisibility(View.VISIBLE); isAnimate = true; } @Override public void onAnimationEnd(Animator animation) { isAnimate = false; } @Override public void onAnimationCancel(Animator animation) { showSearch(searchPane, false); } @Override public void onAnimationRepeat(Animator animation) { } }); animator.start(); } } }
这样子,我们把自定义的Behavior写到搜素框的xml布局中进行指定一下,不需额外的代码,就实现了本文开头的效果。
关于NestScrolling机制
那么CoordinatorLayout是如何实现通过Behavior来控制子View的状态的呢?这里必须要说到NestedScrolling机制。在support-v4包中有这两个接口:
NestedScrollingParent
NestedScrollingChild
CoordinatorLayout实现了NestedScrollingParent这个接口,而RecylerView实现了NestedScrollingChild这个接口
public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent { }
public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild { }
我们知道View的事件传递是从子到父的,我们看下实现了NestedScrollingChild接口的RecyclerView 的onTouchEvent是怎么写的,在onTouchEvent的ACTION_MOVE分支,调用了他自己的dispatchNestedPreScroll方法(这个是NestedScrollingChild接口的一个方法,被RecyclerView 实现了)
case MotionEvent.ACTION_MOVE: { ... if (dispatchNestedPreScroll(dx, dy, mScrollConsumed, mScrollOffset)) { ... } ... @Override public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow) { return getScrollingChildHelper().dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow); }
dispatchNestedPreScroll的实现中实际是调用NestedScrollingChildHelper的dispatchNestedPreScroll方法,看下NestedScrollingChildHelper的该方法的实现:
public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow) { if (isNestedScrollingEnabled() && mNestedScrollingParent != null) { if (dx != 0 || dy != 0) { int startX = 0; int startY = 0; if (offsetInWindow != null) { mView.getLocationInWindow(offsetInWindow); startX = offsetInWindow[0]; startY = offsetInWindow[1]; } if (consumed == null) { if (mTempNestedScrollConsumed == null) { mTempNestedScrollConsumed = new int[2]; } consumed = mTempNestedScrollConsumed; } consumed[0] = 0; consumed[1] = 0; ViewParentCompat.onNestedPreScroll(mNestedScrollingParent, mView, dx, dy, consumed); if (offsetInWindow != null) { mView.getLocationInWindow(offsetInWindow); offsetInWindow[0] -= startX; offsetInWindow[1] -= startY; } return consumed[0] != 0 || consumed[1] != 0; } else if (offsetInWindow != null) { offsetInWindow[0] = 0; offsetInWindow[1] = 0; } } return false; }
当发现该子view的isNestedScrollingEnabled被设置的话(RecylerView是开启的,而继承自AbsListview的ListView是关闭的,所以如果使用Behavior的控件是ListView的话,必须要setNestedScrollingEnabled(true)),就调用ViewParentCompat.onNestedPreScroll方法,将滑动的位置传递过去。
而ViewParentCompat就是包含了这个子View(RecyclerView)的父亲布局,所以很显然就是CoordinatorLayout这个ViewGroup了(这里也就说明了第一节所说的使用Behavior的控件必须是直接从属于CoordinatorLayout的原因),而onNestedPreScroll这个方法就是NestedScrollingParent接口的,CoordinatorLayout恰恰实现了这个方法。
那么现在有点眉目了,事件是这样子传递的,当我们滑动RecyclerView的时候,事件会通过NestScrolling机制传给CoordinatorLayout,这是第一步。那么CoordinatorLayout怎么通过Behavior将事件继续传递给它的子View呢。肯定就要看下CoordinatorLayout的onNestedPreScroll中写了什么:
public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) { int xConsumed = 0; int yConsumed = 0; boolean accepted = false; final int childCount = getChildCount(); for (int i = 0; i < childCount; i++) { final View view = getChildAt(i); final LayoutParams lp = (LayoutParams) view.getLayoutParams(); if (!lp.isNestedScrollAccepted()) { continue; } final Behavior viewBehavior = lp.getBehavior(); if (viewBehavior != null) { mTempIntPair[0] = mTempIntPair[1] = 0; viewBehavior.onNestedPreScroll(this, view, target, dx, dy, mTempIntPair); xConsumed = dx > 0 ? Math.max(xConsumed, mTempIntPair[0]) : Math.min(xConsumed, mTempIntPair[0]); yConsumed = dy > 0 ? Math.max(yConsumed, mTempIntPair[1]) : Math.min(yConsumed, mTempIntPair[1]); accepted = true; } } consumed[0] = xConsumed; consumed[1] = yConsumed; if (accepted) { dispatchOnDependentViewChanged(true); } }
CoordinatorLayout是找出了所有的child view,通过getBehavior一个个的获得child view的Behavior然后直接执行Behavior的onNestedPreScroll方法,将dx/dy等数据以及这个child view本身传递进去。到了这里,我们也就执行到了我们自定义的
SearchScrollBehavior的onNestedPreScroll方法里面去了。从而拿到了dx和dy。dy大于0是向上滚动 小于0是向下滚动,随后对自己(child view)进行响应。
这里要提一下
int[] consumed这个数据,它是一个int型的数组,长度为2,第一个元素是父view消费的x方向的滚动距离;第二个元素是父view消费的y方向的滚动距离,如果这两个值不为0,则子view需要对滚动的量进行一些修正。正因为有了这个参数,使得我们处理滚动事件的时候,思路更加清晰,不会像以前一样被一堆的滚动参数搞混。
说到这里,好像一直没讲NestScrolling机制,可以参考下这篇博客,有一个很详细的讲解
https://segmentfault.com/a/1190000002873657
可以说CoordinatorLayout的Behavior机制完全离不开NestScrolling!
相关文章推荐
- 第六章 面向对象的程序设计 数据属性+访问器属性
- 简单实现Android搜索功能 显示清除历史搜索记录
- 关于android串口通信
- HDU 5742 It's All In The Mind(贪心)
- SSL常见加密算法
- onSaveInstanceState() 和 onRestoreInstanc 4000 eState()
- C语言关键字
- JQuery学习之旅(1)
- [leetcode] 118. Pascal's Triangle
- SharePoint 2013 本地开发解决方案以及远程调试
- 【转】oracle in和exists、not in和not exists原理和性能探究
- css系列(6)css的运用(二)
- Android 魅族手机ListView 下拉出现HOLD字样
- hbase 协处理器
- html5中canvas线段绘制太阳花
- TCP重传与确认机制
- 编程之美2.21 只考加法的面试题
- CSU 1769: 想打架吗?算我一个!所有人,都过来!(3)
- Intents and Intent Filters
- Spring多数据源使用注解事务绑定注意事项和解决办法