zoukankan html css js c++ java

CoordinatorLayout自定义Bahavior特效及其源码分析

@[CoordinatorLayout, Bahavior]

CoordinatorLayout是android support design包中可以算是最重要的一个东西，运用它可以做出一些不错的特效，而其中的难点就是Bahavior的使用

拖动效果实例
CoordinatorLayout和Bahavior解析
关于NestScrolling机制

CoordinatorLayout and Bahavior

拖动效果实例

上述效果图中上部是一个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！

查看全文

相关阅读:
Ubuntu Mysql
Ubuntu配置大全
 MyEclipse 手动安装 Subclipse 插件
 解决 Ubuntu 11.10 在 RTL8111/8168B 网卡下速度慢的问题
 Ubuntu 多硬盘 LVM 方式安装
 关于编码转换
 Ubuntu 安装时(initramfs) Unable to find a medium containing a live file system错误的解决
 关于 DirectShow 中各个例子的编译转换问题
 ubuntu 中文设置
 javascript 处理鼠标右键事件

原文地址：https://www.cnblogs.com/soaringEveryday/p/5711545.html