iPhone Custom cell with consecutive UILabels - ios

Question

I am trying to implement a custom cell (see below images) with 4 consecutive UILabels. Between two consecutive label a 1 px gap will be included and the 4 labels must fill the cell horizontally. I can't find any way to implement this (unique design) in storyboard. So i did it programatically. But by doing programmatically, if i orient my device, my table view cell look like below image(02) where 4 labels does not fill the whole cell horizontally. I tried with autoResizingMask, but that does not work. How can i implement auto layout feature for this custom cell programmatically ? Or is there any better idea to do it in storyboard with auto layout feature ?
In my custom cell implementation file i tried like below code -
- (void)awakeFromNib {
// Initialization code
CGRect screenBounds = [[UIScreen mainScreen] bounds];
float screenWidth = (screenBounds.size.width - 4.0f)/4;
CGRect label1Container = CGRectMake(0, 2, screenWidth, 50);
UILabel *label1 = [[UILabel alloc] initWithFrame:label1Container];
label1.backgroundColor = [UIColor colorWithRed: 107.0f/255.0f green:199.0f/255.0f blue:190.0f/255.0f alpha:1.0];
label1.textAlignment = NSTextAlignmentCenter;
label1.numberOfLines = 0;
label1.text = #"Lotery\nSerial";
label1.font = [UIFont boldSystemFontOfSize:17];
[self.contentView addSubview:label1];
CGRect label2Container = CGRectMake(screenWidth + 1, 2, screenWidth, 50);
UILabel *label2 = [[UILabel alloc] initWithFrame:label2Container];
label2.backgroundColor = [UIColor colorWithRed: 107.0f/255.0f green:199.0f/255.0f blue:190.0f/255.0f alpha:1.0];
label2.textAlignment = NSTextAlignmentCenter;
label2.numberOfLines = 0;
label2.text = #"Bank\nCode";
label2.font = [UIFont boldSystemFontOfSize:17];
[self.contentView addSubview:label2];
CGRect label3Container = CGRectMake(screenWidth * 2 + 2, 2, screenWidth, 50);
UILabel *label3 = [[UILabel alloc] initWithFrame:label3Container];
label3.backgroundColor = [UIColor colorWithRed: 107.0f/255.0f green:199.0f/255.0f blue:190.0f/255.0f alpha:1.0];
label3.textAlignment = NSTextAlignmentCenter;
label3.numberOfLines = 0;
label3.text = #"Branch\nCode";
label3.font = [UIFont boldSystemFontOfSize:17];
[self.contentView addSubview:label3];
CGRect label4Container = CGRectMake(screenWidth*3+3, 2, screenWidth+1, 50);
UILabel *label4 = [[UILabel alloc] initWithFrame:label4Container];
label4.backgroundColor = [UIColor colorWithRed: 107.0f/255.0f green:199.0f/255.0f blue:190.0f/255.0f alpha:1.0];
label4.textAlignment = NSTextAlignmentCenter;
label4.numberOfLines = 0;
label4.text = #"Bank\nSerial";
label4.font = [UIFont boldSystemFontOfSize:17];
[self.contentView addSubview:label4];
//[self.label1 setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight)];
//[self.label2 setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
//[self.label3 setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
//[self.label2 setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight)];
}
01.
02.

Answer 1

Use storyboard. Set all labels to had same width and connect them -label1-label2-label3-label4-. Also connect them to top & bottom.

Answer 2

You can do it in storyboard more easily. yo just have to give these four views 'equal width' 'equal height' constraints and also appropriate trailing and leading constraints. For providing 'equal width' 'equal height' select all views in storyboard then go to editor -> pin -> widths equally / heights equally.
Hope it helps.

Answer 3

Also you can use UITableView. Set your custom views to top and then below views add a tableview, create custom UITableViewCell and init every cell with your object.You can customize cells how you want. This way is safer than autolayout I think.