How to create a tabular user interface with multiple columns in Xcode?

Question

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

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 data will be read using JSON / PHP.

I need it to work like a table where the user can scroll vertically and select an index. After selecting this index, the user can click the button to start additional queries based on the data in the selected cell (etc.).

What is the easiest way to implement this? There must be a way xcode allows you to do this natively? Did I miss something?

All coding examples are welcome!

I found two options, but both require a licensing fee:

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

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

Is anyone familiar with these components?

Answer 1

Views in an iOS table are always a single column. On Mac OS, you can create what you follow.

However, you can create your own table view cells that display the content you want. Actually, that would be pretty easy. All you would do is subclass UITableViewCell and define views (probably UILabels) for each of your columns, and then connect them as output properties in the cell. Then adjust the table view to register this cell class for the cell ID you are using.

Then you create a cellForRowAtIndexPath method to set your data to different properties.

You can also use UICollectionView, but it seems to me that a table view with custom cells is better suited for this application.

Answer 2

What is the difference between two columns and two labels next to each other? Delimiter?

Is this a table view with multiple columns?

Because this is a table with a regular UITableViewCell , which has 3 UILabels and 2 UIViews . Looks pretend to be 1 px wide dividers.

The code should be clear.

.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 

Answer 3

Use UICollectionView, Check Apple WWDC 2012 Sessions

• 205 Presentation of types of collections
• 219 Extended collections and building custom layouts

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