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.
Example:
Name Time In
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 UITableViewCell
that have 3 UILabels
and 2 UIViews
. The views pretend to be dividers by being 1 px wide.
Code should be self explanatory.
.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