Create custom picker control - titanium

Question

See screenshot of custom picker:
I know there isn't a way to style the picker control in Titanium. This picker only needs to work on iOS (iPad only). I was thinking I could hack the TableView control to use instead of the picker to achieve the style desired. Is that reasonable? How would I snap the TableViewRows so one is always in the center like seen in typical picker controls?

Answer 1

that's a tough one i would say you just only need views and labels and the swipe event (you can recognize if some one swipe up and down ) and just changes the labels. you can do this with a callback function i hope this code will help you (we have created a custom picker with this code)
using alloy
XML
<View id="numOfIntrusionsPickerContainer" class="compositeWrapperPicker noMargins" >
<View id="numOfIntrusionsButtonContainer" class="horizontalWrapper"></View>
CSS
".compositeWrapperPicker" : {
height: Ti.UI.SIZE,
layout: "composite",
width:Ti.UI.SIZE
},
".horizontalWrapper" : {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
layout: "horizontal"
},
JS
// INSTANTIATION
var args = arguments[0] || {};
var widthValue = 120;
var pickerEnabled = true;
if(args.width != null){
widthValue = args.width;
}
if(args.isEnabled != null){
pickerEnabled = args.isEnabled;
}
// STYLING
// ADDITIONS
// pressed arg can be: true,false,null. false & null are equal
// true = 'yes' is Pressed at creation, false/null = 'no' is pressed
var btn_main = Ti.UI.createButton({
top: 5,
bottom: 0,
left:0,
right:5,
height: 45,
enabled: pickerEnabled,
width: widthValue,
borderRadius: 5,
backgroundImage: "/images/bttn_gray_flex.png",
backgroundSelectedImage : "/images/bttn_gray_press_flex.png",
backgroundFocusedImage : "/images/bttn_gray_press_flex.png"
});
var picker_divider = Ti.UI.createImageView({
right: 43,
bottom:2,
touchEnable:false,
focusable:false,
image: "/images/Divider_picker.png"
});
var picker_arrows = Ti.UI.createImageView({
right: 16,
top: 17,
touchEnabled: false,
focusable: false,
image: "/images/bttn_selector_arrow.png"
});
$.pickerContainer.add(btn_main);
$.pickerContainer.add(picker_divider);
$.pickerContainer.add(picker_arrows);
// CODE
// LISTENERS
if(args.callBack != null){
btn_main.addEventListener("click",function(_event){
args.callBack(_event);
});
}