हम एंड्रॉइड में आईफोन जैसे स्पिनरों को कैसे बना सकते हैं?

आईफोन पर डिफ़ॉल्ट स्पिनर एंड्रॉइड की तुलना में काफी बेहतर दिखते हैं। ऐसा लगता है कि कम से कम एक एंड्रॉइड ऐप (शहरीस्पून) इस नियंत्रण को दोहराने में सक्षम है, और यह कमाल है: http://www.urbanspoon.com/android हम एंड्रॉइड में आईफोन जैसे स्पिनरों को कैसे बना सकते हैं?

किसी को भी इसे बनाने के तरीके पर कोई विचार है? कोड सहायक होगा।

स्रोत

2010-05-25 greg7gkb

मेरा सुझाव है कि यह आपके लिए महत्वपूर्ण है यदि आप यह महत्वपूर्ण हैं। या यदि आप ऐसी कंपनी में काम करते हैं जिसकी आवश्यकता है तो उसे अर्नस्पून से संपर्क करें और देखें कि क्या आप उनके द्वारा विजेट खरीद सकते हैं। –

मुझे लगता है कि आप यही देख रहे हैं: http://code.google.com/p/android-wheel/ – Albin

अगर मैं सही कहता हूं कि आप क्या कहते हैं, तो आप http://w2davids.wordpress.com पर आज़मा सकते हैं/2010/09/28/उन्नत-एंड्रॉइड-यूई-व्हीलपिकर/ – pengwang

यदि आपको ट्रैकबॉल के लिए समर्थन की आवश्यकता नहीं है, तो यह इस तरह के अनुप्रयोग बनाने के लिए कुछ मौजूदा JavaScript that impersonates Apple's UIPickerView पर कुछ मामूली tweaks के साथ WebView ले जाएगा।

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

कड़ी मेहनत के अधिकांश Matteo Spinelli द्वारा किया गया है ताकि 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 वह प्रदान करता है वास्तव में क्या आप चाहते हैं तो यह इस एक के साथ बदलें और फिर अपनी परियोजना की संपत्ति निर्देशिका में एचटीएमएल, सीएसएस, जे एस, और 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>

ऐसी गतिविधि बनाएं जो वेबव्यू में जावास्क्रिप्ट को सक्षम करे और चयन को वापस करने के लिए इसके लिए कॉलबैक हो।

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

अंत में, अपने लेआउट को संशोधित करें ताकि इसकी ऊंचाई सेट के साथ वेबव्यू उचित हो।

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

व्हील कताई नहीं है! आप अपने जावास्क्रिप्ट कोड – Tawani

@ टावानी को संशोधित करना चाहते हैं मुझे यकीन नहीं है कि यह आपके लिए क्यों काम नहीं कर रहा है। शायद आपको यह देखना चाहिए कि एंड्रॉइड ब्राउज़र एप्लिकेशन के भीतर [मैटियो का डेमो पेज] (http://cubiq.org/dropbox/sw/) देखते समय आपकी स्पर्श घटनाएं व्हील को स्पिन करने का कारण बनती हैं या नहीं। –

स्क्रीनशॉट से, ऐसा लगता है कि यह कुछ विशेष स्टाइल के साथ सिर्फ एक सूची दृश्य है जो इसे गोलाकार बनाने के लिए है। व्यवहार के संदर्भ में, मुझे नहीं लगता कि यह ListView से अलग होगा जहां मध्य आइटम को चयनित मान माना जाता है।

स्रोत

2010-05-25 23:42:40

मुझे नहीं लगता कि यह सही है। यदि आप विजेट का उपयोग करते हैं, तो यह वास्तव में एक साथ धक्का तीन सूची दृश्यों की तरह है। बस ऐसा करने के लिए विचारों के बारे में सोच रहा है ... – greg7gkb

हाँ, खेद है कि मेरा मतलब क्या था। प्रत्येक व्यक्तिगत स्पिनर एक सूची दृश्य है, ताकि तस्वीर 3 एक साथ हो। –

हम एंड्रॉइड में आईफोन जैसे स्पिनरों को कैसे बना सकते हैं?

उत्तर

संबंधित मुद्दे