How to dynamically set a cell position in a UITableView - ios

Question

I am creating a tableView with 4 cells. And the cells must be divided into various size depending on the orientation of the device.
1st column and 2nd column will have the same width, while 3rd column will be the largest of them all and the 4th column will be a smaller than the 3rd column but not smaller than the 1st nor 2nd.
Is there a way to do it dynamically?
Here is the template
I am having trouble in computing the width, here's what I have so far. I haven't created l2,l3 and l4 yet cause I am having a hard time in computing the width of it
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"cells" forIndexPath:indexPath];
UIInterfaceOrientation newOrientation = [UIApplication sharedApplication].statusBarOrientation;
UILabel *typeLabel = [[UILabel alloc] init];
if (cell==nil)
{
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"cells"];
}
if(newOrientation == UIInterfaceOrientationLandscapeLeft || newOrientation == UIInterfaceOrientationLandscapeRight)
{
l1 = [[UILabel alloc] initWithFrame:CGRectMake((self.tableView.bounds.size.width/15+20), 50, self.tableView.bounds.size.width/12, 21)];
}
else
{
l1 = [[UILabel alloc] initWithFrame:CGRectMake((self.tableView.bounds.size.width/15+50), 50, self.tableView.bounds.size.width/12, 21)];
}
[cell.contentView l1];
[cell.contentView l2];
[cell.contentView l3];
[cell.contentView l4];
return cell;
}

Answer 1

Create a custom TableView Cell named "CustomCell". You can create it using new File with xib option.
CustomCell.h
#interface CustomCell : UITableViewCell
#end
CustomCell.m
#implementation MessagesTableViewCell
//perform your custom implementation here.
#end
CustomCell.xib
Adjust the labels in the cell in the user interface using auto-layout. You can add 4 labels as you need with first 2 labels having a constant width and last one with the width you want and let the center(3rd) label stretch across 2nd label and 4th label. It will help you manage the UI in much easier way. Auto-Layout is a feature which helps to build content for different sizes. You can find dynamic table view cell using auto layout at https://www.sitepoint.com/self-sizing-cells-uitableview-auto-layout/
Using it in your TableView Class
static NSString *cellIdentifier = #"CustomCell";
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
CustomCell *cell = (CustomCell*)[tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath];
return cell;
}
I hope this helps you.
Updated code implementation with programmatic computation and Orientation change
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
/////////////////////////Programatic Implementation///////////////////////////////////
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"cell"];
if(cell==nil){
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"cell"];
}
if (UIInterfaceOrientationIsPortrait([UIApplication sharedApplication].statusBarOrientation)) {
//orientation is Portrait
long widthForL1L2 = tableView.frame.size.width * .10;
long widthForL3 = tableView.frame.size.width * .60;
long widthForL4 = tableView.frame.size.width * .20;
UILabel *l1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, widthForL1L2, cell.frame.size.height)];
l1.backgroundColor = [UIColor redColor];
[cell addSubview:l1];
UILabel *l2 = [[UILabel alloc] initWithFrame:CGRectMake(widthForL1L2, 0, widthForL1L2, cell.frame.size.height)];
l2.backgroundColor = [UIColor yellowColor];
[cell addSubview:l2];
UILabel *l3 = [[UILabel alloc] initWithFrame:CGRectMake(l2.frame.origin.x+widthForL1L2, 0, widthForL3, cell.frame.size.height)];
l3.backgroundColor = [UIColor greenColor];
[cell addSubview:l3];
UILabel *l4 = [[UILabel alloc]initWithFrame:CGRectMake(l3.frame.origin.x+widthForL3, 0, widthForL4,cell.frame.size.height)];
l4.backgroundColor = [UIColor blueColor];
[cell addSubview:l4];
}else{
//orientation is Landscape
//perform the same calculation as above or modify it according to your needs in landscape orientation.
}
return cell;
}
Do not forget to include this function of orientation change. This function calls table reload when phone orientation changes.
//Available iOS version >=8.0
-(void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator{
[super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
//Reload the tableview on orientation change, to match the new width of the table.
[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
[self.tableView reloadData];
} completion:nil];
}