开发者

Multi-line label in TableView

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜