ios 如何在 Xcode 中创建具有多列的 UI TableView？

How do I create a UI TableView with multiple columns in Xcode?

提问by Filip Korngut

I am working on a iOS 8 app with Xcode. I need to display a table with many columns and rows of data in one view.

我正在使用 Xcode 开发 iOS 8 应用程序。我需要在一个视图中显示一个包含多列和多行数据的表。

Example:

例子：

Name               Time In       Time Out      ETA
Johnnys Supplies    8:30AM        9:00AM      10:15AM
Franks Company      8:45AM        9:05AM      9:45AM
Another Inc.        10:12AM       11:00AM     12:04PM

All of the data would be read in with JSON/PHP.

所有数据都将使用 JSON/PHP 读入。

I need it to work like a tableview where a user can scroll vertically, and select an index. Once that index is selected, the user can click a button to run additional queries based on the data in the selected cell (etc.).

我需要它像 tableview 一样工作，用户可以在其中垂直滚动并选择一个索引。选择该索引后，用户可以单击按钮以根据所选单元格（等）中的数据运行其他查询。

What is the easiest way to implement this? There has to be a way xcode allows you to do this natively? Am I missing something?

实现这一点的最简单方法是什么？必须有一种方式 xcode 允许您在本地执行此操作？我错过了什么吗？

All coding examples welcomed!

欢迎所有编码示例！

I have found two options but both require licensing fees:

我找到了两个选项，但都需要许可费用：

http://www.ioscomponents.com/Home/IOSDataGrid<-- $400

http://www.ioscomponents.com/Home/IOSDataGrid<-- 400 美元

http://www.binpress.com/app/ios-data-grid-table-view/586<-- $130

http://www.binpress.com/app/ios-data-grid-table-view/586<-- $130

Anyone familiar with these components?

有人熟悉这些组件吗？

回答by Duncan C

iOS table views are always a single column. On Mac OS you can create what you are after directly.

iOS 表视图始终是单列。在 Mac OS 上，您可以直接创建您想要的内容。

That said, you could create custom table view cells that display the content you want. In fact it would be quite easy. All you would do is to subclass UITableViewCell and define views (probably UILabels) for each of you columns, then wire them up as outlet properties in the cell. Then rig your table view to register that cell class for the cell identifier you use.

也就是说，您可以创建显示您想要的内容的自定义表格视图单元格。事实上，这会很容易。您要做的就是将 UITableViewCell 子类化并为每个列定义视图（可能是 UILabels），然后将它们连接为单元格中的插座属性。然后绑定你的表格视图来为你使用的单元格标识符注册那个单元格类。

You then write your cellForRowAtIndexPath method to install your data into the different outlet properties.

然后编写 cellForRowAtIndexPath 方法以将数据安装到不同的插座属性中。

You could also use a UICollectionView, but it looks to me like a table view with custom cells is a better fit for this application.

您也可以使用 UICollectionView，但在我看来，带有自定义单元格的表格视图更适合此应用程序。

回答by Matthias Bauch

What's the difference between two columns and two labels next to each other? A divider?

两列和两个相邻的标签有什么区别？分频器？

Is this a multi column table view?

这是多列表视图吗？

Because it's a tableview with ordinary UITableViewCellthat have 3 UILabelsand 2 UIViews. The views pretend to be dividers by being 1 px wide.

因为它是一个带有普通的 tableviewUITableViewCell有 3UILabels和 2 UIViews。视图假装是 1 px 宽的分隔线。

Code should be self explanatory.

代码应该是不言自明的。

.h

。H

@interface MultiColumnTableViewCell : UITableViewCell
@property (strong, nonatomic) UILabel *label1;
@property (strong, nonatomic) UILabel *label2;
@property (strong, nonatomic) UILabel *label3;
@end

.m

.m

@interface MultiColumnTableViewCell ()
@property (strong, nonatomic) UIView *divider1;
@property (strong, nonatomic) UIView *divider2;
@end

@implementation MultiColumnTableViewCell

- (UILabel *)label {
    UILabel *label = [[UILabel alloc] init];
    label.translatesAutoresizingMaskIntoConstraints = NO;
    [self.contentView addSubview:label];
    return label;
}

- (UIView *)divider {
    UIView *view = [[UIView alloc] init];
    view.translatesAutoresizingMaskIntoConstraints = NO;
    [view addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:1.0/[[UIScreen mainScreen] scale]]];
    view.backgroundColor = [UIColor lightGrayColor];
    [self.contentView addSubview:view];
    return view;
}

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    self.separatorInset = UIEdgeInsetsZero;
    self.layoutMargins = UIEdgeInsetsZero;
    self.preservesSuperviewLayoutMargins = NO;

    self.divider1 = [self divider];
    self.divider2 = [self divider];

    self.label1 = [self label];
    self.label2 = [self label];
    self.label3 = [self label];

    NSDictionary *views = NSDictionaryOfVariableBindings(_label1, _label2, _label3, _divider1, _divider2);

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-5-[_label1]-2-[_divider1]-2-[_label2(==_label1)]-2-[_divider2]-2-[_label3(==_label1)]-5-|" options:NSLayoutFormatAlignAllCenterY metrics:nil views:views];
    [self.contentView addConstraints:constraints];

    NSArray *horizontalConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_divider1]|" options:0 metrics:nil views:views];
    [self.contentView addConstraints:horizontalConstraints1];
    NSArray *horizontalConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_divider2]|" options:0 metrics:nil views:views];
    [self.contentView addConstraints:horizontalConstraints2];

    return self;
}

@end

TableViewController:

表视图控制器：

@implementation MasterViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.tableView registerClass:[MultiColumnTableViewCell class] forCellReuseIdentifier:@"Cell"];
    self.tableView.separatorColor = [UIColor lightGrayColor];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    MultiColumnTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    cell.label1.text = [NSString stringWithFormat:@"Name %ld", (long)indexPath.row];
    cell.label2.text = [NSString stringWithFormat:@"Start %ld", (long)indexPath.row];
    cell.label3.text = [NSString stringWithFormat:@"End %ld", (long)indexPath.row];
    return cell;
}

@end

回答by JOM

Use UICollectionView, check Apple WWDC 2012 sessions

使用 UICollectionView，查看 Apple WWDC 2012 会议

• 205 Introducing Collection Views
• 219 Advanced Collection Views and Building Custom Layouts

• 第 205 章
• 219 个高级集合视图和构建自定义布局

from https://developer.apple.com/videos/wwdc/2012/

来自https://developer.apple.com/videos/wwdc/2012/