Android嵌套滑动Behavior方案实战及细节注意

其他 2018-07-29 01:42:32 阅读次数: 0

笔者在2013年就收到Android嵌套滑动的UI效果需求，当时都是直接从监听滑动事件分发做起，至今再次收到这种类似的需求，一直以来想更新下之前的实现方式，相对于Behavior封装过的方案而言毕竟不够优雅，现就介绍前后两种方案。

  • 老方案的思路

    这种方式是相关api直接使用，其他的封装方式（包括behavoir）都是基于此封装而来，直接重写父类（ViewGroup）的事件分发机制：dispatchTouchEvent、onInterceptTouchEvent、onTouchEvent等方法，手动事件分发，当属于逻辑外层滑动时候，进行拦截，满足一定条件之后，再重新分发事件给相关子嵌套的滚动View。这里面代码实现就不展示出来，有点历史，思路在此，不过实现中会有些问题。
    例如当重新把move事件分发给子View时，这时子View突然接受到move事件，没有完整的流程经历down事件会导致未初始化而不能响应move事件，其次就是拦截事件不要拦截down事件，会导致某个view点击事件不能响应，滑动都应该只是针对move事件拦截。

  • Behavior方式

    在说Behavior之前先简单提下嵌套滑动在5.0之后新增的Api：NestedScrollingParent、NestedScrollingChild以及相应的Helper类，具体介绍不是重点，分别实现这些接口的父View和子View类就能够实现父View对子View嵌套滑动的监听，同时父View和子View之间不一定是直接的上下层关系，子View可以是父view下任意子View，例如NestedScrollView、RecyclerView、CoordinatorLayout（本文重点，下面再讲）都分别实现这两个接口中一个或两个，当然我们可以自定义ViewGroup实现NestedScrollingParent来监听子View的嵌套滑动，贴下代码：

CustomNestedScrollLinearLayout .class

public class CustomNestedScrollLinearLayout extends LinearLayout implements NestedScrollingParent {
    View mchild, mRecyc, mTitle;

    public CustomNestedScrollLinearLayout(Context context) {
        super(context);
    }

    public CustomNestedScrollLinearLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mchild = findViewById(R.id.move);
        mRecyc = findViewById(R.id.recyclerView);
        mTitle = findViewById(R.id.title);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        ViewGroup.LayoutParams params = mRecyc.getLayoutParams();
        params.height = getMeasuredHeight() - findViewById(R.id.title).getMeasuredHeight();
    }


    @Override
    public boolean onStartNestedScroll(@NonNull View child, @NonNull View target, int axes) {
        Log.i("onLayoutChild", "target=" + target.getHeight());
        return (axes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    @Override
    public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed) {
        int bottom = mchild.getBottom();
        int chileHeight = mchild.getHeight();
        Log.i("onNestedScroll", "onNestedPreScroll dy=" + dy + " bottom=" + bottom);
        if (dy > 0 && bottom > 0) {
            int left = bottom - dy;
            if (left >= 0) {
                consumed[1] = dy;
            } else {
                consumed[1] =bottom;
            }
            mchild.offsetTopAndBottom(-consumed[1]);
            mTitle.offsetTopAndBottom(-consumed[1]);
            target.offsetTopAndBottom(-consumed[1]);
        }     }

    @Override
    public void onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        Log.i("onNestedScroll", "onNestedScroll dyConsumed=" + dyConsumed + " dyUnconsumed=" + dyUnconsumed);
        if (dyUnconsumed > 0) {
            return;
        }
        int bottom = mchild.getBottom();
        int chileHeight = mchild.getHeight();
        if (dyUnconsumed < 0 && bottom < chileHeight) {
            int left = bottom - dyUnconsumed;
            int consumed;
            if (left <= chileHeight) {
                consumed = dyUnconsumed;
            } else {
                consumed = -chileHeight + bottom;
            }
            mchild.offsetTopAndBottom(-consumed);
            mTitle.offsetTopAndBottom(-consumed);
            target.offsetTopAndBottom(-consumed);
        }
    }

    @Override
    public void onStopNestedScroll(View child) {
        Log.i("onNestedScroll", "onStopNestedScroll child=" + child.getClass().getSimpleName());
        super.onStopNestedScroll(child);
    }

    @Override
    public boolean onNestedPreFling(View target, float velocityX, float velocityY) {
        Log.i("onNestedScroll", "onNestedPreFling target=" + target.getClass().getSimpleName() + " velocityY=" + velocityY);
        return super.onNestedPreFling(target, velocityX, velocityY);
    }
}

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<statistics.ymm.com.myapplication.CustomNestedScrollLinearLayout 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"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/move"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="Hello World!" />

       <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="title" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        app:layout_behavior="statistics.ymm.com.myapplication.MyBehavior" />


</statistics.ymm.com.myapplication.CustomNestedScrollLinearLayout>

原理本文篇幅不够，不想写，之前都是写关于原理篇，可以百度，今天搞个实战篇，第一次贴代码，拿走就用，不谢。

当然这不是本文重点，确实基础，上文提到了CoordinatorLayout，其中Behavior是就是CoordinatorLayout的静态内部类，对其可以简单理解为在CoordinatorLayout实现NestedScrollingParent2之后，接受到子View的滑动通知之后，把直接通过子View的Behavior来通知回调（注意是直接子View,因为Behavior是CoordinatorLayout.LayoutParams的元素，只能解析直接子View的Behavoir配置），Behavior提供了很多回调，包括了嵌套滑动相关的接口方法。废话不多说，上代码：

public class MyBehavior extends CoordinatorLayout.Behavior<View> {

    private WeakReference<View> dependentView;

    public MyBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private View getDependentView() {
        return dependentView.get();
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        if (dependency != null && dependency.getId() == R.id.move) {
            dependentView = new WeakReference<>(dependency);
            return true;
        }
        return super.layoutDependsOn(parent, child, dependency);
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        child.setTranslationY(dependency.getHeight() + dependency.getTranslationY());
        return true;
    }

    @Override
    public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull View child, @NonNull View directTargetChild, @NonNull View target, int axes, int type) {

        return (axes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    @Override
    public void onNestedPreScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull View child, @NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);

        if (dy < 0) {
            return;
        }
        View dependentView = getDependentView();
        float newTranslateY = dependentView.getTranslationY() - dy;
        float minHeaderTranslate = -(dependentView.getHeight());
        Log.i("onLayoutChild", "onNestedPreScroll dy=" + dy + "TranslationY='" + dependentView.getTranslationY());
        if (newTranslateY >= minHeaderTranslate) {
            dependentView.setTranslationY(newTranslateY);
            consumed[1] = dy;
        } else {
            if (dependentView.getTranslationY() >= -minHeaderTranslate) {
                consumed[1] = (int) (dependentView.getTranslationY() - minHeaderTranslate);
            }
            dependentView.setTranslationY(minHeaderTranslate);

        }
    }


    @Override
    public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull View child, @NonNull View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type) {

        if (dyUnconsumed > 0) {
            return;
        }
        View dependentView = getDependentView();
        float currentTranslationY = dependentView.getTranslationY();
        float newTranslateY = currentTranslationY - dyUnconsumed;
        final float maxHeaderTranslate = 0;
        Log.i("onLayoutChild", "onNestedScroll dyUnconsumed=" + dyUnconsumed + "currentTranslationY="+currentTranslationY);
        if (newTranslateY <= maxHeaderTranslate) {
            dependentView.setTranslationY(newTranslateY);
        } else {
            dependentView.setTranslationY(maxHeaderTranslate);
        }


        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type);
    }

    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {

        return super.onLayoutChild(parent, child, layoutDirection);
    }

    @Override
    public boolean onMeasureChild(CoordinatorLayout parent, View child, int parentWidthMeasureSpec, int widthUsed, int parentHeightMeasureSpec, int heightUsed) {

        return super.onMeasureChild(parent, child, parentWidthMeasureSpec, widthUsed, parentHeightMeasureSpec, heightUsed);
    }
}

布局代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/move"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="Hello World!" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="statistics.ymm.com.myapplication.MyBehavior">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="@android:color/darker_gray"
            android:gravity="center"
            android:text="title"
             />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
  />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

效果图
这里写图片描述
这里写图片描述

这里面通过滑动下面的list，会先让红色区域的Hello World!先移动，直到消失之后，list才滑动，中间连贯，不中断，连续滑动，title停在顶层不动。基本满足个人的需求，直接但是如果上面红色header过长话，希望能通过滑动header（Helll World！区域）也能滑动整页，而不是仅仅通过列表滑动来触发的滑动，这时候嵌套滑动就不够满足。上文也提到了Behavior有好多其他回调接口，要想实现Header滑动导致整页滑动，故此我们必须监听Header上面的滑动事件触发，肯定会想到重写Header的事件分发，这会显得麻烦。Behavior就提供了View滑动事件的拦截监听，直接贴代码。

 @Override
    public boolean onInterceptTouchEvent(CoordinatorLayout parent, View child, MotionEvent ev) {
        int dy = (int) ev.getY();
//        Log.i("chuan", "onInterceptTouchEvent=" + ev.getAction() + "dy=" + dy);
        View dependView = getDependentView();
        if (dependView == null) {
            return super.onInterceptTouchEvent(parent, child, ev);
        }

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downY = (int) ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                lastY = dy;
                if (Math.abs(lastY - downY) > 1 && dy < (dependView.getMeasuredHeight() + dependView.getTranslationY())) {
                    return true;
                }
                break;
            default:
                break;
        }

        return super.onInterceptTouchEvent(parent, child, ev);
    }

    int lastY;

    @Override
    public boolean onTouchEvent(CoordinatorLayout parent, View child, MotionEvent ev) {
        acquireVelocityTracker(ev);
        final VelocityTracker verTracker = mVelocityTracker;
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_MOVE:
                int dy = y - lastY;
//                Log.i("chuan", "onTouchEvent=" + ev.getAction() + "dy=" + dy);
                if (dy < 0) {
                    moveUp(-dy, new int[2]);
                } else {
                    movedown(-dy);
                }
                lastY = y;
                break;
            case MotionEvent.ACTION_CANCEL:
                //自动
                verTracker.computeCurrentVelocity(1000, mMaxVelocity);
                autoFlingBySpeedIfNedd(-verTracker.getYVelocity());
                releaseVelocityTracker();
                break;
            default:
                break;
        }
        return super.onTouchEvent(parent, child, ev);
    }

重写Behavior中onInterceptTouchEvent等方法，判断手势启动位置，如果Header没有消失，就拦截Move事件，让header移动，header移动之后其dependVIew子View就会跟着滑动，从而实现整页的滑动。

  • 细节
    -CoordinatorLayout中子View 布局中属性增加MarginBottom或top会导致下面的依赖view之间有重叠覆盖。如上文中的Header若添加margin，会导致其依赖的view之间发生重叠，这个应该是CoordinatorLayout在layout子View时候没有计算上下间距。
    2、多个依赖view之间的布局，第3个view要减去第二个view的高度。例如上列中布局可以看到title和list都在一层父布局中，但是如果希望就是都在CoordinatorLayout中该怎么实现，布局如下：
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/move"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="Hello World!" />


  <!--  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="statistics.ymm.com.myapplication.MyBehavior">-->

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="@android:color/darker_gray"
            android:gravity="center"
            android:text="title"
            app:layout_behavior="statistics.ymm.com.myapplication.MyBehavior" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            app:layout_behavior="statistics.ymm.com.myapplication.Titlebehavior" />
  <!--  </LinearLayout>-->


</android.support.design.widget.CoordinatorLayout>

这时候就要增加之后布局的依赖关系了，title移动是依赖Header，设置MyBehavior配置，而list就要跟着title移动继续，新增Titlebehavior，让其依赖title，代码如下：

public class Titlebehavior extends CoordinatorLayout.Behavior {
    public Titlebehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private WeakReference<View> dependentView;

    private View getDependentView() {
        return dependentView.get();
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {

        if (dependency != null && dependency.getId() == R.id.title) {
            dependentView = new WeakReference<>(dependency);
            return true;
        }
        return super.layoutDependsOn(parent, child, dependency);
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {

        child.setTranslationY(dependency.getTranslationY());

        return true;
    }


    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
        if (lp.height == CoordinatorLayout.LayoutParams.MATCH_PARENT) {
            child.layout(0, (int) TypedValue.applyDimension(1, 20, child.getResources().getDisplayMetrics()), parent.getWidth(), (int) (parent.getHeight()));
            return true;
        }
        return super.onLayoutChild(parent, child, layoutDirection);
    }
}

这个时候要注意onLayoutChild对list控件layOut时候要手动减去依赖VIew的高度，也就是title，否则会导致直接覆盖了title。

猜你喜欢

转载自blog.csdn.net/u010019468/article/details/80597989
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022