更改微调器的图像

Question

在使用 Titanium 应用程序时，遇到了一种情况，我想更改 Spinner 的图像（即 Titanium 中的 Picker）

使用 Picker 的对象，我可以创建微调器和操作数据，但找不到任何改变微调器默认图像的机制

想这样做replace-picker-with-button

还有什么想法吗？

Answer 1

您可以通过 backgroundImage 属性直接更改微调器的图像。

举例

backgroundImage: '/images/dropdown.png.

它仅适用于 Android，不适用于 iPhone。

因此，如果您想为 Ios 和 Android 制作相同的 UI，那么您可以遵循以下技巧。

这是您可以用来创建和显示 Picker 的全局方法。

/*
pickerData: is the array of the values which you want to display in the picker
funName: is the callback function which will be called when user will select the row from picker. this function will have two parameters first will be selected row's text and second is the index of the selected row
title: is the title of the picker
index: is the default selected index in the picker
*/

function showPicker(pickerData, funName, title, index) {
    if (title == undefined || title == "") {
        title = "";
    }
    if (pickerData == undefined || pickerData == null) {
        pickerData = [];
    }

    index = index || 0;

    if (pickerData.length <= index || index < 0) {
        index = 0;
    }

    var selectedCategory = pickerData[0];
    var win = Ti.UI.createWindow({
        backgroundColor : 'transparent',
    });


    //Check weather the Os is IOs or Android
    //globals.isIos is the parameter which is indicating that current OS is IOs or not?
    if (globals.isIos) {

        var picker = Ti.UI.createPicker({
            selectionIndicator : true,
            bottom : 0,
            width : '100%',
            isSpinner : true,
        });

        data = [];
        for (var p = 0; p < pickerData.length; p++) {
            data.push(Ti.UI.createPickerRow({
                title : pickerData[p],
                index : p
            }));
        }
        picker.add(data);
        Ti.API.info("Tab Index" + index);
        picker.setSelectedRow(0, index, true);

        var selectedIndex = 0;
        picker.addEventListener('change', function(e) {
            selectedCategory = e.row.title;
            selectedIndex = e.row.index;
        });

        //toolbar
        var done = Titanium.UI.createButton({
            title : 'Done',
            style : Titanium.UI.iPhone.SystemButtonStyle.DONE,
        });
        done.addEventListener('click', function(e) {
            funName(selectedCategory, selectedIndex);
            win.close();
        });

        var title = Titanium.UI.createLabel({
            text : title,
            textAlign : 'left',
            color : 'white',
            font : {
                fontWeight : 'bold',
                fontSize : globals.isIpad ? 18 : "14dp"

            }
        });
        var flexSpace = Titanium.UI.createButton({
            systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
        });

        var toolbar = Titanium.UI.iOS.createToolbar({
            items : [title, flexSpace, done],
            bottom : 216,
            borderTop : true,
            borderBottom : false,
            barColor : '#3F3F3F'
        });

        win.addEventListener('click', function(e) {
            win.close();

        });

        win.add(picker);
        win.add(toolbar);
        win.open();
    } else {

        var pickerView = Titanium.UI.createOptionDialog({
            selectedIndex : index
        });
        pickerView.title = title;

        data = [];
        for (var p = 0; p < pickerData.length; p++) {
            data.push(pickerData[p]);
        };
        pickerView.options = data;
        pickerView.addEventListener('click', function(e) {
            selectedCategory = pickerData[e.index >= 0 ? e.index : index];
            funName(selectedCategory, e.index >= 0 ? e.index : index);

        });
        pickerView.show();
    }
    return win;
}

现在在您的窗口中创建一个按钮或标签，并将下拉图像设置为其背景。 所以它看起来像下拉列表现在处理按钮的单击并将下面的代码放入其中。

var data = ["Android", "IOS", "Blackberry", "Windows"];
function callback(title, index) {
    Ti.API.info('Selected title=' + title + ' index=' + index);
}

var defaultSelected = 1;

//Here functions is the global file in which my showPicker method is defined.
var pickerShow = functions.showPicker(data, callback, "Mobile OS", defaultSelected);
//Here globals is the file in which my isIos variable is defined.
if (globals.isIos) {
    pickerShow.open();
}