Question

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

选择Picker的对象我能够创建微调器并操纵数据但却找不到任何改变微调器默认图像的机制

想这样做replace-picker-with-button

还有其他想法吗？

Answer 1

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

例如

backgroundImage: '/images/dropdown.png。

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

因此，如果您想为Ios和Android制作相同的用户界面，那么您可以按照以下技巧进行操作。

以下是可用于创建和显示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();
}

更改微调器的图像

1 个答案: