Simple Split Screen Views iOS 6

Question

I'm developing an app in iOS 6 and I'm a beginner. I've done bunch of research through several threads on here, and I'm finally at the point where I need to ask my question.

I'm trying to accomplish having a single view app containing two equally sized subviews which in portrait mode have ViewA on top and ViewB on bottom. Both views should be the same size and there should be no padding.

I feel like I'm right on the verge of figuring this out. But, I'm just not understanding programmatic constraints. My top view is Red(View A), my bottom view(View B) is Green.

When I run the following code, the entire screen is green. I'm missing something somewhere:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.topView.translatesAutoresizingMaskIntoConstraints = NO;
    self.bottomView.translatesAutoresizingMaskIntoConstraints = NO;
    self.view.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view removeConstraints:[self.view constraints]];

    NSDictionary *views = @{@"topView":self.topView, @"bottomView":self.bottomView};

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[topView]|" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[bottomView]|" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[topView]-0-[bottomView]|" options:0 metrics:nil views:views]];
}

I've done this example manually using a lot of nasty Frame/Bounds code. Hence, I'm trying to get this working using programmatic auto layout features.

There's actually a second part to my question. The main reason I'm doing this is because when I rotate to landscape, I need to change up the ordering of the views a bit. To recap, portrait is View A on top of View B. In Landscape I need View A to be left of View B. Again, I've done this transition with nasty Frame/Bounds code.

The idea is to 1) Remove constraints, 2) Swap in new constraints on a detected rotation change. Any thoughts or pointers on this approach? In order to take this route, I first need to figure out what's going wrong with the first part of my question.

I really appreciate any help offered.

Update: I think I've figured out what the issue was. I wasn't telling the top and bottom view their sizes "|[topView(bottomView)][bottomView(topView)]|" This seems to be working now. And I coded up the landscape transition code as well. I'm still not 100 percent that this is the right way to do it, and I'd love some advice.

Here's the code:

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *topView;
@property (weak, nonatomic) IBOutlet UIView *bottomView;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.topView.translatesAutoresizingMaskIntoConstraints = NO;
    self.bottomView.translatesAutoresizingMaskIntoConstraints = NO;
    self.view.translatesAutoresizingMaskIntoConstraints = NO;

    [self updateConstraints];
}

-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [self updateConstraints];
}

-(void)updateConstraints
{
    [self.view removeConstraints:[self.view constraints]];

    NSDictionary *views = @{@"topView":self.topView, @"bottomView":self.bottomView};

    if(UIDeviceOrientationIsPortrait([UIDevice currentDevice].orientation))
    {
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[topView]|" options:0 metrics:nil views:views]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[bottomView]|" options:0 metrics:nil views:views]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[topView(bottomView)]-0-[bottomView(topView)]|" options:0 metrics:nil views:views]];
    }
    else
    {
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[topView]|" options:0 metrics:nil views:views]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[bottomView]|" options:0 metrics:nil views:views]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[topView(bottomView)]-0-[bottomView(topView)]|" options:0 metrics:nil views:views]];
    }
}

@end

Simple Split Screen Views iOS 6

0 Answers0