I'm creating my own class with inherits from UIView, class MyView: UIView {
The idea is to create a view and put some label into it. I'm achieving this by:
init() {
super.init(frame: CGRect(x: 8.0, y: 104.0, width: UIScreen.main.bounds.width - 16.0, height: 60.0))
initialize()
}
where
fileprivate func initialize() {
label = UILabel()
label.numberOfLines = 0
label = UILabel(frame: CGRect(x: 16.0, y: 8.0, width: self.frame.width - 32.0, height: self.frame.height - 16.0))
self.addSubview(label)
}
and everything works fine for now.
But now I want to make this custom view height dynamic, so the height of my view will depend on the height(text) of the label in it.
I've tried to add:
let constraints = [
NSLayoutConstraint(item: label, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 8.0),
NSLayoutConstraint(item: label, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 8.0),
NSLayoutConstraint(item: label, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 8.0),
NSLayoutConstraint(item: label, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: 8.0)]
label.addConstraints(constraints)
and
self.translatesAutoresizingMaskIntoConstraints = false
self.heightAnchor.constraint(greaterThanOrEqualToConstant: 60.0).isActive = true
and eventually I get a huge error in logs with:
The view hierarchy is not prepared for the constraint
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.
Can someone help me with this problem?
I've googled it but could not find anything which would help me to solve my problem.
Maybe I do my layouts wrong.
I will appreciate your help!
the problem as of
label.addConstraints(constraints)
you add constraints between parent and the label to the label which is incorrect you need to add them to parent
self.addConstraints(constraints)
Another apple's recommended way is to
NSLayoutConstraint.activate([constraints])
Which will handle it for you
let mmmview = MyView()
mmmview.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(mmmview)
let constraints = [
NSLayoutConstraint(item: mmmview , attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 8.0),
NSLayoutConstraint(item: mmmview , attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 8.0),
NSLayoutConstraint(item: mmmview , attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 8.0)
]
NSLayoutConstraint.activate(constraints)
Related
I'm trying to get my head around how adding constraints programmatically works. So far I have my code like so:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
//addViewStandard()
addConstraintsView()
}
func addConstraintsView() {
let someView = UIView(frame: CGRect.zero)
someView.backgroundColor = UIColor.blue
// I want to mimic a frame set of CGRect(x: 20, y: 50, width: 50, height: 50)
let widthConstraint = NSLayoutConstraint(item: someView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 50)
let heightConstraint = NSLayoutConstraint(item: someView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 50)
let leadingConstraint = NSLayoutConstraint(item: someView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 20)
someView.translatesAutoresizingMaskIntoConstraints = false
someView.addConstraints([widthConstraint, heightConstraint, leadingConstraint])
view.addSubview(someView)
}
}
Now when I run the app it crashes because of the leading constraint. The error message is "Impossible to set up layout with view hierarchy unprepared for constraint". What am I doing wrong here? Should I be adding the constraints to the object (the blue box on this case) or adding them to its superview?
EDIT:
After code changes I have:
func addConstraintsView() {
let someView = UIView(frame: CGRect.zero)
someView.backgroundColor = UIColor.blue
view.addSubview(someView)
someView.translatesAutoresizingMaskIntoConstraints = false
let widthConstraint = NSLayoutConstraint(item: someView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 50)
let heightConstraint = NSLayoutConstraint(item: someView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 50)
let leadingConstraint = NSLayoutConstraint(item: someView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1.0, constant: 20)
someView.addConstraints([widthConstraint, heightConstraint])
view.addConstraints([leadingConstraint])
}
First of all,
view.addSubview(someView)
someView.translatesAutoresizingMaskIntoConstraints = false
should come before the constraints phase; you have to apply the constraints AFTER someView is added to its superview.
Also, if you are targeting iOS 9, I'd advise you to use layout anchors like
let widthConstraint = someView.widthAnchor.constraint(equalToConstant: 50.0)
let heightConstraint = someView.heightAnchor.constraint(equalToConstant: 50.0)
let leadingConstraint = someView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20.0)
NSLayoutConstraint.activate([widthConstraint, heightConstraint, leadingConstraint])
This way you don't have to worry about which view to apply the constraints to.
Finally (and to clear up your doubt), if you can't use layout anchors, you should add the leading constraint to the superview, not the view.
I have the following code:
override func viewDidLoad() {
super.viewDidLoad()
let fbLoginButton = FBSDKLoginButton()
fbLoginView.contentMode = UIViewContentMode.scaleAspectFit
fbLoginView.addSubview(fbLoginButton)
fbLoginButton.frame.origin = fbLoginView.frame.origin
fbLoginButton.frame = CGRect(x: fbLoginView.frame.origin.x, y: fbLoginView.frame.origin.y, width: fbLoginView.frame.width, height: fbLoginView.frame.height)
print("INFO width: \(fbLoginView.frame.width) height: \(fbLoginView.frame.height)")
print("INFO width: \(fbLoginButton.frame.width) height: \(fbLoginButton.frame.height)")
// fbLoginButton.delegate = self
}
I am trying to add the facebook login button within a small subview that I have in my main view. For some reason when I print out the width/height of the UIView, and facebook login button I see this:
INFO width: 1000.0 height: 1000.0
INFO width: 1000.0 height: 1000.0
BUT when I run the app on the simulator I see that the view isnt 1000.0 x 1000.0 (it would be overflowing off of the screen but it isn't. It looks like this:
You can se the blue of the button, and that its correctly WITHIN the smaller subview but, the button actually seems to be overflowing larger than the view. What I don't get why the view is the correct size in the simulator, but its saying that its size is so large. I've read posts here which tell me to resize the button to aspect fit, and I've played around with all of the other options but no luck.
I have the smaller uiview set up like this:
In viewDidLoad, the app hasn't yet completed its auto-layout pass so many views are 1000x1000pts.
So in your code when you set the loginButton's size to match the loginView's size, it copies the value of 1000 across.
Later on when your app applies its auto layout constraints, the containing loginView is resized to the correct size, but within it the loginButton has its old, larger size.
The correct solution would be to correctly constrain the loginButton using autolayout - the simplest change would be to add constraints to it within loginView so that it's resized at the same time:
NSLayoutConstraint(item: fbLoginButton, attribute: .Trailing, relatedBy: .Equal, toItem: fbLoginView, attribute: .Trailing, multiplier: 1.0, constant: 0.0).active = true
NSLayoutConstraint(item: fbLoginButton, attribute: .Leading, relatedBy: .Equal, toItem: fbLoginView, attribute: .Leading, multiplier: 1.0, constant: 0.0).active = true
NSLayoutConstraint(item: fbLoginButton, attribute: .Top, relatedBy: .Equal, toItem: fbLoginView, attribute: .Top, multiplier: 1.0, constant: 0.0).active = true
NSLayoutConstraint(item: fbLoginButton, attribute: .Bottom, relatedBy: .Equal, toItem: fbLoginView, attribute: .Bottom, multiplier: 1.0, constant: 0.0).active = true
Or it would probably be cleaner to add the Facebook Button within your storyboard directly (add an empty view and set its class to FBSDKLoginButton).
The problem with frames in viewDidLoad() is that they are not layouted. They do not have their final size yet. You could use viewDidLayoutSubviews() for that.
I would suggest to use NSLayoutConstraints, though. Looking at what you were trying to do with your frame, you can simply create the constraints and add them to your view.
let topConstraint = NSLayoutConstraint(item: fbLoginButton, attribute: .top, relatedBy: .equal, toItem: fbLoginView, attribute: .top, multiplier: 1, constant: 0)
let bottomConstraint = NSLayoutConstraint(item: fbLoginButton, attribute: .bottom, relatedBy: .equal, toItem: fbLoginView, attribute: .bottom, multiplier: 1, constant: 0)
let leadingConstraint = NSLayoutConstraint(item: fbLoginButton, attribute: .leading, relatedBy: .equal, toItem: fbLoginView, attribute: .leading, multiplier: 1, constant: 0)
let trailingConstraint = NSLayoutConstraint(item: fbLoginButton, attribute: .trailing, relatedBy: .equal, toItem: fbLoginView, attribute: .trailing, multiplier: 1, constant: 0)
self.view.addConstraints([topConstraint, bottomConstraint, leadingConstraint, trailingConstraint])
I'm new to AutoLayout and would like to display my UITextField at 100% width with a consistent 15px left and right margin, like so:
Typically I would do this using CGRect, setting the width to the containing view's width minus 30px, then offset the left side by 15px:
searchTextField.frame = CGRectMake(15, 0, view.frame.width - 30, 50)
But I'd like to learn AutoLayout for this sort of thing, since it's the way to go these days. I should note that I am doing everything programmatically -- no Storyboards here.
I'd love it if someone could help me out!
Update
Wow! Thank you for all the responses. I believe all of them would achieve what I'm trying to do, but there can only be one :)
Usually I use for this cocoapod that is dealing with constraints, but if you need pure apple solution documentation states:
You have three choices when it comes to programmatically creating
constraints: You can use layout anchors, you can use the
NSLayoutConstraint class, or you can use the Visual Format Language.
Approach with NSLayoutConstraints in your case would be:
NSLayoutConstraint(item: textField, attribute: .Leading, relatedBy: .Equal, toItem: parentView, attribute: .LeadingMargin, multiplier: 1.0, constant: 15.0).active = true
NSLayoutConstraint(item: textField, attribute: .Trailing, relatedBy: .Equal, toItem: parentView, attribute: .TrailingMargin, multiplier: 1.0, constant: -15.0).active = true
NSLayoutConstraint(item: textField, attribute: .Top, relatedBy: .Equal, toItem: parentView, attribute: .TopMargin, multiplier: 1.0, constant: 50.0).active = true
Remember that if you don't have any constraints in the view, they would be added automatically and you'll have to deal with them and conflicts that would be created by adding new constraints on runtime. To avoid this you could either create textField manually and add it to the view or set constraints with low priority in the Interface Builder .
Assuming the parent of the text field is view, do this after view.addSubview(searchTextField):
NSLayoutConstraint.activateConstraints([
searchTextField.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 15),
searchTextField.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor, constant: -15),
])
Use this code:
let topConstraint = NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Top, relatedBy: .Equal, toItem: self.view, attribute: NSLayoutAttribute.Top, multiplier: 1.0, constant: 0)
let trailingConstraint = NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Trailing, relatedBy: .Equal, toItem: self.view, attribute: NSLayoutAttribute.Trailing, multiplier: 1.0, constant: 15)
let leadingConstraint = NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Leading, relatedBy: .Equal, toItem: self.view, attribute: NSLayoutAttribute.Leading, multiplier: 1.0, constant: 15)
let heightConstraint = NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Height, relatedBy: .Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 50)
self.view.addConstraint(topConstraint )
self.view.addConstraint(trailingConstraint)
self.view.addConstraint(leadingConstraint)
self.view.addConstraint(heightConstraint)
Set the constraints in storyboard.
Click on the text field then click on in the bottom left. From there you can choose constraints like that.
To use Auto Layout, you need to define constraints for your text field.Here, I have created four constraints(Leading, Trailing, Top and Height) related to its superview.
func addLabelConstraints(superView:UIView) {
let leading = NSLayoutConstraint(item: searchTextField, attribute: .Leading, relatedBy: .Equal, toItem: superView, attribute: .Leading, multiplier: 1, constant: 15)
superview!.addConstraint(leading)
let trailing = NSLayoutConstraint(item: searchTextField, attribute: .Trailing, relatedBy: .Equal, toItem: superView, attribute: .Trailing, multiplier: 1, constant: 15)
superView.addConstraint(trailing)
let top = NSLayoutConstraint(item: searchTextField, attribute: .Top, relatedBy: .Equal, toItem: superView, attribute: .Top, multiplier: 1, constant: 0)
superView.addConstraint(top)
let height = NSLayoutConstraint(item: searchTextField, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .Height, multiplier: 0, constant: 50)
superView.addConstraint(height)
}
I am attempting to programatically add the UIView courseView to a container view (called container) that I have drawn in Interface Builder in the Storyboard.
I would like courseView to scale to fit the container. With the following code nothing shows - the courseView does not appear. What am I missing?
var courseView: UIView?
#IBOutlet weak var container: UIView!
override func viewDidLoad() {
super.viewDidLoad()
courseView = UIView(frame: CGRectMake(0, 0, 1000, 1000))
courseView?.backgroundColor = UIColor.blueColor()
view.addSubview(courseView!)
courseView!.translatesAutoresizingMaskIntoConstraints = false
let courseWidthConstraint = NSLayoutConstraint(item: courseView!, attribute: .Width, relatedBy: .LessThanOrEqual, toItem: container, attribute: .Width, multiplier: 1.0, constant: 0)
let courseHeightConstraint = NSLayoutConstraint(item: courseView!, attribute: .Height, relatedBy: .LessThanOrEqual, toItem: container, attribute: .Height, multiplier: 1.0, constant: 0)
let courseViewConstraint = NSLayoutConstraint(item: courseView!, attribute: .Height , relatedBy: .Equal , toItem: courseView!, attribute: .Width, multiplier: 2.0, constant: 0)
self.view.addConstraints([courseWidthConstraint, courseHeightConstraint, courseViewConstraint])
}
It is not clear to me what you are really trying to achieve here. But as a first suggestion, try replacing the .LessThanOrEqual with .Equal for the width constraint.
One other thing you need for your constraints to work, are some top and leading constraints to the container(top is just a suggestion you might want some other alignment for the height)
let courseLeadingConstraint = NSLayoutConstraint(item: courseView!, attribute: .Leading, relatedBy: .Equal, toItem: container, attribute: .Leading, multiplier: 1.0, constant: 0)
let courseTopConstraint = NSLayoutConstraint(item: courseView!, attribute: .Top, relatedBy: .Equal, toItem: container, attribute: .Top, multiplier: 1.0, constant: 0)
The aspect ration constraint for having the height half the width would be the following
let courseViewConstraint = NSLayoutConstraint(item: courseView!, attribute: . Width , relatedBy: .Equal , toItem: courseView!, attribute: .Height, multiplier: 2.0, constant: 0)
Let me know if it worked out.
I've got a situation where I would like a view to be centered in its superview, remain square, but fill as much height as possible without going off the edge, i.e., it should look at the available vertical and horizontal space, choosing the smallest between the 2.
There are 2 other views, one below and one above, that will both be either a button or label. The bottom/top of these views should be attached to the top/bottom of the central view. I can get this to work, to an extent, but I'll explain my issue below, and what I've got so far:
Top label has:
.Top >= TopLayoutGuide.Bottom
.Top = TopLayoutGuide.Bottom (priority 250)
.Right = CentralView.Right
Central view has:
Center X and Y = Superview Center X and Y
.Height <= Superview.Width * 0.9
.Width = self.Height
.Top = TopLabel.Bottom
Bottom button has:
.Right = CentralView.Right
.Top = CentralView.Bottom
.Bottom <= (BottomLayoutGuide.Top - 16)
Running this seems fine, and produces the desired results:
However, if I make the view an instance of my custom class and add a UIButton subview, it all goes wrong. In this class I perform:
self.topLeftButton = CustomButtonClass()
self.topLeftButton.setTranslatesAutoresizingMaskIntoConstraints(false)
self.addSubview(self.topLeftButton)
self.addConstraints([
NSLayoutConstraint(item: self.topLeftButton, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: 0),
NSLayoutConstraint(item: self.topLeftButton, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1, constant: 0),
NSLayoutConstraint(item: self.topLeftButton, attribute: .Height, relatedBy: .Equal, toItem: self, attribute: .Height, multiplier: 0.5, constant: 0),
NSLayoutConstraint(item: self.topLeftButton, attribute: .Width, relatedBy: .Equal, toItem: self.topLeftButton, attribute: .Width, multiplier: 1, constant: 0)
])
Using this code the view collapses down to the following:
I can't figure out why this is. I've made a few small tweaks here and there, but not managed to get it to work as desired. If I add the same button in IB the view wants to collapse again, and it's as if the button will not grow in height.
In real life I wouldn't subclass UIButton, but have done in my answer, as that is what the question indicated. UIButton works best through composition. So maybe better to create a UIButton, then modify its properties.
class FooViewController: UIViewController {
override func viewDidLoad() {
var view = CustomView()
view.backgroundColor = UIColor.darkGrayColor()
var label = UILabel()
label.text = "Label"
var button = UIButton.buttonWithType(.System) as UIButton
button.setTitle("Button", forState: .Normal)
view.setTranslatesAutoresizingMaskIntoConstraints(false)
label.setTranslatesAutoresizingMaskIntoConstraints(false)
button.setTranslatesAutoresizingMaskIntoConstraints(false)
self.view.addSubview(view)
self.view.addSubview(label)
self.view.addSubview(button)
// The width should be as big as possible...
var maxWidthConstraint = NSLayoutConstraint(item: view, attribute: .Width, relatedBy: .Equal, toItem: view.superview, attribute: .Width, multiplier: 1, constant: 0);
// ... but not at the expense of other constraints
maxWidthConstraint.priority = 1
self.view.addConstraints([
// Max width, if possible
maxWidthConstraint,
// Width and height can't be bigger than the container
NSLayoutConstraint(item: view, attribute: .Width, relatedBy: .LessThanOrEqual, toItem: view.superview, attribute: .Width, multiplier: 1, constant: 0),
NSLayoutConstraint(item: view, attribute: .Width, relatedBy: .LessThanOrEqual, toItem: view.superview, attribute: .Height, multiplier: 1, constant: 0),
// Width and height are equal
NSLayoutConstraint(item: view, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 1, constant: 0),
// View is centered
NSLayoutConstraint(item: view, attribute: .CenterX, relatedBy: .Equal, toItem: view.superview, attribute: .CenterX, multiplier: 1, constant: 0),
NSLayoutConstraint(item: view, attribute: .CenterY, relatedBy: .Equal, toItem: view.superview, attribute: .CenterY, multiplier: 1, constant: 0),
])
// Label above view
self.view.addConstraints([
NSLayoutConstraint(item: label, attribute: .Top, relatedBy: .GreaterThanOrEqual, toItem: label.superview, attribute: .Top, multiplier: 1, constant: 0),
NSLayoutConstraint(item: label, attribute: .Bottom, relatedBy: .Equal, toItem: view, attribute: .Top, multiplier: 1, constant: 0),
NSLayoutConstraint(item: label, attribute: .Right, relatedBy: .LessThanOrEqual, toItem: view, attribute: .Right, multiplier: 1, constant: 0),
])
// Button below view
self.view.addConstraints([
NSLayoutConstraint(item: button, attribute: .Bottom, relatedBy: .LessThanOrEqual, toItem: button.superview, attribute: .Bottom, multiplier: 1, constant: 0),
NSLayoutConstraint(item: button, attribute: .Top, relatedBy: .Equal, toItem: view, attribute: .Bottom, multiplier: 1, constant: 0),
NSLayoutConstraint(item: button, attribute: .Right, relatedBy: .LessThanOrEqual, toItem: view, attribute: .Right, multiplier: 1, constant: 0),
])
}
}
class CustomView: UIView {
required init(coder: NSCoder) {
super.init(coder: coder)
}
override init(frame: CGRect) {
super.init(frame: frame)
}
override init() {
super.init()
var button = CustomButton()
button.setTitle("Custom Button", forState: UIControlState.Normal)
button.setTranslatesAutoresizingMaskIntoConstraints(false)
self.addSubview(button)
// Custom button in the top left
self.addConstraints([
NSLayoutConstraint(item: button, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: 0),
NSLayoutConstraint(item: button, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1, constant: 0),
])
}
}
class CustomButton: UIButton {
required init(coder: NSCoder) {
super.init(coder: coder)
}
override init(frame: CGRect) {
super.init(frame: frame)
}
override init() {
super.init()
self.backgroundColor = UIColor.greenColor()
}
}