titanium - Create custom picker control

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

这是一个艰难的，我会说你只需要视图和标签和滑动事件（你可以识别是否有人上下滑动）并且只需更改标签。您可以使用回调函数来执行此操作，希望此代码对您有所帮助（我们已使用此代码创建了一个自定义选择器）

使用合金

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);  
    });

}