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
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.
That's actually done (in Titanium at least) by creating a headerView
.
headerLabel = Ti.UI.createLabel({
text: 'line 1'
});
headerView = Ti.UI.createView({
height: 60
});
headerSection = Ti.UI.createTableViewSection();
headerView.add(headerLabel);
headerSection.add(headerView);
tableView.add(headerSection);
You could add more labels
to the view and set the height
to adjust accordingly. You will also need to populate your headerSection
with data
.
精彩评论