@[CoordinatorLayout, Bahavior]

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>

涉及到本例子的图片、文字等资源的地方不需要关注,我们主要关注这几个地方:

  1. 首先根布局是一个 CoordinatorLayout
  2. 其次id为search_pane的这个LinearLayout整体就是我们的搜索框,也就是最终需要根据滑动而显示/隐藏的部分
  3. 这个搜索框(R.id.search_pane)他必须是直接为CoordinatorLayout的一级child view,从而才能实现上述效果
  4. 在这个搜索框中添加了一个属性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时需要复写的几个方法(大部分情况),根据需要,一般分为两类:

  1. 某个view监听另一个view的状态变化,例如大小、位置、显示状态等
  2. 某个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!

CoordinatorLayout自定义Bahavior特效及其源码分析的更多相关文章

  1. hadoop之hdfs------------------FileSystem及其源码分析

    FileSystem及其源码分析 FileSystem这个抽象类提供了丰富的方法用于对文件系统的操作,包括上传.下载.删除.创建等.这里多说的文件系统通常指的是HDFS(DistributedFile ...

  2. client-go客户端自定义开发Kubernetes及源码分析

    介绍 client-go 是一种能够与 Kubernetes 集群通信的客户端,通过它可以对 Kubernetes 集群中各资源类型进行 CRUD 操作,它有三大 client 类,分别为:Clien ...

  3. Golang的Context介绍及其源码分析

    简介 在Go服务中,对于每个请求,都会起一个协程去处理.在处理协程中,也会起很多协程去访问资源,比如数据库,比如RPC,这些协程还需要访问请求维度的一些信息比如说请求方的身份,授权信息等等.当一个请求 ...

  4. pdfmake.js使用及其源码分析

    公司项目在需要将页面的文本导出成DPF,和支持打印时,一直没有做过这样的功能,花了一点时间将其做了出来,并且本着开源的思想和技术分享的目的,将自己的编码经验分享给大家,希望对大家有用. 现在是有一个文 ...

  5. 8.深入k8s:资源控制Qos和eviction及其源码分析

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com,源码版本是1.19 又是一个周末,可以愉快的坐下来静静的品味一段源码,这一篇涉及到资源的 ...

  6. 9.深入k8s:调度器及其源码分析

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 源码版本是1.19 这次讲解的是k8s的调度器部分的代码,相对来说比较复杂,慢慢的梳理清 ...

  7. 13.深入k8s:Pod 水平自动扩缩HPA及其源码分析

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 源码版本是1.19 Pod 水平自动扩缩 Pod 水平自动扩缩工作原理 Pod 水平自动 ...

  8. 14.深入k8s:kube-proxy ipvs及其源码分析

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 源码版本是1.19 这一篇是讲service,但是基础使用以及基本概念由于官方实在是写的 ...

  9. 15.深入k8s:Event事件处理及其源码分析

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 源码版本是1.19 概述 k8s的Event事件是一种资源对象,用于展示集群内发生的情况 ...

随机推荐

  1. glib-2.49.4 static build step in windows XP

    export LIBFFI_CFLAGS=" -I/usr/local/lib/libffi-3.2.1/include " \ export LIBFFI_LIBS=" ...

  2. recycleview中使用checkbox导致的重复选中问题

    参考博文:http://www.myexception.cn/mobile/1852852.html 在使用RecycleView做仿微信图片选择器,其中条目中使用了checkbox,在选中时由于ho ...

  3. 仰视源代码,实现memcpy

    C++实现内存的复制 通常我们使用深复制就是通过内存复制实现的,可是对象的复制涉及到基类派生类及其相关类的问题.这里不讨论. 目的为了可以明确内存复制的底层实现. void* memcpy(void* ...

  4. linux 图形界面切换

    开机为文本界面,由文本界面切换到图形界面:    方法1:运行命令          #startx , 需要先配置图形界面信息,(暂时不会~) :    方法2:修改/etc/inittab文件中的 ...

  5. Eclipse里JAR文件的打包和使用

    作用:用于封装class.properties文件,是文件封装的最小单元:     包含Java类的普通库.资源(resources).辅助文件(auxiliary files)等.     可以将程 ...

  6. Codeforces 1139F Dish Shopping 树状数组套平衡树 || 平衡树

    Dish Shopping 将每个物品拆成p 和 s 再加上人排序. 然后问题就变成了, 对于一个线段(L - R), 问有多少个(li, ri)满足  L >= li && R ...

  7. Cnblog Markdown编辑器

    第一次使用Cnblog Markdown编辑器 1.在博客园使用 Markdown 与 LATEX[1] 1.1.开启MarkDown编辑器 选择 Markdown 撰写博文:在博客园管理-选项中,将 ...

  8. 详细介绍Base64的编码转换方式

    下面,详细介绍Base64的编码转换方式. 所谓Base64,就是说选出64个字符----小写字母a-z.大写字母A-Z.数字0-9.符号"+"."/"(再加上 ...

  9. 前端开发 —— BOM

    0. BOM vs. DOM BOM:Browser Object Model,浏览器对象模型,是在 web 中使用 JavaScript 的绝对核心: BOM:提供了独立于内容而与浏览器窗口进行交互 ...

  10. 【FCS NOI2018】福建省冬摸鱼笔记 day4

    第四天. 动态规划专题,讲师:闫神 讲了一些DP优化技巧,然而思想难度好大啊……根本没想到能优化那地步,连DP方程都没有呢. 不过有几题我还是想明白了. 讲了单调队列,决策单调性,四边形不等式,斜率优 ...