Multi-line label in TableView

Question

How can I add a multi-line label in my tableview like the one in this screen (the label below multitasking gestures): http://cl.ly/6g0B

Answer 1

You need to make your tableview grouped (when targetting an iOS device, at least). Then, you create a table view section to contain your rows, and your multi-line label is added to the section through its headerView property.

Check out the documentation for the TableViewSection view here: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.TableViewSection-object

A brief example - it's untested sorry, I don't have a Mac around at the moment, but the principle is sound. You create a your header view, create a section, set the section header view, add some cells to the section, and give your table an array of sections:

var tableView = Ti.UI.createTableView({
   style: Ti.UI.iPhone.TableViewStyle.GROUPED
});
var tableData = [];

var multiLineLabelView = Ti.UI.createView();
var line1 = Ti.UI.createLabel({
     text: 'Some text'
});
var line2 = Ti.UI.createLabel({
     text: 'More text',
     top: 20
});
multiLineLabelView.add(line1);
multiLineLabelView.add(line2);

var section = Ti.UI.createTableViewSection({
    headerView: multiLineLabelView,
    height: 40
});

var row1 = Ti.UI.createTableViewRow({
    title: 'Row 1'
});

var row2 = Ti.UI.createTableViewRow({
    title: 'Row 2'
});

section.add(row1);
section.add(row2);

tableData.push(section);
tableView.data = tableData;

The important thing to note is that you only need a single table - in the example you gave, rows are instead grouped into sections, some of which have headers.