如何在Android中的PhoneGap的CordovaWebView上叠加本机视图？

Question

我正在构建一个phonegap插件,需要在PhoneGap提供的WebView上呈现本机UI视图.在iOS中,这非常简单,只需创建视图并将其添加到PhoneGap的webView的scrollView中.这将在webView上呈现控件并允许它与HTML内容一起滚动(请注意,此示例使用UIButton,但我将其应用于自定义UI控件):

-(void)createNativeControl:(CDVInvokedUrlCommand *)command
{
    NSDictionary* options = [command.arguments objectAtIndex:0];
    NSNumber* x = [options objectForKey:@"x"];
    NSNumber* y = [options objectForKey:@"y"];
    NSNumber* width = [options objectForKey:@"width"];
    NSNumber* height = [options objectForKey:@"height"];

    CGRect rect = CGRectMake([x floatValue], [y floatValue], [width floatValue], [height floatValue]);
    self._nativeControl = [UIButton buttonWithType:UIButtonTypeSystem];
    self._nativeControl.frame = rect;

    [self._nativeControl addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [self._nativeControl setTitle:@"Click me" forState:UIControlStateNormal];
    [self.webView.scrollView addSubview:self._nativeControl];

    CDVPluginResult* result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
    [self.commandDelegate sendPluginResult:result callbackId:command.callbackID];
}

我尝试过在Android中大致相同的东西,但没有成功.这是我最近的尝试:

@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    System.out.println(String.format("%s action called", action));

    if ("echo".equals(action)) {
        String message = args.optString(0);
        this.echo(message, callbackContext);
        return true;
    } else if ("createNativeControl".equals(action)) {
        this.createNativeControl(callbackContext);
        return true;
    }

    return false;
}

private void createNativeControl(CallbackContext callbackContext) {
    // Find the frame layout parent and place the control on top - theoretically
    // this should appear on TOP of the webView content since the TextView child is
    // added later
    FrameLayout frameLayout = (FrameLayout) webView.getParent().getParent();

    TextView view = new TextView(frameLayout.getContext());
    view.setText("Hello, Android!");
    view.setVisibility(View.VISIBLE);

    frameLayout.addView(view, 100,100);
    callbackContext.success();
}

我怎样才能在Android中实现这一目标？

Answer 1

使用Cordova Android 4.0.2,我可以在webview上添加一个视图,如下所示:

public class HVWMaps extends CordovaPlugin {

    @Override
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {

        FrameLayout layout = (FrameLayout) webView.getView().getParent();

        TextView textView = new TextView(layout.getContext());
        textView.setBackgroundColor(Color.BLUE);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(500, 500);
        params.setMargins(100, 100, 100, 100);
        textView.setLayoutParams(params);
        layout.addView(textView);
    }
}

CordovaWebView最近界面似乎发生了变化,因此这可能不适用于旧版本.对于此示例,您还需要<param name="onload" value="true" />在plugin.xml中添加该功能,以便initialize(..)调用:

<platform name="android">
    <config-file target="res/xml/config.xml" parent="/*">
        <feature name="YourPlugin" >
            <param name="android-package" value="com.your.plugin"/>
            <param name="onload" value="true" />
        </feature>
    </config-file>
</platform>

这不会像你提到的那样滚动webview,但对于我的项目,我不需要它.

Answer 2

您是否尝试过查看您的观点的顺序？也许它与你的网络视图重叠

//隐藏webview
//webview.setVisibility(View.GONE); //测试新视图是否出现
webview.setZOrderOnTop(true);

//显示新视图 myView.setVisibility(View.VISIBLE);

myView.bringToFront();

我假设您 100% 确定此行获得有效的父级，您可以添加视图。

FrameLayoutframeLayout = (FrameLayout) webView.getParent().getParent();