Views disappear when row changes height

You must Login before you can answer or comment on any questions.

SDK: 2.1.0.GA OS: iOS

I have a simple app which consists of 5 rows (each one 1/4 of the screen height so the table scrolls). Within each row is a simple custom row consisting of a main view, a small inner view and a label inside the inner view. When the inner view is clicked on, the table scrolls the item to the top and expands the row to full screen. The problem is, the inner view completely disappears. I'm assuming it is still there because the label is there but the bg coloring is now gone.

The app (all one file of it) can be seen here: http://pastie.org/4544277

Anyone have any thoughts?

— asked 10 months ago by Cord Awtry
0 Comments

1 Answer

Accepted Answer

Hi Cord

I have found setting the property selectionStyle, can improve the situation.

Here is an example for you with expanding and collapsing rows, that continues to display row child views after expanding. 

Ti.UI.setBackgroundColor('#000');
var win1 = Titanium.UI.createWindow({
    backgroundColor: '#fff',
    title: 'Win 1'
});
win1.open();
 
var data = [
    { title: 'One' },
    { title: 'Two' },
    { title: 'Three' },
    { title: 'Four' },
    { title: 'Five' }
];
 
var row, rows = [], intRow, intRows = data.length, lbl, viewRow, viewBack, intRowHeight = 50, varView;
for (intRow = 0; intRow < intRows; intRow = intRow + 1) {
    (function () {        
        row = Ti.UI.createTableViewRow({
            className: 'standard',
            expanded: false,
            height: intRowHeight,
            selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.NONE,
            width: Ti.UI.FILL
        });
 
        varView = Ti.UI.createView({
            height: Ti.UI.FILL,
            width: Ti.UI.FILL
        });
        row.add(varView);
 
        viewRow = Ti.UI.createView({
            backgroundGradient : {
                type : 'linear',
                colors : [{
                    color : '#97D9EF',
                    position : 0.0
                }, {
                    color : '#76C6E1',
                    position : 0.50
                }, {
                    color : '#56B4D3',
                    position : 1.0
                }]
            },
            height: intRowHeight,
            top: 0,
            width: Ti.UI.FILL
        });
        varView.add(viewRow);
        lbl = Ti.UI.createLabel({
            height: Ti.UI.SIZE,
            highlightedColor: 'yellow',
            left: 15,
            text: data[intRow].title,
            width: Ti.UI.FILL
        });
        viewRow.add(lbl);
        viewBack = Ti.UI.createView({
            backgroundGradient : {
                type : 'linear',
                colors : [{
                    color : '#000000',
                    position : 0.0
                }, {
                    color : '#CCCCCC',
                    position : 1.0
                }]
            },
            height: 150,
            top: intRowHeight,
            width: Ti.UI.FILL
        });
        varView.add(viewBack);
        lblOpen = Ti.UI.createLabel({
            color: '#fff',
            height: Ti.UI.FILL,
            highlightedColor: '#fff',
            left: 15,
            text: data[intRow].title + data[intRow].title + data[intRow].title,
            width: Ti.UI.FILL
        });
        viewBack.add(lblOpen);
        row.addEventListener('click',function(e){
            if (e.row.expanded) {
                e.row.setHeight(50);
                e.row.expanded = false;
            } else {
                e.row.setHeight(200);
                e.row.expanded = true;
            }
        });
        rows.push(row);
    })();
}
var tbl = Ti.UI.createTableView({
    data: rows,
    height: Ti.UI.FILL,
    separatorColor: 'transparent',
    width: Ti.UI.FILL
});
win1.add(tbl);

Your Answer

Think you can help? Login to answer this question!