android - minsdkversion - phonegap app

¿Cómo puedo superponer una vista nativa sobre CordovaWebView de PhoneGap en Android?

Question

Estoy creando un complemento de Phonegap que debe representar una vista de interfaz de usuario nativa sobre la vista web que proporciona PhoneGap. En iOS esto es muy simple, solo crea la vista y agrégala al scrollView de webGap webView. Esto representará el control sobre la webView y le permitirá desplazarse con el contenido HTML (tenga en cuenta que este ejemplo utiliza un UIButton, pero lo aplicaré a un control de UI personalizado):

-(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];
}

He intentado hacer algo más o menos equivalente en Android, pero no he tenido éxito. Aquí está mi intento más reciente:

@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();
}

¿Cómo puedo lograr esto en Android?

Answer 1

¿Has tratado de ver el orden de tus puntos de vista? Tal vez se haya superpuesto en tu webview

// ocultar webview
//webview.setVisibility(View.GONE); // para probar si aparece la nueva vista
webview.setZOrderOnTop (true);

// muestra la nueva vista myView.setVisibility (View.VISIBLE);

myView.bringToFront ();

Asumiré que está 100% seguro de que esta línea obtiene un padre válido al que puede agregar una vista.

FrameLayout frameLayout = (FrameLayout) webView.getParent (). GetParent ();

Answer 2

Así que paso un tiempo en esto, mi solución tiene varias partes:

• Tienes tu CordovaWebView en tu diseño XML
• Tu actividad extiende la actividad cordova.

• Anula algunos métodos:

  @Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.layout_page);
  super.init();
  loadUrl("file://" + getFilesDir()+"index.html");
  
  ....and other code you like...
  }
  
  
   @Override
      protected CordovaWebView makeWebView() {
          SystemWebViewEngine systemWebViewEngine =
          new SystemWebViewEngine((SystemWebView) findViewById(R.id.cordovaWebView));
  return new CordovaWebViewImpl(systemWebViewEngine);
      }
  
      @Override
      protected void createViews() {
  //must override this, otherwise crash
  if (preferences.contains("BackgroundColor")) {
      int backgroundColor = preferences.getInteger("BackgroundColor", Color.BLACK);
      // Background of activity:
      appView.getView().setBackgroundColor(backgroundColor);
  }
          appView.getView().requestFocusFromTouch();
      }

Entonces, makeWebView () es la parte clave, donde reemplaza el método CordovaActivity para devolver su propia instancia de CordovaWebView desde el XML.

El método createViews () también debe ser anulado , ya que si verifica el código de CordovaActivity, existe un setContentView (appView.getView ()), que de lo contrario provocará el bloqueo. Usted se asegura de que cuando anule la eliminación de esa parte.

Finalmente el xml (no todo el contenido):

    <!-- The main content view -->
    <org.apache.cordova.engine.SystemWebView
    android:id="@+id/cordovaWebView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Answer 3

Con Cordova Android 4.0.2, pude agregar una vista en la parte superior de la vista web, como esta:

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);
    }
}

Parece que la interfaz de CordovaWebView ha cambiado recientemente, por lo que es posible que esto no funcione con versiones anteriores. Para este ejemplo, también deberá agregar <param name="onload" value="true" /> a la función en su plugin.xml para que se llame a 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>

Esto no se desplaza con la vista web como mencionó iOS, pero para mi proyecto no lo necesitaba.