Los rotores predeterminados en el iPhone se ven mucho mejor que en Android. Parece que al menos una aplicación de Android (UrbanSpoon) ha podido replicar este control, y es impresionante: http://www.urbanspoon.com/android¿Cómo podemos crear marcadores tipo iPhone en Android?
¿Alguien tiene alguna idea sobre cómo crear esto? El código sería útil.
Si no necesita soporte para la rueda de desplazamiento, todo lo que necesitará es WebView junto con algunos ajustes menores a algunos existentes JavaScript that impersonates Apple's UIPickerView para crear aplicaciones como esta.
Fancy Spinner Image http://i47.tinypic.com/aymyjc.jpg
Una mayoría del trabajo duro se ha hecho por Matteo Spinelli así que empieza por downloading his code y luego aplicar estos cambios a spinningwheel.js. Su código quiere mostrar el seleccionador desde la parte inferior de la pantalla con los botones cancelar y listo, por lo que debemos modificar algunas líneas para eliminar este comportamiento.
--- spinningwheel.js.orig 2010-05-26 00:17:00.411954051 -0700
+++ spinningwheel.js 2010-05-26 00:16:32.319010720 -0700
@@ -67,12 +67,10 @@
onOrientationChange: function (e) {
window.scrollTo(0, 0);
- this.swWrapper.style.top = window.innerHeight + window.pageYOffset + 'px';
this.calculateSlotsWidth();
},
onScroll: function (e) {
- this.swWrapper.style.top = window.innerHeight + window.pageYOffset + 'px';
},
lockScreen: function (e) {
@@ -113,9 +111,9 @@
// Create the Spinning Wheel main wrapper
div = document.createElement('div');
div.id = 'sw-wrapper';
- div.style.top = window.innerHeight + window.pageYOffset + 'px'; // Place the SW down the actual viewing screen
+ div.style.top = 0;
div.style.webkitTransitionProperty = '-webkit-transform';
- div.innerHTML = '<div id="sw-header"><div id="sw-cancel">Cancel</' + 'div><div id="sw-done">Done</' + 'div></' + 'div><div id="sw-slots-wrapper"><div id="sw-slots"></' + 'div></' + 'div><div id="sw-frame"></' + 'div>';
+ div.innerHTML = '<div id="sw-slots-wrapper"><div id="sw-slots"></' + 'div></' + 'div><div id="sw-frame"></' + 'div>';
document.body.appendChild(div);
@@ -164,8 +162,6 @@
window.addEventListener('scroll', this, true); // Reposition SW on page scroll
// Cancel/Done buttons events
- document.getElementById('sw-cancel').addEventListener('touchstart', this, false);
- document.getElementById('sw-done').addEventListener('touchstart', this, false);
// Add scrolling to the slots
this.swFrame.addEventListener('touchstart', this, false);
@@ -174,9 +170,6 @@
open: function() {
this.create();
- this.swWrapper.style.webkitTransitionTimingFunction = 'ease-out';
- this.swWrapper.style.webkitTransitionDuration = '400ms';
- this.swWrapper.style.webkitTransform = 'translate3d(0, -260px, 0)';
},
@@ -191,8 +184,6 @@
this.swFrame.removeEventListener('touchstart', this, false);
- document.getElementById('sw-cancel').removeEventListener('touchstart', this, false);
- document.getElementById('sw-done').removeEventListener('touchstart', this, false);
document.removeEventListener('touchstart', this, false);
document.removeEventListener('touchmove', this, false);
Además, el index.html que proporciona no es exactamente lo que quieres para sustituirlo por éste y luego copiar el código HTML, CSS, JS, y los archivos PNG en el directorio activos de su proyecto.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="spinningwheel.css" type="text/css" media="all" />
<script type="text/javascript" src="spinningwheel.js?v=1.4"></script>
<title></title>
<script type="text/javascript">
function getData() {
var results = SpinningWheel.getSelectedValues();
window.android.sendResults(results.values.join(' ') );
}
function notifyAndroid() {
window.android.readyForJavascript('');
}
</script>
</head>
<body onload="javascript:notifyAndroid()"></body>
</html>
Crear una actividad que habilite JavaScript en una WebView y tenga devoluciones de llamada para que devuelva la selección.
public class FancySpinner extends Activity {
private WebView webView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
((Button) findViewById(R.id.GetSelectedTimeButton))
.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
webView.loadUrl("javascript:getData()");
}
});
webView = (WebView) findViewById(R.id.WebView01);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new AndroidBridge(), "android");
webView.setVerticalScrollBarEnabled(false);
webView.loadUrl("file:///android_asset/index.html");
}
private class AndroidBridge {
public void sendResults(final String arg) {
Toast.makeText(FancySpinner.this, arg, Toast.LENGTH_SHORT).show();
}
public void readyForJavascript(final String arg) {
webView.loadUrl("javascript:SpinningWheel.addSlot({ " +
"1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6," +
"7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12 });");
webView.loadUrl("javascript:SpinningWheel.addSlot({ " +
"1: 'AM', 2: 'PM'});");
webView.loadUrl("javascript:SpinningWheel.open();");
}
}
}
Por último, modificar su diseño por lo tanto tiene un WebView con su altura ajustado correctamente.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
<WebView
android:id="@+id/WebView01"
android:background="#77CC0000"
android:layout_height="215dp"
android:layout_width="fill_parent"
android:focusable="false" />
<Button
android:text="Read Selected Time"
android:id="@+id/GetSelectedTimeButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Guau, excelente respuesta. Gracias Tim! – greg7gkb
¡La rueda no gira! Es posible que desee revisar su código de JavaScript – Tawani
@Tawani No estoy seguro de por qué no funciona para usted. Tal vez debería ver si sus eventos táctiles hacen que la rueda gire cuando ve [la página de demostración de Matteo] (http://cubiq.org/dropbox/sw/) dentro de la aplicación del navegador Android. –
De la captura de pantalla, parece que es solo una vista de lista con un estilo especial para que se vea redondeada. En términos de comportamiento, no creo que sea diferente de un ListView donde el artículo medio se considera el valor seleccionado.
No creo que sea correcto. Si usa el widget, en realidad se parece más a tres ListViews juntos. Solo me pregunto sobre las ideas para que eso suceda ... – greg7gkb
Sí, lo siento, eso es lo que quise decir. Cada girador individual es un ListView, por lo que la imagen tiene 3 juntos. –
Sugiero que recompense esto si es tan importante para usted. O si trabaja en una empresa que lo necesita, contacte a urbanspoon y vea si puede comprar el widget de ellos. –
Creo que esto es lo que está buscando: http://code.google.com/p/android-wheel/ – Albin
Si entiendo correctamente lo que dice, puede probar http://w2davids.wordpress.com/2010/09/28/advanced-android-ui-wheelpicker/ – pengwang