[TIMOB-16641] iOS: TableViewRow flickers when its height is set either Ti.UI.SIZE or fix value

GitHub Issue	n/a
Type	Bug
Priority	Low
Status	Closed
Resolution	Won't Fix
Resolution Date	2014-04-07T18:44:01.000+0000
Affected Version/s	Release 3.2.2
Fix Version/s	2014 Sprint 07, 2014 Sprint 07 SDK
Components	iOS
Labels	supportTeam, triage
Reporter	Eduardo Gomez
Assignee	Vishal Duggal
Created	2014-03-18T23:36:51.000+0000
Updated	2017-03-22T22:59:28.000+0000

Description

Issue description

TableViewRow has a view inside (where there are more children objects) for showing custom data. These Rows must be collapsed and expanded using an animation or just setting the row which changes its height. Once the row is expanded, all the rows must be shown. The problem developer is facing is that these animations are being sloppy and the whole TableView starts blinking once the animation starts. We have already used an animation and a View inside the tableViewRow which contains all the custom views and we have testing animating, a warning appears at the console:

[DEBUG] :  Application booted in 212.884963 ms
[WARN] :   New layout set while view [object __alloyId2] animating: Will relayout after animation.
[WARN] :   New layout set while view [object __alloyId2] animating: Will relayout after animation.
[WARN] :   New layout set while view [object __alloyId70] animating: Will relayout after animation.
[WARN] :   New layout set while view [object __alloyId2] animating: Will relayout after animation.
...

Using 'app/controllers/index.js' and 'app/styles/index.tss' instead of commented out sections gets rid of the warning below although we haven't been able to achieve a decent result since from time to time the flickering persists.

Steps to reproduce

Launch sample demo project showing this blink once you click on a row.

Click either first, second or the third row to collapse or expand contents. The row flickers showing a red background (app/styles/index.tss).

			<TableViewRow class="row">
				<View class="rowWrapper">
					<Label class="label" />
					<Label class="Secondlabel" />					
				</View>
			</TableViewRow>

If you remove the nested view and try out to add a transparent background the children objects will eventually disappear and appear as the user collapse-expand a TableViewRow (app/styles/index.tss).

			<TableViewRow class="row">
					<Label class="label" />
					<Label class="Secondlabel" />					
			</TableViewRow>

Attachments

File	Date	Size
Dummy.zip	2014-03-18T23:36:51.000+0000	5976038

Comments

Eduardo Gomez 2014-03-31

Classic Titanium

   Titanium.UI.setBackgroundColor('#000');
   var rows = [];
   var win1 = Titanium.UI.createWindow({
   	width : Ti.UI.FILL,
   	height : Ti.UI.FILL,
   	backgroundColor : '#101010'
   });
   
   var tableView = Ti.UI.createTableView({
   	width : Ti.UI.FILL,
   	height : Ti.UI.FILL,
   	backgroundColor : 'black'
   });
   
   tableView.addEventListener('click', function(e) {
   	var row = e.row;
   	if (!row) {
   		return false;
   	}
   	var newHeight = row.collapsed ? 30 : 60;
   	row.height = newHeight;
   	if (row.collapsed == true) {
   		row.collapsed = false;
   	} else {
   		row.collapsed = true;
   	}
   	Ti.API.info(newHeight);
   });
   
   for (var i = 0; i <= 7; i++) {
   	var row = Ti.UI.createTableViewRow({
   		width : Ti.UI.FILL,
   		height: 60, //Ti.UI.SIZE,
   		collapsed : true,
   		backgroundColor : 'red',
   		selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.NONE,
   		layout : 'vertical',
   	});
   	var view = Ti.UI.createView({
   		width : Ti.UI.FILL,
   		height : 60, //Ti.UI.SIZE,
   		layout : 'vertical',
   		touchEnabled : false,
   		backgroundColor : 'green'
   	});
   	var firstLabel = Ti.UI.createLabel({
   		width : Ti.UI.FILL,
   		height : 30,
   		color : '#FFF',
   		text : 'Dummy Text'
   	});
   	var secondLabel = Ti.UI.createLabel({
   		width : Ti.UI.FILL,
   		height : 30,
   		color : '#FFF',
   		text : '>>>>>>'
   	});
   	view.add(firstLabel);
   	view.add(secondLabel);
   	row.add(view);
   	rows.push(row);
   }
   
   tableView.setData(rows);
   win1.add(tableView);
   win1.open();

Vishal Duggal 2014-04-07

There are two issues I can see. First that the red background is showing through. This issue has been reported multiple times and the workaround also has been posted. iOS will clear out the background of all subviews of TableViewCell when the cell is highlighted. This is native behavior. The simple workaround is to use a backgroundImage on the view instead of a background color. Second issue here is that you are trying to animate the height of the tableView row. You **can not** animate the height of a tableView row because when the height changes, the row has to reload. When a row reloads we have to layout the subviews and the warning you are seeing is because the layout cycle is triggered while the row is animating. What you should really be doing is updating the row. Posting sample code below which shows the expanding and collapsing table view rows. Going to mark this as Won't Fix

   function genExpandedRow(i) {
       var row = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           height: 60, //Ti.UI.SIZE,
           collapsed : false,
           backgroundColor : 'green',
           selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.NONE,
       });
       var firstLabel = Ti.UI.createLabel({
           width : Ti.UI.FILL,
           top:0,
           height : 30,
           color : '#FFF',
           highlightedColor : '#FFF',
           text : 'Dummy Text '+i
       });
       var secondLabel = Ti.UI.createLabel({
           width : Ti.UI.FILL,
           top:30,
           height : 30,
           color : '#FFF',
           highlightedColor : '#FFF',
           text : '>>>>>> '+i
       });
       row.add(firstLabel);
       row.add(secondLabel);
   
       return row;
   }
   
   
   function genCollapsedRow(i) {
       var row = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           height: 30, //Ti.UI.SIZE,
           collapsed : true,
           backgroundColor : 'green',
           selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.NONE,
       });
       var firstLabel = Ti.UI.createLabel({
           width : Ti.UI.FILL,
           top:0,
           height : 30,
           color : '#FFF',
           highlightedColor : '#FFF',
           text : 'Dummy Text '+i
       });
       
       row.add(firstLabel);
   
       return row;
   }
   
   Titanium.UI.setBackgroundColor('#000');
   var rows = [];
   var win1 = Titanium.UI.createWindow({
       width : Ti.UI.FILL,
       height : Ti.UI.FILL,
       backgroundColor : '#101010'
   });
    
   var tableView = Ti.UI.createTableView({
       width : Ti.UI.FILL,
       height : Ti.UI.FILL,
       backgroundColor : 'black'
   });
    
   tableView.addEventListener('click', function(e) {
       
       var row = e.row;
       if (!row) {
           return false;
       }
       var newRow;
       if(row.collapsed == false) {
           newRow = genCollapsedRow(e.index);
       } else {
           newRow = genExpandedRow(e.index);
       }
   
       tableView.updateRow(e.index,newRow,{animated:false});
   
   });
    
   for (var i = 0; i <= 7; i++) {
       var row = genExpandedRow(i);
       rows.push(row);
   }
    
   tableView.setData(rows);
   win1.add(tableView);
   win1.open();

Lee Morris 2017-03-22

Closing ticket as "Won't Fix".

JSON Source