Mohamed Emad Hegab Mohamed Emad Hegab - 4 months ago 10
iOS Question

iOS: How To make multiple column table

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

table

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

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.