Android tableViewSection Header View displays Sections Randomly

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

In the following code I am sorting through an array of names, and placing them into table view sections. The sections are split up alphabetically and the sections contain a view to display the alphabet the section refers to. On iOS this work perfectly, however on android the sections start out normally but when scrolling the section labels start to get mixed up randomly. Scrolling up and down appears to change the label of the sections. This may sound confusing, so I am including some code and a screenshot. Has anyone experienced this? SDK v2.1.0.GA

var sectionData = [
    "Adam1",
    "Adam2",
    "Adam3",
    "Ben1",
    "Ben2",
    "Chris1",
    "Chris2",
    "Chris3",
    "Chris4",
    "Erin1",
    "Erin2",
    "Erin3",
    "Erin4",
    "Frank1",
    "Frank2",
    "Grant1",
    "Henry1",
    "Ivan1",
    "Ivan2",
    "Ivan3",
    "James1",
    "James2",
    "Ken1",
    "Liam1",
    "Liam2",
    "Mike1",
    "Mike2",
    "Mike3",
    "Mike4",
    "Mike5",
    "Mike6",
    "Nancy1",
    "Nancy2",
    "Paul1",
    "Sam1",
    "Sam2",
    "Sam3",
    "Turk1",
    "Vick1",
    "Vick2",
    "William1",
    "William2",
    "William3",
    "William4",
    "Zebra1"
];
 
var sortedSections = {};
 
// sort the sections
for (var data in sectionData) {
    var value = sectionData[data];
    var sectionHeaderValue = value.charAt(0);
 
    if (!sortedSections[sectionHeaderValue]) {
        sortedSections[sectionHeaderValue] = {};
    };
 
    sortedSections[sectionHeaderValue][value] = value;
};
 
// create the rows and sections
var tableSections = [];
 
for (var sectionKey in sortedSections) {
    var items = sortedSections[sectionKey]; 
 
    var sectionView = Ti.UI.createView({
        backgroundColor: "blue",
        height: '25dp'
    });
 
    var sectionLabel = Ti.UI.createLabel({
        text: sectionKey,
        top: 0,
        bottom: 0,
        left: 5,
        font:{
                fontSize: '12dp',
                fontWeight :"bold"},
        color: '#FFFFFF',
        textAlign: 'left'
    });
 
    sectionView.add(sectionLabel);
 
    var section = Ti.UI.createTableViewSection({
        headerView: sectionView,
    });
 
    // create the rows for each section
    for (var itemKey in items) {
        var item = items[itemKey];
 
        var tableRow = Ti.UI.createTableViewRow({
            backgroundColor: 'white',
            title: item
        });
 
        section.add(tableRow);
    };
 
    // add section to tableSections array
    tableSections.push(section);
};
 
// create the table and set data
var tableView = Ti.UI.createTableView({
    data: tableSections
});
 
// create window
var win = Ti.UI.createWindow({});
 
win.add(tableView);
win.open();
 
 
 
Ti.API.info(JSON.stringify(sortedSections));
Screenshot

— asked 11 months ago by Frodeaux *
0 Comments

2 Answers

Accepted Answer

I hit this it is a bug...

You cannot use a view for the section heading in Android, you have to use the title parameter while creating the section.

Makes it look different between the two devices, but it does work.

Hope this helps t...

— answered 11 months ago by Trevor Ward
answer permalink
3 Comments
  • thanks for your suggestion, hope this will be fixed soon :(

    — commented 10 months ago by Quang Pham

  • sample fix? tks!

    — commented 10 months ago by Richard Frank

  • It seems that there is a JIRA ticket opened for this bug here

    This was quite a simple case to test before releasing such a feature on Android...

    — commented 10 months ago by Arnaud Besnier

Your Answer

Think you can help? Login to answer this question!