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

问题描述

iPhone 上的默认微调器看起来比 Android 好很多.看起来至少有一个 Android 应用程序 (UrbanSpoon) 能够复制此控件，而且非常棒:

Matteo Spinelli 已经完成了大部分的艰苦工作，所以从 下载他的代码，然后将这些更改应用到 spinningwheel.js.他的代码想要从屏幕底部弹出带有取消和完成按钮的选择器，因此我们需要修改几行来消除这种行为.

--- spinwheel.js.orig 2010-05-26 00:17:00.411954051 -0700+++ spinwheel.js 2010-05-26 00:16:32.319010720 -0700@@ -67,12 +67,10 @@onOrientationChange: 函数 (e) {window.scrollTo(0, 0);- this.swWrapper.style.top = window.innerHeight + window.pageYOffset + 'px';this.calculateSlotsWidth();},onScroll: 功能 (e) {- this.swWrapper.style.top = window.innerHeight + window.pageYOffset + 'px';},锁屏:功能(e){@@ -113,9 +111,9 @@//创建 Spinning Wheel 主要包装器div = document.createElement('div');div.id = 'sw-wrapper';- div.style.top = window.innerHeight + window.pageYOffset + 'px';//将 SW 放在实际的查看屏幕上+ div.style.top = 0;div.style.webkitTransitionProperty = '-webkit-transform';- div.innerHTML = '
取消
';+ div.innerHTML = '
<div id="sw-frame"></' + 'div>';document.body.appendChild(div);@@ -164,8 +162,6 @@window.addEventListener('scroll', this, true);//在页面滚动时重新定位 SW//取消/完成按钮事件- document.getElementById('sw-cancel').addEventListener('touchstart', this, false);- document.getElementById('sw-done').addEventListener('touchstart', this, false);//添加滚动到插槽this.swFrame.addEventListener('touchstart', this, false);@@ -174,9 +170,6 @@打开:函数(){this.create();- this.swWrapper.style.webkitTransitionTimingFunction = '缓出';- 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目录下项目.

创建一个 Activity，它在 WebView 中启用 JavaScript 并具有回调以返回选择.

public class FancySpinner extends Activity {私有 WebView webView；@覆盖public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);((按钮) findViewById(R.id.GetSelectedTimeButton)).setOnClickListener(new OnClickListener() {@覆盖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");}私有类 AndroidBridge {公共无效发送结果(最终字符串参数){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: '上午', 2: '下午'});");webView.loadUrl("javascript:SpinningWheel.open();");}}}

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

Default spinners on the iPhone look a lot better than on Android. It looks like at least one Android app (UrbanSpoon) has been able to replicate this control, and it's awesome: http://www.urbanspoon.com/android

Anyone have any ideas on how to create this? Code would be helpful.

解决方案

If you don't need support for the trackball, then all it will take is WebView along with some minor tweaks to some existing JavaScript that impersonates Apple's UIPickerView to create applications like this.

A majority of the hard work has been done by Matteo Spinelli so start by downloading his code and then apply these changes to spinningwheel.js. His code wants to pop up the picker from the bottom of the screen with cancel and done buttons so we need to modify a few lines to eliminate this behavior.

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

Additionally, the index.html he provides isn't exactly what you want so replace it with this one and then copy the html, css, js, and png files into the assets directory of your project.

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

Create an Activity that enables JavaScript in a WebView and has callbacks for it to return the selection.

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

Finally, modify your layout so has a WebView with its height set appropriately.

<?

这篇关于我们如何在 android 中创建类似 iPhone 的微调器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！