Проблема с отображением метки переключателя в тианиуме?

Question

Я создал переключатель по следующей ссылке: https://github.com/yozef/TiRadioButtonGroup. Я могу видеть переключатели, но соответствующие ярлыки переключателей не отображаются. Как мы можем отображать метки переключателей.

Мой код:

Посмотреть:

<Alloy>
    <Window class="container">
        <View id="radiopicker" ></View>
    </Window>
</Alloy>

Стиль:

".container": {
    backgroundColor:"red",
    layout: 'vertical'
}

"#radiopicker":
{
    width: '90%',
    top: '25dp'
} 

контроллер:

(function() {   
    var radioButton = require('/ui/tiRadioButton'); 
    var radioGroup2 = radioButton.createGroup({
        groupId:1,
        width:20,
        height:150,
        layout:'vertical',
        radioItemsValue:['One', 'Two', 'Three'],
        radioItemsPadding:10,
        radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
        radioItemsBackgroundImage:'/radioButton.png',
        radioItemsWidth:33,
        radioItemsHeight:34
    }); 
    var button = Ti.UI.createButton({
        title:'Get value' 
    });
    button.addEventListener('singletap', function(e) {
        alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
    });
    $.radiopicker.add(radioGroup2);
    $.radiopicker.add(button);
})();
$.index.open();

Скриншот:

Варианты метки один, два и три не отображаются. Пожалуйста, помогите мне выйти из этого вопроса. Мне тоже нужно отображать ярлыки.

Answer 1

Я пошел дальше и обновил мой Модуль, который даст вам желаемый результат... Вы можете получить его здесь:

https://github.com/yozef/TiRadioButtonGroup

Answer 2

Я думаю, вы должны поставить ярлык рядом с радио-кнопками самостоятельно. Посмотрите на мой модифицированный код. Это не проверено, но должно делать свое дело. Возможно, вам придется немного поиграться с атрибутами width/height/left и т.д.

(function() {   
    var radioButton = require('/ui/tiRadioButton'); 
    var radioGroup2 = radioButton.createGroup({
        groupId:1,
        width:20,
        height:150,
        layout:'vertical',
        radioItemsValue:['One', 'Two', 'Three'],
        radioItemsPadding:10,
        radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
        radioItemsBackgroundImage:'/radioButton.png',
        radioItemsWidth:33,
        radioItemsHeight:34
    }); 
    //Create a view to hold your labels
    var labelsView = Ti.UI.createView({
        height:150,
        left: "30" //Or whereever you want to place it
        layout:'vertical'
    });
    //Create the labels
    var label1 = Ti.UI.createLabel({
        text: "One",
        height: "34",
        width: Titanium.UI.SIZE
    });
    var label2 = Ti.UI.createLabel({
        text: "Two",
        height: "34",
        width: Titanium.UI.SIZE
    });
    var label3 = Ti.UI.createLabel({
        text: "Three",
        height: "34",
        width: Titanium.UI.SIZE
    });

    //Attach the labels to your view and your view to your radioPicker view
    labelsView.add(label1);
    labelsView.add(label2);
    labelsView.add(label3);
    $.radiopicker.add(labelsView);

    var button = Ti.UI.createButton({
        title:'Get value' 
    });
    button.addEventListener('singletap', function(e) {
        alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
    });
    $.radiopicker.add(radioGroup2);
    $.radiopicker.add(button);
})();
$.index.open();

Answer 3

Я просмотрел ваш код и обнаружил, что цвет фона вашего окна установлен на "white" или "#ffffff", а в модуле tiRadioButton.js цвет метки также установлен на "white" или "#ffffff". Следовательно, вы не можете увидеть ярлык.

Вы можете изменить либо backgroundColor окна, либо цвет метки.

Для изменения цвета фона окна:

в файле abc.tss

".container": {
    backgroundColor:"red", // any color you want
    layout: 'vertical'
}

Для изменения цвета метки:

в файле tiRadioButton.js

   var radioItemLabel = Ti.UI.createLabel({
        width:Ti.UI.SIZE,
        height:Ti.UI.SIZE,
        text: arg.radioItemsValue[i],
        font: {}, // Can add your own font styles
        color:'#FFFFFF', //Label color
        top:isVertical?null:5, // 5 padding between RadioBtn & Label
        left:!isVertical?null:5, // 5 padding between RadioBtn & Label
        id:i,
    });

//** В поле цвета вы можете изменить цвет этикетки **