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

时间 2019-11-07

标签 android 通用业务管理方案 poplayerv2 poplayerv 栏目 Android 繁體版

原文原文链接

前言

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

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

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

这里是此项目的Github地址，git

全部库和DEMO均已开源,须要的能够看看,别忘了点个Star哦,谢谢！！！github

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

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

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

Webview策略拓展

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

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);
        }else{
        //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