android - 更改微调器的图像

Question

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

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

想像这样用按钮替换选择器

还有其他想法吗？

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

Now create one button or lable inside your window and set the dropdown image to its background. So it will look like dropdown now handle click of the button and put below code in it.

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