[TIMOB-3407] tableview with dynamic row height causes really bad flickering

GitHub Issue	n/a
Type	Bug
Priority	Trivial
Status	Closed
Resolution	Needs more info
Resolution Date	2011-04-15T03:43:54.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	iOS
Labels	dynamic, flickering, height, ios, tableview
Reporter	Brian
Assignee	Reggie Seagraves
Created	2011-04-15T03:43:54.000+0000
Updated	2017-03-10T18:36:43.000+0000

Description

When calling setData on a tableview that has rows with a dynamic height the ui flickers. Basically it seems to be drawing everything on top of each other and then stretching the rows vertically to accommodate the dynamic height. This causes the ui to flicker really bad... and on the actual device you see the squished text and then the expansion - looks horrible. Below is the code to reproduce. Just click the Refresh button.

Ti Dev 1.2.2 and Ti Mobile 1.6.1 with iOS 4.2

function applyData(tableView) {
    var data = [];
    for (var i=0;i<20;i++) {
        var rowView = Ti.UI.createTableViewRow({
            height:'auto',
            layout:'vertical'
        });
        for (var j=0;j<3;j++) {
            var label = Ti.UI.createLabel({
                text:"Row i" + i + "j" + j,
                height:'auto',
                top:5,
                left:5
            });
            rowView.add(label);
        }
        data.push(rowView);
    }
    tableView.setData(data);
}

var window = Ti.UI.createWindow({
    title:"Funky Table Example",
    modal:true
});

var funkyTable = Ti.UI.createTableView();
applyData(funkyTable);
window.add(funkyTable);

var refreshButton = Ti.UI.createButton({
    title:"Refresh"
});

refreshButton.addEventListener("click", function(e) {
   applyData(funkyTable);
});

window.rightNavButton = refreshButton;

window.open();

Comments

Brian 2011-04-15

I figured out a workaround that removes the flickering. You cannot use height 'auto' on a TableViewRow, instead you have to manually keep track of the height of the views you add to a row, and then set the row height to this dynamic height.

Also when using labels with a height of 'auto', you also have to set the width, otherwise you will always get a height of 0. Here is the updated applyData function that fixes the flickering and allows for a dynamic row height:

   var defaultWidth = Ti.Platform.displayCaps.platformWidth;
   
   function applyData(tableView) {
       var data = [];
       for (var i=0;i<20;i++) {
           var rowView = Ti.UI.createTableViewRow();
           var height = 0;
           for (var j=0;j<3;j++) {
               var label = Ti.UI.createLabel({
                   text:"Row i" + i + "j" + j,
                   height:'auto',
                   width:defaultWidth,
                   top:5 + height,
                   left:5
               });
               height += label.size.height + 5;
               rowView.add(label);
           }
           rowView.height = height;
           data.push(rowView);
       }
       tableView.setData(data);
   }

Lee Morris 2017-03-10

Closing ticket as the information requested was not provided.

JSON Source