Android PhoneGap con Native Controls

Question

Estoy intentando crear una aplicación de Android con PhoneGap.

Necesito poder usar PhoneGap WebView (super.appView) y toda su magia de javascript, pero también necesito mostrar algunos controles de UI nativos alrededor de WebView.

Este post va parte del camino a proporcionar una solución Android PhoneGap Plugin, UI tabbar, resize WebView

Alguien ha logrado implementar PhoneGap con una interfaz de usuario nativa?

También voy a estar usando un GestureOverlayView pero eso es otra historia;)

Answer 1

Respuesta:

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

que sería muy difícil de decir cómo funciona esto, todo lo que puedo decir es que lo hace, y es todo mi propio trabajo.

Configuración de la vista de un color diferente puede ayudar a ver lo que está pasando demasiado ....

view.setBackgroundColor(Color.BLUE); 

Trabajar con PhoneGap-1.0.0.jar la última versión hasta el momento.

Answer 2

Un enfoque más limpio:

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

Answer 3

Sí, puede incrustar controles nativos dentro de HTML utilizando el plugin.

Llame al método nativo que contiene su vista nativa desde la página HTML mediante el complemento.

p. Ej. window.plugins.anatomyPlugin.showAudio();

Utilizo esto para mostrar el diseño del reproductor de audio en nativo.

Esto guide de PhoneGap puede ser útil.