Weex系列(三)之列表页实战冲突解决

1、前言

首先道一句抱歉,有一个月没更新博客了,作为忠厚老实的程序员哥哥那当然不是忘记了,而是最近实在是太忙了;首先是公司各种事,其次我最近写了几个库:一个插件化的,一个支持组件化的,还有一个启动保护的。后续会将这些库逐渐分享给大家,保证不坑有收获!

接下来就是本文的正题了,上篇文章中我们实践了一个列表页,同时实现了一个自己的下拉刷新。但是Weex的列表和我们下拉刷新的库不是那么简单就能兼容的。

本篇文章我们一起探索Weex列表与下拉刷新库的兼容以及一种更加通用的下拉刷新的实现。

2、过程

2.1 背景

我们项目中使用的是Android-Ultra-Pull-To-Refresh,可以嵌套任意View直接使用,扩展性也非常好。

2.2 问题

但是当和Weex列表连用的时候却发现:列表不滑动到顶部的时候就会触发下拉刷新,效果非常尴尬,此处肯定是事件冲突了。

2.3 探索

对于Android-Ultra-Pull-To-Refresh来说,它提供了一个PtrHandler来判断是否要执行下拉刷新操作,而默认的实现PtrDefaultHandler一般是够用的。下拉刷新有冲突则说明PtrHandler中的方法canChildScrollUp来判断是否要执行下拉刷新对这种情形不适合。可以看下默认的canChildScrollUp的实现:

    public static boolean canChildScrollUp(View view) {
        if (android.os.Build.VERSION.SDK_INT < 14) {
            if (view instanceof AbsListView) {
                final AbsListView absListView = (AbsListView) view;
                return absListView.getChildCount() > 0
                        && (absListView.getFirstVisiblePosition() > 0 || absListView.getChildAt(0)
                        .getTop() < absListView.getPaddingTop());
            } else {
                return view.getScrollY() > 0;
            }
        } else {
            return view.canScrollVertically(-1);
        }
    }

其中对列表类控件做了特殊处理:列表有条目并且滑动到了顶部则可以下拉刷新。讲道理,如果传入的参数View就是AbsListView的话,是不会出现滑动冲突的。那我们排查的重点就先放在排查参数View上,打印view的地址果然看不到一点AbsListView的影子。

在Weex的回调方法onViewCreated中,Weex最终渲染完毕的View作为参数回调了回来。而在上一篇文章中我们将这个View添加的方式是:PtrFrameLayout包裹了一个FrameLayout,然后将这个View添加到FrameLayout中,那么canChildScrollUp中传来的参数就应该是FrameLayout。通过翻阅Weex源码发现,Weex代码中的列表组件list对应的是BounceRecyclerView;那么我们需要找到BounceRecyclerView,然后将其作为是否可滑动的判断View。

而Weex渲染出来的View是否就是那个BounceRecyclerView呢?非也,即便是List组件是最外层的组件,Weex也会对其进行包裹;这时候就需要我们的debug上场了!

经过层层debug,终于找到了BounceRecyclerView所在;

Debug找到BounceRecyclerView

看一下修改之后的canChildScrollUp()方法。

    public static boolean canChildScrollUp(View view) {
        View realView = view;
        if (view instanceof ViewGroup) {
            FrameLayout frameLayout = (FrameLayout) view;
            RenderContainer renderContainer = (RenderContainer) frameLayout.getChildAt(0);
            realView = ((BounceRecyclerView) ((WXFrameLayout) renderContainer.getChildAt(0)).getChildAt(0)).getInnerView();
        }
        if (android.os.Build.VERSION.SDK_INT < 14) {
            if (realView instanceof AbsListView) {
                final AbsListView absListView = (AbsListView) realView;
                return absListView.getChildCount() > 0
                        && (absListView.getFirstVisiblePosition() > 0 || absListView.getChildAt(0)
                        .getTop() < absListView.getPaddingTop());
            } else {
                return realView.getScrollY() > 0;
            }
        } else {
            return ViewCompat.canScrollVertically(realView, -1);
        }
    }

重点:找到Weex中列表对应的AbsListView,将其作为是否下拉刷新的依据。

3、另一种实现

上一篇文章也说了,下拉刷新还有一种实现方式,Weex提供了组件定制的能力:那我们就将Android-Ultra-Pull-To-Refresh进行包装,然后配置成Weex可用的组件,这样的扩展性是更强的,需要下拉刷新就要,不需要就可以去掉。

3.1 封装

可以参考《Android 扩展》章节,将Android-Ultra-Pull-To-Refresh包装成一个Weex自定义组件,并向外提供控制下拉刷新显示与隐藏的方法。

贴出来自定义下拉刷新组件的代码:

public class RefreshView extends WXVContainer<MaterialDesignPtrFrameLayout> {
    public RefreshView(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
        super(instance, dom, parent);
    }

    public static class Ceator implements ComponentCreator {
        public WXComponent createInstance(WXSDKInstance instance, WXDomObject node, WXVContainer parent) throws IllegalAccessException, InvocationTargetException, InstantiationException {
            return new RefreshView(instance, node, parent);
        }
    }

    @Override
    protected MaterialDesignPtrFrameLayout initComponentHostView(@NonNull Context context) {
        final MaterialDesignPtrFrameLayout materialDesignPtrFrameLayout = new MaterialDesignPtrFrameLayout(context);
        materialDesignPtrFrameLayout.setPinContent(true);//设置内容不动。
        materialDesignPtrFrameLayout.setPtrHandler(new PtrDefaultHandler() {
            @Override
            public boolean checkCanDoRefresh(PtrFrameLayout frame, View content, View header) {
                View realView = content;
                if (realView instanceof ViewGroup) {
                    FrameLayout frameLayout = (FrameLayout) realView;
                    realView = ((BounceRecyclerView)frameLayout.getChildAt(0)).getInnerView();
                }
                if (android.os.Build.VERSION.SDK_INT < 14) {
                    if (realView instanceof AbsListView) {
                        final AbsListView absListView = (AbsListView) realView;
                        return !(absListView.getChildCount() > 0
                                && (absListView.getFirstVisiblePosition() > 0 || absListView.getChildAt(0)
                                .getTop() < absListView.getPaddingTop()));
                    } else {
                        return !(realView.getScrollY() > 0);
                    }
                } else {
                    return !ViewCompat.canScrollVertically(realView, -1);
                }
            }
            @Override
            public void onRefreshBegin(PtrFrameLayout frame) {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        materialDesignPtrFrameLayout.refreshComplete();
                    }
                },1000);
            }
        });
        return materialDesignPtrFrameLayout;
    }

    @WXComponentProp(name = "diaplay")
    public void setRefreshStatus(String refreshStatus) {
        if (TextUtils.equals("show", refreshStatus)) {
            ((MaterialDesignPtrFrameLayout) getHostView()).postDelayed(new Runnable() {
                @Override
                public void run() {
                    ((MaterialDesignPtrFrameLayout) getHostView()).autoRefresh(true);
                }
            }, 100);
        } else if (TextUtils.equals("hide", refreshStatus)) {
            ((MaterialDesignPtrFrameLayout) getHostView()).refreshComplete();
        }
    }
}

3.2 使用

3.2.1 首先需要对这个组件进行注册
    WXSDKEngine.registerComponent(new SimpleComponentHolder(RefreshView.class,new RefreshView.Ceator()), false, "refreshview");
3.2.2 在Js代码中直接使用
 <refreshview :diaplay="showLoading"  ref="refreshs" class="list">
        // other code 
 </refreshview>

4、总结

本文是使用Weex与自己项目结合发生冲突时候的解决方案思路,并且通过自定义Component实现更加通用的下拉刷新,一句话:对照文档,深入源码。

源码地址:https://github.com/liuzhao2007/WeexList

下篇文章开始,我们深入探索Weex的源码实现,欢迎持续关注!

欢迎关注微信公众号:定期分享Java、Android干货!

欢迎关注

推荐阅读更多精彩内容