带有原生控件的 Android PhoneGap答案

【问题标题】：Android PhoneGap with Native Controls带有原生控件的 Android PhoneGap
【发布时间】：2011-09-06 13:42:42
【问题描述】：

我正在尝试使用 PhoneGap 构建一个 Android 应用程序。

我需要能够使用 PhoneGap WebView (super.appView) 及其所有的 javascript 魔法，但我还需要在 WebView 周围显示一些本机 UI 控件。

这篇文章是提供解决方案的一部分Android PhoneGap Plugin, UI tabbar, resize WebView

有没有人设法使用原生 UI 实现 PhoneGap？

我也将使用 GestureOverlayView，但那是另一回事 ;)

【问题讨论】：

标签： android layout webview cordova

【解决方案1】：

答案：

super.onCreate(savedInstanceState);
//creates super.appView and calls setContentView(root) in DroidGap.java
init();
//just an empty LinearLayout
layoutId = R.layout.blank;
view = new LinearLayout(this);
setContentView(layoutId);
view.addView(your_component_here);
view.addView((View) appView.getParent()); //adds the PhoneGap browser at index 1
//accesses the browser at index 1. Tells browser to not fill view
view.getChildAt(1).setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1));
setContentView(view);

我很难告诉你这是如何工作的，我只能告诉你它确实如此，而且这都是我自己的工作。

将视图设置为不同的颜色也可以帮助您查看正在发生的事情....

view.setBackgroundColor(Color.BLUE);

使用迄今为止最新版本的 PhoneGap-1.0.0.jar。

【讨论】：

你能把结果的截图放上去吗？

【解决方案2】：

更简洁的方法：

super.onCreate(savedInstanceState);

// Create native view with UI controls.
View header = View.inflate(getContext(), R.layout.header, null);

// PhoneGaps WebView is located inside a LinearLayout.
// The protected (and therefore inherited) variable root
// references this LinearLayout. Add your native Views
// to this variable.
root.addView(header);

// Create WebView and add it automatically to the LinearLayout.
super.loadUrl("file:///android_asset/www/index.html");

【讨论】：

你也可以在 WebView 下添加原生组件？
是的，只需在 super.loadUrl("file:///android_asset/www/index.html"); 之后添加另一个视图与 root.addView(footer);
您使用的是哪个版本的 PhoneGap？
目前是 Phonegap (Cordova) 1.5 版。但计划更新到 1.6 版。如果 1.6 版无法再使用这种方法，我会更新我的帖子。
从 Phonegap (Cordova) 1.9 版开始，可以将 Cordova Webview 组件嵌入到本机应用程序中。见docs.phonegap.com/en/edge/…

【解决方案3】：

是的，您可以使用插件在 HTML 中嵌入原生控件。

使用插件从 HTML 页面调用包含原生视图的原生方法。

例如window.plugins.anatomyPlugin.showAudio();

我用它来展示原生的音频播放器设计。

来自 PhoneGap 的 guide 可能会有所帮助。

【讨论】：