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

iPhone上的默认微调器看起来比Android上好.看起来至少有一个Android应用程序(UrbanSpoon)能够复制这个控件,它很棒:http://www.urbanspoon.com/android

任何人对如何创建这个有任何想法？代码会有所帮助.

如果您不需要对轨迹球的支持,那么它将需要的是WebView以及一些现有JavaScript的一些小调整,这些JavaScript模仿Apple的UIPickerView来创建这样的应用程序.

Fancy Spinner Image http://i47.tinypic.com/aymyjc.jpg

大部分的努力工作都是由Matteo Spinelli完成的,所以首先下载他的代码,然后将这些更改应用到spinningwheel.js.他的代码想要通过取消和完成按钮从屏幕底部弹出选择器,所以我们需要修改几行来消除这种行为.

--- 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 = '
Cancel
Done
';
+       div.innerHTML = '
';

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

另外,index.html他提供的并不是你想要的,所以用这个替换它然后将html,css,js和png文件复制到项目的assets目录中.

创建一个在WebView中启用JavaScript的Activity,并为其返回选择的回调.

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的高度设置得恰当.