【问题标题】: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 可能会有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多