我们如何在android中创建类似iPhone的spinners？

iPhone上的默认旋转器比Android上看起来好很多。它看起来像至少有一个Android应用程序（UrbanSpoon）已能够复制这种控制，它很棒：http://www.urbanspoon.com/android 我们如何在android中创建类似iPhone的spinners？

任何人有任何想法如何创建此？代码会有帮助。

来源

2010-05-25 greg7gkb

我建议你赏金，如果这对你很重要。或者，如果你在需要它的公司工作，请联系urbanspoon，看看你是否可以从他们那里购买这个小部件。 – 2010-05-26 00:28:05

我认为这是你要找的东西： http://code.google.com/p/android-wheel/ – Albin 2011-03-13 15:57:50

如果我正确理解你说的话，你可以试试 http://w2davids.wordpress.com/2010/09/28/advanced-android-ui-wheelpicker/ – pengwang 2010-10-09 06:28:30

如果你不需要对轨迹球的支持，那么只需要WebView以及一些现有的JavaScript that impersonates Apple's UIPickerView的小调整来创建这样的应用程序。

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

大多数的辛勤工作已经由利玛窦斯皮内利这样做的downloading his code开始，然后将这些更改应用到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 = '<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);

此外，他还提供了index.html不正是你想要所以这一个替换它，然后将HTML，CSS，JS和PNG文件复制到项目的资产目录。

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

创建一个活动，该活动在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>

来源

2010-05-26 07:45:35

哇，很好的答案。谢谢蒂姆！ – greg7gkb 2010-05-27 08:02:55

车轮不旋转！您可能想要修改您的javascript代码 – Tawani 2010-06-24 15:07:27

@Tawani我不确定它为什么不适合您。在Android Browser应用程序中查看[Matteo的演示页面]（http://cubiq.org/dropbox/sw/）时，您应该看看您的触摸事件是否会导致轮子旋转。 – 2010-06-25 02:04:15

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

来源

2010-05-25 23:42:40

我不认为这是正确的。如果您使用小部件，它实际上更像是三个ListView一起推送。只是想知道如何做到这一点...... – greg7gkb 2010-05-26 01:31:08

是的，对不起，这就是我的意思。每个单独的微调器都是一个ListView，所以图片有3个。 – 2010-05-26 16:39:54

我们如何在android中创建类似iPhone的spinners？

回答

相关问题