[TIMOB-10458] Android: TableSection - header views are not sorted correctly

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-10-04T22:20:28.000+0000
Affected Version/s	Release 2.1.1
Fix Version/s	Release 3.0.0, Sprint 2012-20 API, 2012 Sprint 20
Components	Android
Labels	api, module_tableview, qe-testadded
Reporter	Jon Alter
Assignee	Karl Rowley
Created	2012-08-15T14:11:43.000+0000
Updated	2013-07-16T12:08:31.000+0000

Description

When creating table sections with header views and a label, the header views are not sorted in the correct order. When executing this code repeatedly, the order of the labels is likely to change. It seems like this bug only happens when one section has a large number of items (in this case, section D). This bug was tested on Android 4.04. On iOS 5.1, the order is correct. Steps to reproduce: 1. Run the code below 2. Scroll to the bottom 3. Notice that the labels in the table section header views do not show up in the correct order / in the order they were added

var SettingsRow = function(a){
  a = a || {};
  a.height = a.height || 44;
  a.backgroundColor = 'transparent';
  var label = Ti.UI.createLabel({text: a.title, color: 'white', left: 10, font: {fontSize: 18, fontWeight: 'normal'}});
  var row = Ti.UI.createTableViewRow(a);
  row.add(label);
  row.label = label;
  row.allowsSelection = false;
  return row;
};

var SettingsTableViewSection = function(title) {
  var headerView = Ti.UI.createView({height: 25, width:Ti.UI.FILL, backgroundColor:'#292b2c'});
  var headerLabel = Ti.UI.createLabel({top: 3, left: 3, text:title, color:'white', color: '#cccccc', font:{fontWeight:'bold', fontSize:14}});
  headerView.add(headerLabel);
  return Ti.UI.createTableViewSection({headerView:headerView});
}

var win = Ti.UI.createWindow({
    backgroundColor: 'white'
});

var rowA1 = SettingsRow({title: 'Row A1'});
var rowA2 = SettingsRow({title: 'Row A2'});
var rowB1 = SettingsRow({title: 'Row B1'});
var rowB2 = SettingsRow({title: 'Row A2'});
var rowC1 = SettingsRow({title: 'Row C1'});
var rowC2 = SettingsRow({title: 'Row C2'});
var rowD1 = SettingsRow({title: 'Row D1'});
var rowD2 = SettingsRow({title: 'Row D2'});
var rowD3 = SettingsRow({title: 'Row D3'});
var rowD4 = SettingsRow({title: 'Row D4'});
var rowD5 = SettingsRow({title: 'Row D5'});
var rowD6 = SettingsRow({title: 'Row D6'});
var rowD7 = SettingsRow({title: 'Row D7'});
var rowD8 = SettingsRow({title: 'Row D8'});
var rowE1 = SettingsRow({title: 'Row E1'});
var rowE2 = SettingsRow({title: 'Row E2'});

var tableSections = [
  SettingsTableViewSection('Section A'),
  SettingsTableViewSection('Section B'),
  SettingsTableViewSection('Section C'),
  SettingsTableViewSection('Section D'),
  SettingsTableViewSection('Section E'),
];

tableSections[0].add(rowA1);
tableSections[0].add(rowA2);
tableSections[1].add(rowB1);
tableSections[1].add(rowB2);
tableSections[2].add(rowC1);
tableSections[2].add(rowC2);
tableSections[3].add(rowD1);
tableSections[3].add(rowD2);
tableSections[3].add(rowD3);
tableSections[3].add(rowD4);
tableSections[3].add(rowD5);
tableSections[3].add(rowD6);
tableSections[3].add(rowD7);
tableSections[3].add(rowD8);
tableSections[4].add(rowE1);
tableSections[4].add(rowE2);

var table = Ti.UI.createTableView({top: 0,backgroundColor:'#000'});

table.setData(tableSections);

win.add(table);

win.open();

The following example has less rows in section D, the order of the header views is correct:

var SettingsRow = function(a){
  a = a || {};
  a.height = a.height || 44;
  a.backgroundColor = 'transparent';
  var label = Ti.UI.createLabel({text: a.title, color: 'white', left: 10, font: {fontSize: 18, fontWeight: 'normal'}});
  var row = Ti.UI.createTableViewRow(a);
  row.add(label);
  row.label = label;
  row.allowsSelection = false;
  return row;
};

var SettingsTableViewSection = function(title) {
  var headerView = Ti.UI.createView({height: 25, width:Ti.UI.FILL, backgroundColor:'#292b2c'});
  var headerLabel = Ti.UI.createLabel({top: 3, left: 3, text:title, color:'white', color: '#cccccc', font:{fontWeight:'bold', fontSize:14}});
  headerView.add(headerLabel);
  return Ti.UI.createTableViewSection({headerView:headerView});
}

var win = Ti.UI.createWindow({
    backgroundColor: 'white'
});

var rowA1 = SettingsRow({title: 'Row A1'});
var rowA2 = SettingsRow({title: 'Row A2'});
var rowB1 = SettingsRow({title: 'Row B1'});
var rowB2 = SettingsRow({title: 'Row A2'});
var rowC1 = SettingsRow({title: 'Row C1'});
var rowC2 = SettingsRow({title: 'Row C2'});
var rowD1 = SettingsRow({title: 'Row D1'});
var rowD2 = SettingsRow({title: 'Row D2'});
var rowE1 = SettingsRow({title: 'Row E1'});
var rowE2 = SettingsRow({title: 'Row E2'});

var tableSections = [
  SettingsTableViewSection('Section A'),
  SettingsTableViewSection('Section B'),
  SettingsTableViewSection('Section C'),
  SettingsTableViewSection('Section D'),
  SettingsTableViewSection('Section E'),
];

tableSections[0].add(rowA1);
tableSections[0].add(rowA2);
tableSections[1].add(rowB1);
tableSections[1].add(rowB2);
tableSections[2].add(rowC1);
tableSections[2].add(rowC2);
tableSections[3].add(rowD1);
tableSections[3].add(rowD2);
tableSections[4].add(rowE1);
tableSections[4].add(rowE2);

var table = Ti.UI.createTableView({top: 0,backgroundColor:'#000'});

table.setData(tableSections);

win.add(table);

win.open();

Comments

Hieu Pham 2012-09-10

Can you elaborate on the buggy behavior? Maybe provide a couple screenshots to differentiate between iOS and Android. I tried this on latest master and can't repro this. All the rows are in correct order.
Daniel Hanold 2012-09-12

This behavior is still happening for me using the latest SDK. Here is my testing environment on Android: TiSDK V2.1.2.GA Samsung Galaxy S3 Android 4.0.4 See attached iOS screenshots and Android screenshots. On iOS, the sections are in the correct order. On Android, they are not. This was tested with the code list in the initial comment. Screenshot iOS: http://cl.ly/image/0z3X0f3g2Q2Q Screenshot Android: http://cl.ly/image/182v1E112b0a
Karl Rowley 2012-09-22

Pull request https://github.com/appcelerator/titanium_mobile/pull/3033
Jan Helleman 2012-10-16

The issue remains on the 2.1.xxxx branch, at least at android 2.2. Even in the current 3.1.0.v20121016132513 this does not work on android 2.2. It works on the 3.0 branch.
Allen Yeung 2012-10-26

For testing, please use the first test case above. There should be a table view with enough rows to trigger scrolling. If there aren't enough rows, please add more rows so it scrolls. Scroll up and down, and you will notice the header views change in the fail case. With the PR, the headers should stay consistent and be sorted.
Tamila Smolich 2012-10-26

Closing as fixed. Tested and verified on: Titanium Studio, build: 3.0.0.201210220122 Titanium SDK, build: 3.0.0.v20121025171611 Device: Galaxy Nexus (4.1.1)

JSON Source