创建自定义选取器控件

Question

查看自定义选择器的屏幕截图：

我知道没有办法在Titanium中设置选择器控件的样式。此选择器只需在iOS（仅限iPad）上运行。我以为我可以破解TableView控件而不是选择器来实现所需的样式。这合理吗？我如何捕捉TableViewRows，以便总是在中心，就像在典型的选择器控件中看到的一样？

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

}