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的源码实现，欢迎持续关注！
腾讯云开发者
