Android通用业务弹窗管理方案PopLayerV2

前言

上回讲到了 业务弹窗管理的Dialog形式 有兴趣的同学 可以点击这里去往上一篇文章了解回顾一下

这回的PoplayerV2版本是在此前Dialog基础上拓展了一部分同学关心的透明webview弹窗实践效果

春节几天假期加上上班休息的时间一点点的码总算跟上计划的进度了

这里是此项目的Github地址，

所有库和DEMO均已开源,需要的可以看看,别忘了点个Star哦,谢谢！！！

好了,接下来开始进入正题

本文着重介绍于 透明webview的弹窗效果与管理

让我们来看看Dialog和WebView同时应用于我们的弹窗管理方案会迸发出怎么样的花火吧！

Webview策略拓展

在项目开始之初就已经打算 将类不同但在意义上为弹窗的对应不同的策略进行扩展,

Webview在Poplayer中的扩展形式为WebViewLayerStrategyImpl,

关于Webview的内容很多,多到足够写成一份单独的文章了 关于webview的配置,一些前任跨过的深坑,如何设计一个优雅健壮的androidWebview 这里可以推荐大家看

基于考拉电商平台的WebView实践

分析的很全面 在实现时考虑的方面很广 看完之后收益匪浅的一篇博文

再说框架本身, Poplayer内置对Webview的支持 并且对Webview进行了一系列配置 包括 Websetting Chromeclient Webclient 当然用户可以自定义这些配置已满足其独特的业务功能，这里推荐用户实现自定义配置时 继承Poplayer内置的配置组件 已满足Poplayer的功能运转

当然,单单的webview支持是不足以满足我们繁杂的业务的

Poplayer为您提供了多种Webview策略下的功能拓展：

1.统一Webview情形下的触摸监听

如下图 全屏透明webview总是存在web控件和原生控件的异同

Poplayer 将其划分为内部区域与外部区域(实体与空心) 能统一大部分的弹窗触摸反馈, 用户可以实现此接口来自定义不同种类弹窗的触摸之后的效果

/**
 *  弹窗的触摸机制 统一  分为实体区域 和 外围区域 触摸时的事件收发可以自定义
 */
public interface LayerTouchSystem {
    //触摸到外部区域
    void onTouchOutSideArea(IPop iPop);
    //触摸到内部区域
    void onTouchSolidArea(IPop iPop);
}
复制代码

Poplayer已经默认实现了Webview弹窗种类下的触摸效果

通常情况下全屏Webview会拦截触摸事件 对于弹窗来说他只需一小部分为其触摸区域 其他区域的点击需要下发事件到Native,下面是触摸事件的简单分析

这里关键点在于onTouchEvent的处理 Webview本身是拦截事件的 为此我们需要一个标识-什么时候需要拦截？

这里贴上Poplayer是如何处理的

 @Override
    public boolean onTouch(View v, MotionEvent event) {
    
        int alpha=0;
        //每一次触摸生成bitmap
        Bitmap bitmap= PopUtils.getBitmapFromView(this);
        //获取触摸点的ARGB的alpha值 将位图回收
        if (null != bitmap) {
            int pixel = bitmap.getPixel((int)event.getX(), (int)event.getY());
            alpha = Color.alpha(pixel);
            bitmap.recycle();
        }

        if(alpha==255){//实体
            layerTouchSystemImpl.onTouchSolidArea(this);
        }else {
            layerTouchSystemImpl.onTouchOutSideArea(this);
        }
        return false;
    }
复制代码

首先设置onTouchListenr的监听

每一次触摸时我会生成当前点击像素的位图拿到当前点击的点的透明度

之后回收位图 根据透明度调用事先设置的回调即可

事件分发到onTouchEvent即可根据回调的状态 设置拦截还是分发事件给native

PS： 考虑到业务场景的不同 定制程度比较高的应用 建议实现属于自己的扩展

(这里存在的问题是动态特效弹窗详情下,触摸会出现卡顿,各位大佬如果有更好的方案，请在评论区留下您宝贵的建议)

2.默认内置JS原生交互方式

/**
 * 混合开发管理 用户可自定义
 */
public interface HybirdManager {

    //注入JSBridge 时机在onreceivetitle
    void injectJsBridge(WebView webView,String jsName);

    //调用本地提供的基础服务 时机 1.jsprompt 2.post请求 3.原生 4.shouldOverrideUrlLoading
    void invokeAppServices(String instruction) ;

    //加入JS中android本地对象 时机webview初始化
    void addUpJavaNativeJSInterface(WebView webView, String windowObjName);

}
复制代码

对于Webview弹窗来说与JS的交互是不可缺少的,市面上有许多与JS交互的框架,Android同样有着原生支持,Poplayer支持用户自定义与弹窗交互的方式,也同样提供了基于JSBridge和原生的默认交互实现,可根据业务与喜好择一使用

这里为了说明方便将下文的交互概念稍微统一

原生调H5为提供基础扩展,同理H5调原生为调用基础服务

Poplayer中提供了默认的基础服务组件 PopWebViewService

主要包含弹窗 显示和消失等基本功能 和适合各个项目的统一路由服务

当网页显示的时候 我们可以在web调试器console中看到DOM对象的属性

PS: 这里的路由 JS传的是调用客户端服务的基础协议 这个协议由jsbridge内部形成 类似结构router://type=xxx?value=yyy,是由用户根据其业务决定的

内置JSbridge

框架中已经内置了Jsbridge,这里就不贴出代码一一说明了

简单的放一张原理图阐述双端的交互机制

注入时机

Poplayer在这里采取在加载完头部标题时注入的机制

 @Override
    public void onReceivedTitle(WebView view, String title) {
        //注入JSBridge的时机
        if(mHybirdImpl!=null){
            mHybirdImpl.injectJsBridge(view,jsBridgeName);
        }
        super.onReceivedTitle(view, title);
    }
复制代码

根据考拉团队的做法

通过设置加载阈值 在监听WebViewClient.onProgressChanged()函数时根据进度来注入也是可行的

回调服务时机

考虑到现今WebView的回调特点, Poplayer尽可能全面的在四种方案回调了基础服务接口 并在下面分析了各自的优缺点,用户可择其使用

1.JsPrompt

侵入WebChromeClient.onJsPrompt(webview, url, message, defaultValue, result)实现通信。

优点 返回值类型多样 消息长度上限高

缺点 可能需要处理弹窗问题

2.拦截JS Post请求

优点 通过请求来做操作 可以进行鉴权加密 提高安全性

缺点 请求体body里的内容android端无法接收到(IOS是可以拿到的)

3.Native函数也接收回调

优点 使用方便 管理方便

缺点 容易被反编译破解 拿到服务信息

4.ShouldOverrideUrlLoading拦截跳转

优点 前端用方便 location.href即可

缺点 有些机型此函数是无法生效的

最终回调服务都通往HybirdManager接口的invokeAppServices函数,回收到命令字符串

 public void invokeAppServices(String instruction) {
         //收到字符串格式的命令分为两种类型1.路由
        Uri uri=Uri.parse(instruction);
        if(uri.getscheme().equals(routerScheme)){
            doRouter(instruction);
            return;
        }
        //2.jsbridge中取出的 函数体调用式JSON
        //类似{"invokeId":"name_2_1549953808581","methodName":"name","methodParams":"123"}
        //此函数需要解析此json调用基础服务对象的对应方法
        doInvokePopWebviewService(instruction);
 }
复制代码

3.配置了弹窗管理Callback 方便用户监听弹窗管理过程

public interface PopCallback {

    //弹窗已经存在于队列中
    void onPopExisted(int queueSize);

    //弹窗不在活动时间内
    void onPopOutOfDate();

    //弹窗已经显示了最大个数
    void onPopShowMaxCount();

    //弹窗显示成功回调
    void onPopShowSuccess();

    //弹窗延迟消失回调
    void onPopDelayDismiss();

}
复制代码

弹窗效果预览

JS交互效果预览

因为是手机录的屏 依次按顺序发送命令 最终回调invokeService里显示弹窗

特效展示(红包雨)

关于项目

POPLAYER

一个通用的Android端弹窗管理框架,内部维护弹窗优先级队列 具备弹窗管理扩展功能 整合Dialog,PoupoWindow,悬浮Widget,透明Webview,Toast,SnackBar,无需再为繁琐的业务弹窗逻辑所困扰

具体如何使用 可以去github.com/MrCodeSnipe…阅读下面的使用说明文档

您也可以下载Demo体验一番 如有问题 可以在Github上打开Issue或在简书评论或者私密

V1方案

版本号	LOG	进度更新
V1.0.0	项目开源,完成弹窗管理与Dialog形式扩展	Dialog策略扩展完成
V1.0.1	修复Dialog策略无法获取dialog实体bug	Dialog策略优化
V1.0.2	修复activity摧毁造成的弹窗异常 bug	Dialog策略优化
V1.0.3	优化了弹窗的使用更加方便快捷	框架使用优化

V2方案

版本号	LOG	进度更新
V2.0.0	正式加入透明Webview弹窗策略扩展	透明Webview策略扩展完成

接下来的计划

结束了Webview的扩展 后期会对框架进行进一步优化

包括JSBridge功能的封装,更加灵活的配置Webview等 也请感兴趣的同学 给我些建议

新的一年也请多多指教！！！

其他类型的弹窗也会陆续更新 希望能提供给大家一个较为全面的应对各种业务需求的弹窗管理框架

---

Hello 我叫lalala,如果您喜欢我的文章,可以去我的Github给个Star我就很开心啦!!!

Github:github.com/MrCodeSnipe…

--End