{ "id": "64039", "key": "TIMOB-3407", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [], "resolution": { "id": "8", "description": "", "name": "Needs more info" }, "resolutiondate": "2011-04-15T03:43:54.000+0000", "created": "2011-04-15T03:43:54.000+0000", "priority": { "name": "Trivial", "id": "5" }, "labels": [ "dynamic", "flickering", "height", "ios", "tableview" ], "versions": [], "issuelinks": [], "assignee": { "name": "rseagraves", "key": "rseagraves", "displayName": "Reggie Seagraves", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2017-03-10T18:36:43.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10206", "name": "iOS", "description": "iOS Platform" } ], "description": "{html}
When calling setData on a tableview that has rows with a dynamic\nheight the ui flickers. Basically it seems to be drawing everything\non top of each other and then stretching the rows vertically to\naccommodate the dynamic height. This causes the ui to flicker\nreally bad... and on the actual device you see the squished text\nand then the expansion - looks horrible. Below is the code to\nreproduce. Just click the Refresh button.
\nTi Dev 1.2.2 and Ti Mobile 1.6.1 with iOS 4.2
\n\nfunction applyData(tableView) {\n var data = [];\n for (var i=0;i<20;i++) {\n var rowView = Ti.UI.createTableViewRow({\n height:'auto',\n layout:'vertical'\n });\n for (var j=0;j<3;j++) {\n var label = Ti.UI.createLabel({\n text:\"Row i\" + i + \"j\" + j,\n height:'auto',\n top:5,\n left:5\n });\n rowView.add(label);\n }\n data.push(rowView);\n }\n tableView.setData(data);\n}\n\nvar window = Ti.UI.createWindow({\n title:\"Funky Table Example\",\n modal:true\n});\n\nvar funkyTable = Ti.UI.createTableView();\napplyData(funkyTable);\nwindow.add(funkyTable);\n\nvar refreshButton = Ti.UI.createButton({\n title:\"Refresh\"\n});\n\nrefreshButton.addEventListener(\"click\", function(e) {\n applyData(funkyTable);\n});\n\nwindow.rightNavButton = refreshButton;\n\nwindow.open();
\n
I figured out a workaround that removes the flickering. You\ncannot use height 'auto' on a TableViewRow, instead you have to\nmanually keep track of the height of the views you add to a row,\nand then set the row height to this dynamic height.
\nAlso when using labels with a height of 'auto', you also have to\nset the width, otherwise you will always get a height of 0. Here is\nthe updated applyData function that fixes the flickering and allows\nfor a dynamic row height:
\n\nvar defaultWidth = Ti.Platform.displayCaps.platformWidth;\n\nfunction applyData(tableView) {\n var data = [];\n for (var i=0;i<20;i++) {\n var rowView = Ti.UI.createTableViewRow();\n var height = 0;\n for (var j=0;j<3;j++) {\n var label = Ti.UI.createLabel({\n text:\"Row i\" + i + \"j\" + j,\n height:'auto',\n width:defaultWidth,\n top:5 + height,\n left:5\n });\n height += label.size.height + 5;\n rowView.add(label);\n }\n rowView.height = height;\n data.push(rowView);\n }\n tableView.setData(data);\n}
\n