По умолчанию прядильщики на iPhone выглядят намного лучше, чем на Android. Похоже, что хотя бы одно приложение для Android (UrbanSpoon) смогло реплицировать этот элемент управления, и это потрясающе: http://www.urbanspoon.com/androidКак мы можем создать iPhone-подобных прядильщиков в андроиде?
У кого-нибудь есть идеи о том, как его создать? Код был бы полезен.
Если вам не нужна поддержка трекбола, то все, что потребуется, это 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>
Создание деятельности, которая позволяет JavaScript в WebView и имеет обратные вызовы для ее возврата.
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>
Ничего себе, отличный ответ. Спасибо Тиму! – greg7gkb
Колесо не вращается! Возможно, вы захотите пересмотреть код javascript – Tawani
@Tawani Я не уверен, почему он не работает для вас. Возможно, вы увидите, что ваши сенсорные события заставляют колесо вращаться при просмотре демонстрационной страницы [Matteo] (http://cubiq.org/dropbox/sw/) в приложении Android Browser. –
На скриншоте, похоже, это просто просмотр списка с помощью специального стиля, чтобы он выглядел округлым. Что касается поведения, я не думаю, что это будет отличаться от ListView, где средний элемент считается выбранным значением.
Я не думаю, что это правильно. Если вы используете виджет, это больше похоже на три списка ListViews. Просто интересно о идеях, чтобы это произошло ... – greg7gkb
Да, извините, что я имел в виду. Каждый отдельный счетчик представляет собой ListView, так что изображение имеет 3 вместе. –
Предлагаю вам щедрость, если это так важно для вас. Или, если вы работаете в компании, которая нуждается в ней, свяжитесь с urbanspoon и посмотрите, можете ли вы купить у них виджет. –
Я думаю, что это именно то, что вы ищете: http://code.google.com/p/android-wheel/ – Albin
Если я правильно понимаю, что вы говорите, вы можете попробовать http://w2davids.wordpress.com/2010/09/28/advanced-android-ui-wheelpicker/ – pengwang