preface

Last time we talked about the Dialog form of business popover management so if you’re interested you can go to the previous article and review it

This time, version V2 expands the practice effect of transparent Webview popover on the basis of the previous Dialog

The Spring Festival holiday and the rest of the time to work a little bit of code finally keep up with the schedule

Here’s the Github address for this project,

All libraries and DEMO have been open source, need to have a look, don’t forget to click a Star oh, thank you!!

All right, let’s get down to business

This paper focuses on the popover effect and management of transparent WebView

Let’s see what happens when Dialog and WebView are used together in our popover management scheme.

Webview strategy expansion

At the beginning of the project, we had planned to extend the corresponding policies of different classes but in the sense of popover,

The extended form of the Webview is a WebViewLayerStrategyImpl,

There’s a lot of Webview stuff out there, enough to write a whole article about Webview configuration, some of the pitfalls that predecessors have crossed, how to design an elegant and robust androidWebview

WebView practice based on Kaola e-commerce platform

The analysis is very comprehensive in the implementation of the consideration of a wide range of benefits after reading a blog post bandits shallow

As for the framework itself, there’s built-in support for Webview and there’s a whole bunch of configurations for the Webview including Websetting, Chromeclient, Webclient and of course the user can customize those configurations to meet their unique business functions, It is recommended that users inherit the built-in configuration components when implementing custom configuration

Of course, webView support alone is not enough to satisfy our complex business

The framework provides you with a variety of Webview strategy function expansion:

1. Touch monitoring under unified Webview

A full-screen transparent Webview always has similarities and differences between Web controls and native controls

The framework divides it into internal and external areas (solid and hollow), which can unify most of the popover touch feedback. Users can realize the effect of the interface after defining different kinds of popover touch

/** * The touch mechanism of popover is divided into the physical area and the peripheral area. The event sending and receiving can be customized */
public interface LayerTouchSystem {
    // Touch the outer area
    void onTouchOutSideArea(IPop iPop);
    // Touch the inner region
    void onTouchSolidArea(IPop iPop);
}
Copy the code

Touch effects under Webview popovers are implemented by default

Normally, a full-screen Webview will intercept touch events. For pop-ups, it only needs a small part of its touch area. Other areas of click need to send events to Native

The key point here is that the handling of onTouchEvent the Webview itself intercepts the event and for that we need an identifier – when do we need to intercept?

How to deal with the framing here

 @Override
    public boolean onTouch(View v, MotionEvent event) {
    
        int alpha=0;
        // Each touch generates a bitmap
        Bitmap bitmap= PopUtils.getBitmapFromView(this);
        // Get the alpha value of the ARGB of the touch point to recycle the bitmap
        if (null! = bitmap) {int pixel = bitmap.getPixel((int)event.getX(), (int)event.getY());
            alpha = Color.alpha(pixel);
            bitmap.recycle();
        }

        if(alpha==255) {/ / entity
            layerTouchSystemImpl.onTouchSolidArea(this);
        }else {
            layerTouchSystemImpl.onTouchOutSideArea(this);
        }
        return false;
    }
Copy the code

First, set the onTouchListenr listening

For each touch I generate a bitmap of the currently clicked pixel to get the transparency of the currently clicked point

Then reclaim the bitmap and call the preset callback based on transparency

Event distribution to onTouchEvent can set whether to intercept or send the event to Native depending on the state of the callback

PS: You are advised to implement your own extensions for applications with high degree of customization in consideration of different service scenarios

(The problem here is that under the dynamic effects popup details, the touch will be stuck. If you have a better solution, please leave your valuable suggestions in the comments section.)

2. Default built-in JS native interaction mode

/** * Mixed development management can be customized */
public interface HybirdManager {

    // Inject JSBridge at onReceiveTitle
    void injectJsBridge(WebView webView,String jsName);

    Jsprompt 2. Post request 3. 4 native shouldOverrideUrlLoading
    void invokeAppServices(String instruction) ;

    // Add android native object to JS when webView initialization
    void addUpJavaNativeJSInterface(WebView webView, String windowObjName);

}
Copy the code

For Webview popover, interaction with JS is indispensable. There are many frameworks on the market for interaction with JS. Android also has native support, which supports user-defined interaction with popover, and also provides default interaction implementation based on JSBridge and native

The following concepts of interaction are somewhat unified for illustrative purposes

The H5 native tone provides the base extension, and the H5 native tone calls the base service

The default base service component PopWebViewService is provided in

It mainly contains basic functions such as popup display and disappear and unified routing service suitable for each project

We can see the DOM object properties in the Web debugger Console when the web page is displayed

Router ://type= XXX? Router ://type= XXX? Value = YYY is determined by users based on their services

Built-in JSbridge

Jsbridge is already built into the framework, so I won’t post the code here

A simple schematic illustration illustrates the interaction between the two ends

Injection timing

Here the framework adopts the mechanism of injection after the header header is loaded

 @Override
    public void onReceivedTitle(WebView view, String title) {
        // When to inject JSBridge
        if(mHybirdImpl! =null){
            mHybirdImpl.injectJsBridge(view,jsBridgeName);
        }
        super.onReceivedTitle(view, title);
    }
Copy the code

According to the koala team

By setting the load threshold In listening WebViewClient. OnProgressChanged () function when injection is feasible according to the schedule

Callback service timing

Considering the callback characteristics of WebView today, the basic service interface is called back in four schemes as comprehensively as possible, and the advantages and disadvantages of each scheme are analyzed below, so that users can choose to use them

1.JsPrompt

Intrusion WebChromeClient. OnJsPrompt (webview, url, message, defaultValue, result) to realize communication.

Advantages Multiple return value types High upper limit of message length

Disadvantages may require dealing with popovers

2. Intercept JS Post requests

Advantages Performing operations based on requests enables authentication and encryption to improve security

Disadvantages: The body of the request cannot be received by Android (IOS can get it)

3.Native functions also receive callbacks

Advantages Easy to use and easy to manage

Disadvantages are easy to decompile crack to get service information

4. ShouldOverrideUrlLoading intercept jump

The advantage front end is convenient location.href

Disadvantages Some models this function does not take effect

The final callback service goes to the invokeAppServices function of the HybirdManager interface, which is recycled into the command string

 public void invokeAppServices(String instruction) {
         The commands received in string format are classified into two types: 1. Route
        Uri uri=Uri.parse(instruction);
        if(uri.getscheme().equals(routerScheme)){
            doRouter(instruction);
        }else{
        //2. Function body call JSON from jsbridge
        / / similar to {" invokeId ":" name_2_1549953808581 ", "methodName" : "name", "methodParams" : "123"}
        // This function needs to parse the corresponding method of the underlying service object for this JSON calldoInvokePopWebviewService(instruction); }}Copy the code

3. The popover management Callback is configured to facilitate users to monitor the popover management process

public interface PopCallback {

    // The popover already exists in the queue
    void onPopExisted(int queueSize);

    // The popover is not active
    void onPopOutOfDate(a);

    // The popup window already shows the maximum number
    void onPopShowMaxCount(a);

    // The popup displays a successful callback
    void onPopShowSuccess(a);

    // Popover delay disappears callback
    void onPopDelayDismiss(a);

}
Copy the code

Popover effect preview

JS interactive preview

Because it is the screen of the phone recording, the commands are sent sequentially and finally the callback invokeService shows the popup window

Special Effects Display (Hongbao Rain)

About the project

PoupoLayer

A general Android side popup management framework, internal maintenance popup priority queue with popup management extension function integration Dialog,PoupoWindow, suspension Widget, transparent Webview,Toast,SnackBar, no longer need to be confused by cumbersome business popup logic

You can go to github.com/MrCodeSnipe… Read the instructions below

You can also download the Demo and try it out. If you have any questions, you can open an Issue on Github or leave a comment in the nuggets section or in private

V1 scheme

The version number LOG Progress update
V1.0.0 Open source project, complete popover management and Dialog form expansion Dialog policy expansion completed
V1.0.1 Fixed bug where Dialog policy could not get Dialog entities Dialog strategy optimization
V1.0.2 Fixed pop-up bug caused by activity destruction Dialog strategy optimization
V1.0.3 Optimized the use of popover more convenient and fast Optimization of frame usage

V2 scheme

The version number LOG Progress update
V2.0.0 Transparent Webview popover policy extension officially added Transparent Webview policy extension completed

What’s next

The framework will be further optimized after the Webview extension

Including JSBridge function encapsulation, more flexible configuration of Webview, please also interested students to give me some suggestions

New Year also please a lot of advice!!

Other types of popovers will also be updated in succession, hoping to provide you with a more comprehensive popover management framework to meet various business needs

Hello, my name is Lalala, if you like my article, you can go to my Github and give me a Star, I will be very happy!!

Github:github.com/MrCodeSnipe…

–End