iOS: How To make multiple column table

Question

I am trying to make a table using uitableview on iOS 7 and 8 . The table is like the image below

I've tried doing it using uitableviewCell but the labels didn't adjusted well in iphone and iPad .. plus the auto layout was pain to handle.

My question is.. Is there anyway that I can do this even with uicollectionView.. and how in details please.

Any help will be appreciated

Answer 1

In your case, I think, custom table view cells are your best choice. You can create and arrange them them in the storyboard and set appropriate IBOutlets.

You can follow this tutorial, wich describes the pattern really good.

Answer 2

Have you tried some third party component? There is nice demo on GitHub for MDSpreadView component.

Link: https://github.com/mochidev/MDSpreadViewDemo

Answer 3

A way to make multiple column table would be to have:

1) A different UICollectionViewCell for each item.

2) A separate view for the headers, just to not clog the datasource with non data info.

3) Careful management of cell classes and positioning in each section, where each section is a row and each cell is a column entry.

Answer 4

like an example. Obvisously there are many things you must configure, but I think is good start point:

.h file:

#import <UIKit/UIKit.h>

@interface OKCustomFiveLabelsTableViewCell : UITableViewCell

// Here is the place to send through the tableViewDelegate all info about the cell.

@property (nonatomic, strong) NSDictionary *dictInfo;

@end

.m file

#import "OKCustomFiveLabelsTableViewCell.h"

#define FIRST_LABEL_PERCENT 0.15
#define SECOND_LABEL_PERCENT 0.3
#define THIRD_LABEL_PERCENT 0.2
#define FOURTH_LABEL_PERCENT 0.2
#define FIFTH_LABEL_PERCENT 0.15

//the sum of this five must be 1

@interface OKCustomFiveLabelsTableViewCell ()

@property (nonatomic, strong) UILabel *firstLabel;
@property (nonatomic, strong) UILabel *secondLabel;
@property (nonatomic, strong) UILabel *thirdLabel;
@property (nonatomic, strong) UILabel *fourthLabel;
@property (nonatomic, strong) UILabel *fifthLabel;

@end


@implementation OKCustomFiveLabelsTableViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {

    CGFloat width = [UIScreen mainScreen].bounds.size.width;

    self.firstLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 5, width *FIRST_LABEL_PERCENT, 25)];

    //Configure here your label
    // It´s good idea Use: NSTextAlignamentCenter

    [self.contentView addSubview:self.firstLabel];

    self.secondLabel= [[UILabel alloc] initWithFrame:CGRectMake(width *FIRST_LABEL_PERCENT, 5, width *SECOND_LABEL_PERCENT, 25)];

    //Configure here your label

    [self.contentView addSubview:self.secondLabel];

    self.thirdLabel= [[UILabel alloc] initWithFrame:CGRectMake(width *(FIRST_LABEL_PERCENT + SECOND_LABEL_PERCENT), 5, width *THIRD_LABEL_PERCENT, 25)];

    //Configure here your label

    [self.contentView addSubview:self.thirdLabel];

    self.fourthLabel= [[UILabel alloc] initWithFrame:CGRectMake(width *(FIRST_LABEL_PERCENT + SECOND_LABEL_PERCENT+THIRD_LABEL_PERCENT), 5, width *FOURTH_LABEL_PERCENT, 25)];

    //Configure here your label

    [self.contentView addSubview:self.fourthLabel];


    self.fifthLabel= [[UILabel alloc] initWithFrame:CGRectMake(width *(FIRST_LABEL_PERCENT + SECOND_LABEL_PERCENT+THIRD_LABEL_PERCENT+FOURTH_LABEL_PERCENT), 5, width *FIFTH_LABEL_PERCENT, 25)];

    //Configure here your label

    [self.contentView addSubview:self.fifthLabel];


}
return self;
}

-(void)setDictInfo:(NSDictionary *)dictInfo
{
self.fifthLabel.text = [dictInfo valueForKey:@"identyNumber"];
self.secondLabel.text = [dictInfo valueForKey:@"name"];
self.thirdLabel.text = [dictInfo valueForKey:@"amount"];
self.fourthLabel.text = [dictInfo valueForKey:@"time"];
self.fifthLabel.text = [dictInfo valueForKey:@"type"];

_dictInfo = dictInfo;
}

@end

You might need to write the methods to work properly if you want work in portrait and landscape. (rotate). But It´s the same code in the rotate methods.