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	優化了彈窗的使用更加方便快捷	框架使用優化