As an academic exercise for a future UI, I am trying to add constraints between two table views, belonging to two different child view controllers of the root controller. In my RootViewController class below, tvc is displayed as expected in a 400x500 frame, but tvc2 is consuming the entire frame instead of being a 400x500 frame to the right of tvc. Basically, the constraints are apparently being ignored. I'm using an iPad sim in landscape.
override func viewDidLoad() {
super.viewDidLoad()
let v = self.view
v.backgroundColor = UIColor.greenColor()
var tvc :OrderTableViewController = OrderTableViewController(style: UITableViewStyle.Plain)
var tvc2 :OrderTableViewController = OrderTableViewController(style: UITableViewStyle.Plain)
self.addChildViewController(tvc)
self.addChildViewController(tvc2)
v.addSubview(tvc.view)
v.addSubview(tvc2.view)
tvc.didMoveToParentViewController(self)
tvc2.didMoveToParentViewController(self)
//tvc.view.setTranslatesAutoresizingMaskIntoConstraints(false)
//tvc2.view.setTranslatesAutoresizingMaskIntoConstraints(false)
//self.view.setTranslatesAutoresizingMaskIntoConstraints(false)
tvc.view.frame = CGRectMake(0, 0, 400, 500)
self.view.addConstraint(NSLayoutConstraint(
item: tvc2.view,
attribute: .Top,
relatedBy: .Equal,
toItem: tvc.view,
attribute: .Top,
multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(
item: tvc2.view,
attribute: .Bottom,
relatedBy: .Equal,
toItem: tvc.view,
attribute: .Bottom,
multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(
item: tvc2.view,
attribute: .Width,
relatedBy: .Equal,
toItem: nil,
attribute: .NotAnAttribute,
multiplier: 1, constant: 400))
self.view.addConstraint(NSLayoutConstraint(
item: tvc2.view,
attribute: .Left,
relatedBy: .Equal,
toItem: tvc.view,
attribute: .Right,
multiplier: 1, constant: 0))
}
This line,
tvc2.view.setTranslatesAutoresizingMaskIntoConstraints(false)
should be uncommented. When you add a view programmatically, and you're using constraints, you should always set that to false. On the other hand, you should not set that to false for controller's main view.
Also, the width constraint, since it only applies to tvc2, should be added to tvc2, not to self.view (although it should work either way).
It's also a bit odd, that you're adding one view using frames, and the other with constraints. It would be better to do both using the same paradigm.
Related
I want to place header view on top of screen with NSLayoutConstraint (I must use NSLayoutConstraint). When I do it like in below code, view places corruptly in somewhere else and also controllers background color turns black and nothing works. Where am I doing wrong?
I searched below posts for not opening a duplicate post but nothing fixed it:
Programmatically creating constraints bound to view controller margins
Programmatically Add CenterX/CenterY Constraints
EDIT: This controller is inside navigation controller but I'm not sure If It is related.
override func viewDidLoad(){
self.view.backgroundColor = UIColor.white
boxView.backgroundColor = Color.Common.welcomeScreenBackgroundColor.withAlphaComponent(0.5)
boxView.translatesAutoresizingMaskIntoConstraints = false
self.view.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubView(boxView)
}
override func viewDidLayoutSubviews() {
//Header = 20 from left edge of screen
let cn1 = NSLayoutConstraint(item: boxView, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1.0, constant: 0)
//Header view trailing end is 20 px from right edge of the screen
let cn2 = NSLayoutConstraint(item: boxView, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1.0, constant: 0)
//Header view height = constant 240
let cn3 = NSLayoutConstraint(item: boxView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant:240)
//Header view vertical padding from the top edge of the screen = 20
let cn5 = NSLayoutConstraint(item: boxView, attribute: .top, relatedBy: .equal, toItem: self.topLayoutGuide, attribute: .bottom, multiplier: 1.0, constant: 0)
self.view.addConstraints([cn1,cn2,cn3,cn5])
}
The problem was setting translatesAutoresizingMaskIntoConstraints to false on Superview. So I deleted the;
self.view.translatesAutoresizingMaskIntoConstraints = false
and this solves the problem. I think this causes app creates constraint for superview.
I created a .xib with freeform and implement it like this
if let alertView = Bundle.main.loadNibNamed(Constants.XIB.titleImageLabelThreeButtonsAlertView, owner: self, options: nil)?.first as? TitleImageLabelThreeButtonsAlertView {
view.addSubview(alertView)
alertView.center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
view.addConstraint(NSLayoutConstraint(item: alertView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1, constant: 20))
view.addConstraint(NSLayoutConstraint(item: alertView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 20))
alertView.autoresizingMask = [UIViewAutoresizing.flexibleLeftMargin, UIViewAutoresizing.flexibleRightMargin, UIViewAutoresizing.flexibleTopMargin, UIViewAutoresizing.flexibleBottomMargin]
self.view.layoutIfNeeded()
}
I call this code in viewDidAppear. The center thing seems to work, but it seems that the trailing and leading don't have any effect. I want them with a distance of 20, my alertView should have a fixed height and appear in center.
The xib has always the same size (see screenshots)
My originally targeted was to get a xib that I can implement in every view for every device. So what is the best way to get this?
my xib file
simulator iphone 7
simulator iphone 4
You are mixing up auto layout and fixed placement (with autoresizing mask). What you want to do is completely use auto layout so that the view will adjust its layout automatically. You say you want a horizontal distance of 20, a fixed height and to be centred so I would do this:
if let alertView = Bundle.main.loadNibNamed(Constants.XIB.titleImageLabelThreeButtonsAlertView, owner: self, options: nil)?.first as? TitleImageLabelThreeButtonsAlertView {
view.addSubview(alertView)
// Start using auto layout
alertView.translatesAutoresizingMaskIntoConstraints = false
// Set the leading and trailing constraints for horizontal placement
view.addConstraint(NSLayoutConstraint(item: alertView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1, constant: -20))
view.addConstraint(NSLayoutConstraint(item: alertView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 20))
// Centre it vertically
view.addConstraint(NSLayoutConstraint(item: alertView, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: 0))
// Set the fixed height constraint
let fixedHeight: CGFloat = 100
view.addConstraint(NSLayoutConstraint(item: alertView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 0, constant: fixedHeight))
}
That will get you what you want no matter how the device, superview, orientation, etc changes.
Various answers to this are on Stack Overflow, but I can't seem to get it to work.
I want a UIPickerView to have a width equal to 90 % of the superview's frame width, a height to be 35 % of superview's
frame height, centred horizontally
and to have it's top equal to the top of the superview but below the navigation bar (this last constraint is what I'm having difficulty with).
At the moment, the top of the picker view seems to be behind the navigation bar. I've tried adding edgesForExtendedLayout = .Top and extendedLayoutIncludesOpaqueBars = false so that the picker view is under the navigation bar. I've also tried adding a constant to the constraint
NSLayoutConstraint(item: somePickerView, attribute: .Top, relatedBy: .Equal, toItem: superview, attribute: .TopMargin, multiplier: 1.0, constant: navigationController?.navigationBar.frame.height) but this didn't move the picker view enough.
class ViewController: UIViewController {
let superview = self.view
override func viewDidLoad() {
super.viewDidLoad()
edgesForExtendedLayout = .Top
extendedLayoutIncludesOpaqueBars = false
somePickerView = UIPickerView()
somePickerView.translatesAutoresizingMaskIntoConstraints = false
superview.addSubview(somePickerView)
superview.addConstraint(NSLayoutConstraint(item: somePickerView, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .Width, multiplier: 1, constant: superview.frame.width * 0.90))
superview.addConstraint(NSLayoutConstraint(item: somePickerView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .Height, multiplier: 1, constant: superview.frame.height * 0.35))
superview.addConstraint(NSLayoutConstraint(item: somePickerView, attribute: .CenterX, relatedBy: .Equal, toItem: superview, attribute: .CenterX, multiplier: 1, constant: 0))
// the following constraint's not working as expected:
superview.addConstraint(NSLayoutConstraint(item: somePickerView, attribute: .Top, relatedBy: .Equal, toItem: superview, attribute: .TopMargin, multiplier: 1.0, constant: 0))
}
}
any advice for the constraint to place the picker view at the top but below the navigation bar?
I want to add a leading, trailing, bottom and width constraint programmatically to a UISearchController. This is my code:
#IBOutlet weak var navigationBar: UIView!
// create search bar
searchBar = UISearchController(searchResultsController: nil)
navigationBar.addSubview(searchBar.searchBar)
searchBar.searchBar.translatesAutoresizingMaskIntoConstraints = false
let leftConstraint = NSLayoutConstraint(item: searchBar.searchBar, attribute: .Leading, relatedBy: .Equal, toItem: navigationBar, attribute: .Leading, multiplier: 1, constant: 0)
let rightConstraint = NSLayoutConstraint(item: searchBar.searchBar, attribute: .Trailing, relatedBy: .Equal, toItem: navigationBar, attribute: .Trailing, multiplier: 1, constant: 0)
let bottomConstraint = NSLayoutConstraint(item: searchBar.searchBar, attribute: .Bottom, relatedBy: .Equal, toItem: navigationBar, attribute: .Bottom, multiplier: 1, constant: 0)
let heightConstraint = NSLayoutConstraint(item: searchBar.searchBar, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 44)
navigationBar.addConstraints([leftConstraint, rightConstraint, bottomConstraint, widthConstraint])
When running the app, the search bar appears correctly, but when I press on the search bar, it shrinks, and if I press another time the app crashes. Here is the output:
2015-08-12 20:20:37.696 Contacts++[96997:8547485] The view hierarchy is not prepared for the constraint: <NSLayoutConstraint:0x7fb22580c7a0 UIView:0x7fb225817b20.leading == UIView:0x7fb223449860.leading>
When added to a view, the constraint's items must be descendants of that view (or the view itself). This will crash if the constraint needs to be resolved before the view hierarchy is assembled. Break on -[UIView(UIConstraintBasedLayout) _viewHierarchyUnpreparedForConstraint:] to debug.
2015-08-12 20:20:37.697 Contacts++[96997:8547485] *** Assertion failure in -[UIView _layoutEngine_didAddLayoutConstraint:roundingAdjustment:mutuallyExclusiveConstraints:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3491.2.5/NSLayoutConstraint_UIKitAdditions.m:590
Why do you need to create an instance of 'UISearchController' and get its searchBar?
why not just make the searchBar from UISearchBar?
// create a searchBar from UISearchBar
let searchBar = UISearchBar(frame: CGRectZero)
// add searchBar to navigationBar
navigationController?.navigationBar.addSubview(searchBar)
// call sizeToFit.. this will set the frame of the searchBar to exactly the same as the size of the allowable frame of the navigationBar
searchBar.sizeToFit()
// now reframe the searchBar to add some margins
var frame = searchBar.frame
frame.origin.x = 20
frame.size.width -= 40
searchBar.frame = frame // set new frame with margins
note: you won't need any of those constraint to achieve this.
But if you really prefer the constraint, here's the constraint code without a crash.
let searchBar = UISearchBar(frame: CGRectZero)
navigationController?.navigationBar.addSubview(searchBar)
searchBar.setTranslatesAutoresizingMaskIntoConstraints(false)
let leftConstraint = NSLayoutConstraint(item: searchBar, attribute: .Leading, relatedBy: .Equal, toItem: navigationController?.navigationBar, attribute: .Leading, multiplier: 1, constant: 20) // add margin
let bottomConstraint = NSLayoutConstraint(item: searchBar, attribute: .Bottom, relatedBy: .Equal, toItem: navigationController?.navigationBar, attribute: .Bottom, multiplier: 1, constant: 1)
let topConstraint = NSLayoutConstraint(item: searchBar, attribute: .Top, relatedBy: .Equal, toItem: navigationController?.navigationBar, attribute: .Top, multiplier: 1, constant: 1)
let widthConstraint = NSLayoutConstraint(item: searchBar, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: self.view.frame.size.width - 40) // - margins from both sides
navigationController?.navigationBar.addConstraints([leftConstraint, bottomConstraint, topConstraint, widthConstraint])
Do you really want to set the width of the navigatinBar to 44 points? Width is horizontal. You already have a width constraint by adding trailing and leading constraints.
So I have 3 views set up in interface builder (XCode 6). They are linked to the ViewController that owns them. Also I have 3 subclasses of UIVIew in my project. At runtime I would need to change the class of one of the views from UIView to my custom view subclass.
How do I do this in swift? (I need all the autolayout set up in IB to work the same after the change).
To achieve what you need you can create a view in IB and later in the code add required view as a subview.
To make added view occupy all container view space you need either update child view's frame or setup auto-layout constraints. Variant with frames needs to be repeated each time container view changes it size. Code bellow:
Auto-Layout Contraints
override func viewDidLoad() {
super.viewDidLoad()
self.myView = UIView(frame: CGRect())
self.myView.setTranslatesAutoresizingMaskIntoConstraints(false)
self.myViewContainer.addSubview(self.myView)
self.myViewContainer.addConstraint(NSLayoutConstraint(item: self.myView, attribute: .Top, relatedBy: .Equal, toItem: self.myViewContainer, attribute: .Top, multiplier: 1.0, constant: 0))
self.myViewContainer.addConstraint(NSLayoutConstraint(item: self.myView, attribute: .Right, relatedBy: .Equal, toItem: self.myViewContainer, attribute: .Right, multiplier: 1.0, constant: 0))
self.myViewContainer.addConstraint(NSLayoutConstraint(item: self.myView, attribute: .Bottom, relatedBy: .Equal, toItem: self.myViewContainer, attribute: .Bottom, multiplier: 1.0, constant: 0))
self.myViewContainer.addConstraint(NSLayoutConstraint(item: self.myView, attribute: .Left, relatedBy: .Equal, toItem: self.myViewContainer, attribute: .Left, multiplier: 1.0, constant: 0))
}
Manual Frame Updates
#IBOutlet var myViewContainer: UIView
var myView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
self.myView = UIView(frame: CGRect())
self.myViewContainer.addSubview(self.myView)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
self.myView.frame = self.myViewContainer.bounds
}
Frame updates can be done even if container view has auto-layout constraints.