android - スピナーの画像を変更する

Question

Titanium アプリケーションを使用しているときに、Spinner (つまり、Titanium の Picker) のイメージを変更したい状況に遭遇しました。

ピッカーのオブジェクトを取得すると、スピナーを作成してデータを操作できますが、スピナーのデフォルトのイメージを変更するメカニズムが見つかりません

このreplace-picker-with-button のようにすることを考えています

他のアイデアはありますか？

Answer 1

backgroundImage プロパティを使用して、スピナーの画像を直接変更できます。

例えば

backgroundImage: '/images/dropdown.png.

Android でのみ機能し、iPhone では機能しません。

したがって、Ios と Android の両方で同じ UI を作成したい場合は、以下のトリックに従うことができます。

ピッカーの作成と表示に使用できるグローバル メソッドを次に示します。

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

ウィンドウ内にボタンまたはラベルを 1 つ作成し、ドロップダウン イメージをその背景に設定します。そのため、ドロップダウンがボタンのクリックを処理し、以下のコードを挿入したように見えます。

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