UISplitView with header programmatically swift

Question

-------------Navigation-----------

-------------Extra View------------

--Master View-- | --Detail View--

See image: Layout

I am working in Swift 1.2 and I am looking to create the above layout within my application.

Within a UINavigationController , I want to contain a UISplitViewController , and above that UISplitController I want a header view that stretches across both the Master and Detail view controllers.

Within this view I'll be creating a search bar, with advanced search options. I'll want to be able to edit the height of this extra view, so that it can effectively push down the UISplitViewController .

What is the best way of achieving this programmatically? Is this something that I should do using containers (they're not actually something I've ever used before)?

Thanks

Answer 1

You can create a UINavigationController with a root view controller of type UIViewController. This gives you your navigation bar. You could however just add a navigation bar to a UIViewController if all you want is a top bar.

In this UIViewController, add a view pinned to the top, leading and trailing and give it a height. This is your search area in your diagram.

Then add a container view to put your split view controller in. You want to pin the top of this to the search view, leading and trailing and bottom to the controllers view.

Add your UISplitViewController as a child controller of this container view.

This gives you what you have in your diagram.

This is very simple to do in storyboard in minutes. To do it in code, you will need to look at the documentation for how to add a child controller. https://developer.apple.com/library/prerelease/ios/featuredarticles/ViewControllerPGforiPhoneOS/ImplementingaContainerViewController.html

Update: Try the following code in you UIViewController:

- (void)viewDidLoad {
    [super viewDidLoad];

    // Create top and bottom views
    UIView *topView=[[UIView alloc] init];
    UIView *bottomView=[[UIView alloc] init];

    // Stop constraints being auto generatyed.
    [topView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [bottomView setTranslatesAutoresizingMaskIntoConstraints:NO];

    // Set the colors so we can see the views.
    [topView setBackgroundColor:[UIColor redColor]];
    [bottomView setBackgroundColor:[UIColor blueColor]];

    // Add the two views
    [self.view addSubview:topView];
    [self.view addSubview:bottomView];

    //
    // Add constraints.
    //

    // Constraint dictionary
    NSMutableDictionary *viewDictionary=[NSMutableDictionary dictionaryWithObjectsAndKeys:topView, @"topView",bottomView,@"bottomView", nil];

    NSLayoutFormatOptions options;

    // Pin leading and trailing of top view
    NSArray *constraints=
        [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[topView]|"
                                                options:options
                                                metrics:nil
                                                  views:viewDictionary
         ];
    [self.view addConstraints:constraints];

    // Pin leading and trailing of bottom view
    constraints=
    [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[bottomView]|"
                                            options:options
                                            metrics:nil
                                              views:viewDictionary
     ];
    [self.view addConstraints:constraints];

    // Pin top view to top, give it height 100, pin bottom to bottom view and bottom
    // view to bottom.
    constraints=
    [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[topView(100)][bottomView]|"
                                            options:options
                                            metrics:nil
                                              views:viewDictionary
     ];
    [self.view addConstraints:constraints];

    //
    // Add Split View Controller as child.
    //

    // Left hand split view controller Temp for now.
    UIViewController *left=[[UIViewController alloc] init];
    left.view.backgroundColor = [UIColor orangeColor];

    // Right hand split view detail contreoller. Temp for now.
    UIViewController *right=[[UIViewController alloc] init];
    right.view.backgroundColor = [UIColor greenColor];

    // Create split view with left and right
    UISplitViewController *splitView=[[UISplitViewController alloc] init];
    splitView.viewControllers=@[left,right];

    // Add as a child controller to the bottom view
    [self addChildViewController:splitView];
    [bottomView addSubview:splitView.view];

    // Add constraints for split view.
    viewDictionary=[NSMutableDictionary dictionaryWithObjectsAndKeys:splitView.view,
                    @"splitView",nil];

    // Pin all sides to the container.
    constraints=
        [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[splitView]|"
                                                options:options
                                                metrics:nil
                                                  views:viewDictionary
         ];
    [bottomView addConstraints:constraints];

    constraints=
        [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[splitView]|"
                                                options:options
                                                metrics:nil
                                                  views:viewDictionary
     ];
    [bottomView addConstraints:constraints];

    // Complete contract for adding child controller.
    [splitView didMoveToParentViewController:self];
}

Answer 2

Thanks to Rory:

let topView = UIView()
let bottomView = UIView()

topView.setTranslatesAutoresizingMaskIntoConstraints(false)
bottomView.setTranslatesAutoresizingMaskIntoConstraints(false)

topView.backgroundColor = UIColor.redColor()
bottomView.backgroundColor = UIColor.blueColor()

self.view.addSubview(topView)
self.view.addSubview(bottomView)

var viewDictionary = Dictionary(dictionaryLiteral: ("topView", topView),("bottomView", bottomView))

var options = NSLayoutFormatOptions()

var constraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[topView]|", options: nil, metrics: nil, views: viewDictionary)

self.view.addConstraints(constraints)

constraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[bottomView]|", options: nil, metrics: nil, views: viewDictionary)

self.view.addConstraints(constraints)

constraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[topView(100)][bottomView]|", options: nil, metrics: nil, views: viewDictionary)

self.view.addConstraints(constraints)

let left = UIViewController()
left.view.backgroundColor = UIColor.orangeColor()

let right = UIViewController()
right.view.backgroundColor = UIColor.greenColor()

let splitView = UISplitViewController()

splitView.viewControllers = [left, right]

self.addChildViewController(splitView)
bottomView.addSubview(splitView.view)

viewDictionary = Dictionary(dictionaryLiteral: ("splitView", splitView.view))

constraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[splitView]|", options: options, metrics: nil, views: viewDictionary)

bottomView.addConstraints(constraints)

constraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[splitView]|",options: options, metrics: nil, views: viewDictionary)

bottomView.addConstraints(constraints)
splitView.didMoveToParentViewController(self)

// I'm getting this error now for some reason.

2015-10-12 18:20:13.417 GPSApp[36430:478129] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7981a8c0 H:|-(0)-[UILayoutContainerView:0x7981c100]   (Names: '|':UIView:0x7983e5e0 )>",
    "<NSLayoutConstraint:0x7981a860 H:[UILayoutContainerView:0x7981c100]-(0)-|   (Names: '|':UIView:0x7983e5e0 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x79815350 h=-&- v=-&- UILayoutContainerView:0x7981c100.midX == UIView:0x7983e5e0.midX + 512>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7981a860 H:[UILayoutContainerView:0x7981c100]-(0)-|   (Names: '|':UIView:0x7983e5e0 )>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
2015-10-12 18:20:13.419 GPSApp[36430:478129] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7981a270 V:|-(0)-[UILayoutContainerView:0x7981c100]   (Names: '|':UIView:0x7983e5e0 )>",
    "<NSLayoutConstraint:0x7981a220 V:[UILayoutContainerView:0x7981c100]-(0)-|   (Names: '|':UIView:0x7983e5e0 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x798153b0 h=-&- v=-&- UILayoutContainerView:0x7981c100.midY == UIView:0x7983e5e0.midY + 384>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7981a220 V:[UILayoutContainerView:0x7981c100]-(0)-|   (Names: '|':UIView:0x7983e5e0 )>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.