Created
May 3, 2013 17:50
-
-
Save jabubuck/5511951 to your computer and use it in GitHub Desktop.
Sample project that creates a customizable picker from scrollable views, functionality needs tweaking slightly. Titanium Project, works for iOS.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//"THE BEER-WARE LICENSE": As long as you retain this notice you can do whatever you want with this stuff. | |
//If we meet some day, and you think this stuff is worth it, you can buy me a beer in return Jamie Buckley | |
var screenWidth = Ti.Platform.displayCaps.platformWidth; | |
var screenHeight = Ti.Platform.displayCaps.platformHeight; | |
var win = Ti.UI.createWindow({ | |
fullscreen: true, | |
width: screenWidth, | |
height: screenHeight, | |
backgroundColor: 'white' | |
}); | |
var pickerSelectedValue = '0'; | |
//Select Row Size | |
var rowSize = 30; | |
//Input the picker Data here | |
var picker1Data = ['Tea', 'Crumpets', 'Bacon', 'Chocolate', 'Cider', 'Cheese', '1', '2', '3', '4', '5']; | |
var pickerX = 0; | |
var pickerY = 0; | |
var pickerSelectedValue = '0'; | |
//Create the scrollView that will be the basis for our picker | |
var picker1 = Ti.UI.createScrollView({ | |
height: rowSize * 6, | |
width: (screenWidth * 0.3), | |
backgroundColor: 'black', | |
layout: 'vertical', | |
verticalBounce: false, | |
top: pickerY, | |
left: pickerX | |
}); | |
picker1.scrollTo(0, rowSize * 6); | |
//When the picker has finished being scrolled, snap to the nearest picker row | |
picker1.addEventListener('scroll', function(e){ | |
picker1.addEventListener('dragend', function(){ | |
if(e.y <= rowSize * 2 || e.y >= rowSize * 12){ | |
if(e.y <= rowSize * 2){ | |
picker1.scrollTo(0, rowSize * 2); | |
pickerSelectedValue = (rowSize * 2 / rowSize) + 2; | |
} | |
if(e.y >= rowSize * 12){ | |
picker1.scrollTo(0, rowSize * 12); | |
pickerSelectedValue = (rowSize * 12 / rowSize) + 2; | |
} | |
} | |
else{ | |
picker1.scrollTo(0, Math.floor(e.y / rowSize)*rowSize); | |
pickerSelectedValue = ((Math.floor(e.y / rowSize)*rowSize) / rowSize) + 2; | |
} | |
Ti.API.info(Math.floor(e.y / rowSize)*rowSize); | |
}); | |
}); | |
win.add(picker1); | |
//For creating picker labels | |
function newPickerItem(labelText){ | |
var PI = Ti.UI.createLabel({text: labelText, color: 'red', center: 0}); | |
return PI; | |
}; | |
//For creating picker views | |
function newPickerView(){ | |
var PV = Ti.UI.createView({height: rowSize, width: Ti.UI.FILL, backgroundColor: 'transparent'}); | |
return PV | |
} | |
blankArr = ['', '', '', '']; | |
pickerData2 = ['', '', '', '']; | |
var pickerData = blankArr.concat(picker1Data, pickerData2); | |
Ti.API.info(pickerData); | |
//Systematically add each item from the array as rows to the picker | |
for(var i = 0; i < pickerData.length; i++){ | |
newItem = newPickerItem(pickerData[i]); | |
newView = newPickerView(); | |
newView.add(newItem); | |
picker1.add(newView); | |
}; | |
//View that highlights the currently selected row | |
var selectedRow = Ti.UI.createView({ | |
top: rowSize * 2, | |
height: rowSize, | |
width: (screenWidth * 0.3), | |
backgroundColor: 'transparent', | |
borderColor: 'red', | |
borderRadius: 2, | |
borderWidth: 1, | |
touchEnabled: false, | |
left: 0 | |
}); | |
win.add(selectedRow); | |
//When pressed will return the currently selected value as an alert | |
var acceptButton = Ti.UI.createButton({ | |
title: 'Accept', | |
height: screenHeight * 0.1, | |
width: screenWidth, | |
bottom: 0 | |
}); | |
acceptButton.addEventListener('click', function(){ | |
alert(picker1Data[pickerSelectedValue]); | |
}); | |
win.add(acceptButton); | |
win.open(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment