Question

While working with Titanium application, came across a situation where I want to change image of Spinner (i.e. Picker in Titanium)

Taking Picker’s object I’m able to create spinner and manipulate data but not finding any mechanism which change the default image of spinner

Thinking to do like this replace-picker-with-button

any other idea?

Answer 1

You can directly change image of the spinner by its backgroundImage property.

For Example

backgroundImage: '/images/dropdown.png.

It will only work for Android and did not work with iPhone.

So if you want to make same UI for both Ios and Android then you can follow below trick.

Here is the global method which you can use to create and display 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();
}