我们如何在android中创建类似iPhone的微调器？

iPhone上的默认微调器看起来比Android上的要好得多。看起来至少有一个安卓应用程序（UrbanSpoon）能够复制这个控件，而且非常棒：

---

有人对如何创造这个有什么想法吗？代码会很有帮助。

从屏幕截图上看，它只是一个列表视图，带有一些特殊的样式，使其看起来更圆。就行为而言，我认为它与将中间项视为选定值的ListView没有任何区别。

如果您不需要对轨迹球的支持，那么只需对现有的一些应用程序进行一些小的调整即可创建类似的应用程序

Matteo Spinelli已经完成了大部分艰苦的工作，所以从开始，然后将这些更改应用到

spinningwheel.js

。他的代码想用cancel和done按钮从屏幕底部弹出选择器，所以我们需要修改几行来消除这种行为

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

创建一个活动，该活动在WebView中启用JavaScript，并对其进行回调以返回选择

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

最后，修改布局，使WebView的高度设置适当

<?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>

如果这件事对你那么重要，我建议你悬赏。或者，如果你在一家需要它的公司工作，请联系urbanspoon，看看你是否可以从他们那里购买这个小部件。如果我正确理解你所说的，你可以试试。我认为这就是你想要的：我认为这不正确。如果您使用这个小部件，它实际上更像是三个被推到一起的列表视图。只是想知道如何让这一切发生……是的，对不起，这就是我的意思。每个单独的微调器都是一个列表视图，所以这张图片有3个。哇，答案很好。谢谢蒂姆！轮子没有转动！您可能需要修改javascript的版本code@Tawani我不知道为什么它对你不起作用。也许你应该看看当你在Android浏览器应用程序中查看时，你的触摸事件是否会导致轮子旋转。它在2.1中为我旋转，但不是1.6jon。你能给我这个代码吗，我无法运行它，谢谢wp19831014@gmail.com

<?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>