Issue with displaying the radio button label in tianium?

问题

I have created a radio button from the following link, https://github.com/yozef/TiRadioButtonGroup. I am able to see the radio buttons but the respective radio button labels are not showing. How can we display the radio button labels.

My code:

View:

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

Style:

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

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

Controller:

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

Screenshot:

The label option one, two and three are not displaying. Please help me out of this issue. I need to display the labels too.

回答1:

I've gone ahead and updated my Module which will give you the result you want... You can fetch it here:

https://github.com/yozef/TiRadioButtonGroup

回答2:

I think you should put some label near to the radioButtons by yourself. Have a look at my modified code. It is not tested but should do the trick. Maybe you have to play around with the width/height/left etc attributes a bit.

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

回答3:

I have gone through your code and found that your window background color is set to 'white' or '#ffffff' and in tiRadioButton.js module label color is also set to 'white' or '#ffffff'. Hence you are not able to see the lable.

You can change either the window backgroundColor or label color.

For change windowBackground color :

at abc.tss file

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

For change Label color :

at tiRadioButton.js file

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

//**In color field you can change the label color **

来源：https://stackoverflow.com/questions/26672482/issue-with-displaying-the-radio-button-label-in-tianium