Search code examples
ioslistviewtitanium

TItanium Studio - iOS - ListView with label-child


My problem is the following: I have a listview in which I need to dynamically load a set of labels (of which I do not know the length), the height of each child of the listview (ie each label) should change according to the length of the label, but unfortunately I do not know how to do

enter image description here

Test - Code

var win = Titanium.UI.createWindow();

var template = {
    childTemplates : [{
        type : 'Ti.UI.Label',
        bindId : 'label',
        properties : {
            left : 0,
            width : 300,
            height : 'auto',
            textAlign : "left",
            color : "red",
            font : {
                fontSize : 12
            },
            backgroundColor : "#42de0b"
        }

    }]
};


var tabella = Ti.UI.createListView({
        width : 300,
        height : 300,
        separatorColor : 'transparent',
        backgroundColor : 'transparent',
        separatorInsets : {
            left : 0,
            right : 0
        },
        showVerticalScrollIndicator : false,
        templates : {
            'plain' : template
        },
        defaultItemTemplate : 'plain'
});


var data_record = [];

for (var i = 0; i < 10; i++) {

    data_record.push({

        label : {
            text : "test test test test test test test test test test test test test test test test test "
        },
        properties : {
            selectionStyle : Ti.UI.iPhone.ListViewCellSelectionStyle.NONE,
            height : 20
        }
    });

}


var intestazione = Ti.UI.createListSection();
tabella.sections = [intestazione];


intestazione.appendItems(data_record, {
    animationStyle : Ti.UI.iPhone.RowAnimationStyle.TOP
});

win.add(tabella);

win.open();

Solution

  • Set height of ListView template to Ti.UI.SIZE instead of 'auto'.

    var template = {
        childTemplates : [{
            type : 'Ti.UI.Label',
            bindId : 'label',
            properties : {
                left : 0,
                width : 300,
                height : Ti.UI.SIZE,
                textAlign : "left",
                color : "red",
                font : {
                    fontSize : 12
                },
                backgroundColor : "#42de0b"
            }
    
        }]
    };