如何在Xcode中创建具有多个列的UI TableView?

时间:2015-03-19 19:15:15

标签: ios objective-c uitableview

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

示例:

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

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

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

实现此目的的最简单方法是什么?必须有一种方法xcode允许你本地执行此操作?我错过了什么吗?

欢迎所有编码示例!

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

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

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

有谁熟悉这些组件?

3 个答案:

答案 0 :(得分:13)

iOS表格视图始终是单个列。在Mac OS上,您可以直接创建自己的内容。

也就是说,您可以创建显示所需内容的自定义表格视图单元格。实际上这很容易。您要做的就是为UITableViewCell创建子类并为每个列定义视图(可能是UILabels),然后将它们作为单元格中的出口属性连接起来。然后装配表视图以为您使用的单元标识符注册该单元类。

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

您也可以使用UICollectionView,但它看起来像一个带有自定义单元格的表格视图更适合此应用程序。

答案 1 :(得分:12)

两列和两个标签之间的区别是什么?分隔符?

enter image description here

这是多列表视图吗?

因为普通UITableViewCell的桌面视图有3 UILabels和2 UIViews。这些观点假装是1分宽的分隔符。

代码应该是自我解释的。

.h

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

的.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

答案 2 :(得分:4)

使用UICollectionView,检查Apple WWDC 2012会话

  • 205介绍集合视图
  • 219高级集合视图和构建自定义布局

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