Create a new VC by dragging out a TableView along with x2 TableViewCells. Screen Shot 2017-02-01 at 5.31.40 AM.png

Stretch out the two cells so one is covering the top have and the other the bottom. Then give each it’s own styling and constraints.

Screen Shot 2017-02-01 at 5.32.35 AM.png

The top cell is going to be our portrait layout. The bottom landscape.

Create a custom UITableViewCell class, register it with each table cells and and give each cell a unique identifier.

Screen Shot 2017-02-01 at 5.44.59 AM.png

Screen Shot 2017-02-01 at 5.45.40 AM.png

Screen Shot 2017-02-01 at 5.45.53 AM.png

Make the VC the source and delegate.

Screen Shot 2017-02-01 at 5.36.16 AM.png

Control drag the tableView as a property in the ViewController.

Screen Shot 2017-02-01 at 5.57.36 AM.png

And then add the following code to dynamically load each based on whether we are in portrait or landscape mode.

Screen Shot 2017-02-01 at 5.37.00 AM.png

#import "ViewController.h"
#import "CustomCell.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet UITableView *tableView;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.tableView reloadData];
}

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id)coordinator
{
    [self.tableView reloadData];
    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
}

#pragma mark - UITableViewDataSource

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomCell *cell = nil;

    if ([self isPortrait]) {
        cell = [tableView dequeueReusableCellWithIdentifier:@"portrait"];
    } else {
        cell = [tableView dequeueReusableCellWithIdentifier:@"landscape"];
    }

    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [self isPortrait] ? self.view.bounds.size.height - (88 + 44) : self.view.bounds.size.height - (68 + 44) ;
}

- (bool)isPortrait
{
    return [UIScreen mainScreen].bounds.size.width < [UIScreen mainScreen].bounds.size.height;
}

@end

Note1: You need to dynamically calculate the height for each cell – landscape and portrait.

Note2: You need call reload the data every time you change orientation. Which is what the viewWillTransitionToSize does.

And if you want to do your design in landscape mode you can. You just need to flip to that orientation, and then slide your design in the interface builder so that it’s visible.

Advertisements