我們如何在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？

回答

相關問題