专栏首页双十二技术哥Weex系列(三)之列表页实战冲突解决

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所在;

看一下修改之后的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的源码实现,欢迎持续关注!

本文分享自微信公众号 - 双十二技术哥(gh_b0e7544783e2),作者:刘昭

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入Weex系列(六)Weex渲染流程分析

    在前两篇文章中我们结合源码学习了Module、Component的注册、调用、回调等流程,相信大家一定收获颇多,对Weex的理解也一定愈加深入。

    用户2898788
  • Android AsyncLayoutInflater 源码解析

    我们已经学习了 Layout 相关的方方面面,本文就来学习下一个相对新颖的知识点:AsyncLayoutInflater;说它相对新颖是因为它是Android ...

    用户2898788
  • GMTC移动开发者大会纪实(一)谁的寒冬又是谁的春天

    6月9号、10号参加了GMTC全球移动开发者大会,看到了一些优秀的团队在做的事情及以后的方向,得到了一些启示也有一些自己的想法,记录下来,分享给大家!

    用户2898788
  • 用php做个简单的日历

    存档: index.php 1 <html> 2 <head> 3 <title>日历</title> 4 <s...

    Angel_Kitty
  • TP添加管理和修改管理功能(简单实现)

    简单、
  • VS2008(C#)制作网页Tab标签切换方法(四)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main_Page.aspx.cs" Inher...

    阳光岛主
  • 论视频与三维图形的融合

    原标题:On the convergence of Video and 3D Graphics

    用户1324186
  • 代码实现WordPress点击进入随机一篇文章的方法

    在开始之前,你可以点击本站右侧“类Metro风格侧边栏”的中间那个图像,如果你够仔细的话,你会发现你的浏览器的地址栏里的url首先是 http://devewo...

    Jeff
  • 全局自动优化:C+机器学习库dlib引入自动调参算法

    选自dlib Blog 机器之心编译 参与:路雪、李泽南、蒋思源 dlib 是一个开源的 C++ 机器学习算法工具包,被广泛用于工业界和学术界,覆盖机器人、嵌入...

    企鹅号小编
  • 干货 | 数据挖掘入门必看10个问题

    NO.1 Data Mining 和统计分析有什么不同? 硬要去区分Data Mining和Statistics的差异其实是没有太大意义的。一般将之定义为Da...

    灯塔大数据

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动