Skip to content

Instantly share code, notes, and snippets.

@jabubuck
Created May 3, 2013 17:50
Show Gist options
  • Save jabubuck/5511951 to your computer and use it in GitHub Desktop.
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.
//"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