我们如何在 android 中创建类似 iPhone 的微调器? [英] How can we create iPhone-like spinners in android?

查看：25
本文介绍了我们如何在 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目录下项目.

<头><meta http-equiv="Content-Type";内容=文本/html；字符集=utf-8"/><link rel="样式表";href="spinningwheel.css";类型=文本/css"；媒体=所有"/><script type="text/javascript";src=spinningwheel.js?v=1.4"></script><title></title><script type="text/javascript">函数 getData() {var 结果 = SpinningWheel.getSelectedValues();window.android.sendResults(results.values.join(''));}函数通知Android(){window.android.readyForJavascript('');}<body onload="javascript:notifyAndroid()"></body>

创建一个 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 的高度设置适当.

<线性布局xmlns:android=http://schemas.android.com/apk/res/android"机器人:方向=垂直"android:layout_width=fill_parent"android:layout_height=fill_parent"><文本视图android:layout_width=fill_parent"android:layout_height="wrap_content";android:text="@string/hello";/><网页视图android:id="@+id/WebView01";机器人:背景=#77CC0000"；android:layout_height=215dp"android:layout_width=fill_parent"android:focusable="false";/><按钮android:text="读取选定的时间";android:id="@+id/GetSelectedTimeButton";android:layout_width=fill_parent"android:layout_height="wrap_content";/></LinearLayout>

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.

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

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

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆