如何在Android上覆蓋PhoneGap的CordovaWebView上的原生視圖？

我正在構建一個phonegap插件，它需要在PhoneGap提供的WebView之上呈現原生UI視圖。在iOS中，這非常簡單，只需創建視圖並將其添加到PhoneGap的webView的scrollView。這將使得在web視圖頂部的控制，並允許它與HTML內容滾動（請注意，這個例子使用的UIButton，但我會應用此爲自定義UI控件）：如何在Android上覆蓋PhoneGap的CordovaWebView上的原生視圖？

-(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中完成此操作？

來源

2013-10-15 Travis

你怎麼弄self.webView.scrollView？你宣佈了嗎？ –

-1

您是否試圖查看您的視圖的順序？也許這是重疊了你的WebView

//隱藏的WebView
//webview.setVisibility(View.GONE）; //測試是否出現新視圖
webview.setZOrderOnTop（true）;

//顯示新視圖myView.setVisibility（View.VISIBLE）;

myView.bringToFront（）;

我會說你100％確定這一行得到一個有效的父母，你可以添加一個視圖。

FrameLayout frameLayout =（FrameLayout） webView.getParent（）。getParent（）;

來源

2014-05-22 11:51:00 Sulfkain

隨着Android的科爾多瓦4.0.2，我可以添加在網頁視圖的頂視圖，就像這樣：

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>

正如你所提到的iOS做，但它不會與web視圖滾動我項目我並不需要它。

來源

2015-07-14 12:04:22 dwb

我剛剛在5.1.0上面試過了，我可以使用它 –

你也可以考慮滾動webview嗎？ – andreimarinescu

我有要求在某些事件上添加按鈕。當我在「execute」方法下執行這段代碼時，它會拋出異常說：..只有創建視圖的原始線程才能添加視圖。 –

所以我花了一些時間在這我自己，我的解決方案有多個部分：

你有你的CordovaWebView在佈局XML
你的活動來延長CordovaActivity

你重寫幾個方法：

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

所以makeWebView（）是關鍵部分，您可以在其中覆蓋CordovaActivity的方法以從XML返回您自己的CordovaWebView實例。因爲如果您檢查CordovaActivity代碼，會出現一個setContentView（appView.getView（）），否則會導致崩潰。您確定何時覆蓋您刪除該部分。

最後的XML（而不是全部內容）：

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

來源

2017-09-13 21:14:34 Karoly

如何在Android上覆蓋PhoneGap的CordovaWebView上的原生視圖？

回答

相關問題