I'm making a game where I have an SKView inside a UIView, and inside the SKView is an SKScene. In the viewDidLoad() method I want to change a constraint on the SKView, specifically the aspect ratio. I already have an aspect ratio of 1:1 applied to it, and I created a method to change the aspect ratio to the desired one. In my viewDidLoad() method, I call the following:
ratioConstraint = changeMultiplier(ratioConstraint, multiplier: 2)
where ratioConstraint is the constraint responsible for the aspect ratio, and changeMultiplier is the following:
func changeMultiplier(constraint: NSLayoutConstraint, multiplier: CGFloat) -> NSLayoutConstraint {
let newConstraint = NSLayoutConstraint(
item: constraint.firstItem,
attribute: constraint.firstAttribute,
relatedBy: constraint.relation,
toItem: constraint.secondItem,
attribute: constraint.secondAttribute,
multiplier: multiplier,
constant: constraint.constant)
newConstraint.priority = constraint.priority
NSLayoutConstraint.deactivateConstraints([constraint])
NSLayoutConstraint.activateConstraints([newConstraint])
return newConstraint
}
When I run this, I get the error:
<CAEAGLLayer: 0x7fc4e0f12450>: calling -display has no effect.
I don't understand what I'm doing wrong. I created another test project where I mimic this behavior, and it works as expected. Any help would be great. If it would help, I can post the test project to show the behavior that I want. Thanks for any help.
EDIT: After further testing, I've discovered that this error only occurs when changeMultiplier is called in viewDidLoad, which is why it was working in my test project because I was calling it upon pressing a button. When should I call it to update the aspect ratio before presenting the view?
EDIT: Moving it to viewDidLayoutSubviews fixed the problem. However, now if I rotate the device, the SKView disappears, which did not happen before.
Related
I've got a UIView that I'm adding programmatically with the following code in viewDidLoad
dropMenuView = YNDropDownMenu(frame: CGRect(x: 0.0, y: 0, width: UIScreen.main.bounds.width, height: 40.0), dropDownViews: [typeView, brandView, priceView], dropDownViewTitles:["Type", "Brand", "Price"])
self.view.addSubview(dropMenuView)
The above code creates a view with the correct width for the current orientation, but if a user changes their device orientation, the width of the view does not update. I've tried adding a new constraint in viewWillTransitionTo:
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
let widthConstraint = NSLayoutConstraint(item: dropMenuView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 100)
dropMenuView.addConstraints([widthConstraint])
dropMenuView.layoutIfNeeded()
}
I've tried a number of mutations on the above code trying to get it to work. Generally the error I get is:
'NSLayoutConstraint for >: Unknown layout attribute'
I can't help but think I'm going about this in the wrong way. Is adding new constraints upon orientation change the way to go? I tried just adding the equal width constraint after I add the subview, but I get the same error. I've never really added constraints programmatically before, so these are uncharted waters for me. What would be the best approach here?
Adding constraints during an orientation change is not a good idea. If you were to do it, you'd need to remove the previously added constraints to avoid over constraining your view.
The constraint you are trying to create isn't correct. You only use .notAnAttrubute when you are passing nil as the second view.
I suggest you use layout anchors instead. They're easier to write and read:
dropMenuView = YNDropDownMenu(frame: CGRect.zero, dropDownViews: [typeView, brandView, priceView], dropDownViewTitles:["Type", "Brand", "Price"])
self.view.addSubview(dropMenuView)
// you need to set this if you are adding your own constraints and once
// yet set it, the frame is ignored (which is why we just passed CGRect.zero
// when creating the view)
dropMenuView.translatesAutoresizingMaskIntoConstraints = false
// Create the constraints and activate them. This will set `isActive = true`
// for all of the constraints. iOS knows which views to add them to, so
// you don't have to worry about that detail
NSLayoutConstraint.activate([
dropMenuView.topAnchor.constraint(equalTo: view.topAnchor),
dropMenuView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
dropMenuView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
dropMenuView.heightAnchor.constraint(equalToConstant: 40)
])
I am trying to layout some custom views and when I try to activate the constraints, Xcode says that I can't use multiplier. Here is an example of the code:
class MenuView: UIView {
var addButton: AddButton!
var settingsButton: SettingsButton!
// ........
func setConstraints (withBarReference reference: NSLayoutYAxisAnchor) {
NSLayoutConstraints.activateConstraints([
// ........
addButton.centerXAnchor.constraintEqualToAnchor(self.centerXAnchor, multiplier: 0.5),
// ........
settingsButton.centerXAnchor.constraintEqualToAnchor(self.centerXAnchor, multiplier: 1.5)
])
}
}
The thing here is that Xcode gives a syntax error on the contraintEqualToAnchor: functions and says that I should replace "multiplier" to "constant".
Why can't I use the multiplier option with the X center anchors?
You can't set multiplier using helper functions, but you can set multiplier using NSLayoutConstraint initializer. Just got stuck by this myself, but found the answer.
Your code: addButton.centerXAnchor.constraintEqualToAnchor(self.centerXAnchor, multiplier: 0.5)
Correct code: NSLayoutConstraint(item: addButton, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 0.5, constant: 0)
Also, don't forget to activate this constraint by typing isActive = true
Previous answers work very weird now.
You can simply create UILayoutGuide with multiplier width/height with view and set guide.trailing equal to the centerX of your subview.
For example, if you need to place the addButton in the first 1/3 of a view and settingsButton in 2/3 you can simply set two layout guides
let addButtonGuide = UILayoutGuide()
self.addLayoutGuide(addButtonGuide)
addButtonGuide.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 1/3).isActive = true
addButtonGuide.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
addButton.centerXAnchor.constraint(equalTo: addButtonGuide.trailingAnchor).isActive = true
// same for settingsButton but using 2/3 for the multiplier
But the really best way is to use UIStackView and set its distribution property to equalCentering.
Another option is to use uncommon Auto Layout API to create NSLayoutDimension between two centerXAnchors and make constraint to self.widthAnchor:
addButton.centerXAnchor.anchorWithOffset(to: self.centerXAnchor)
.constraint(equalTo: self.widthAnchor, multiplier: 0.25).isActive = true
self.centerXAnchor.anchorWithOffset(to: settingsButton.centerXAnchor)
.constraint(equalTo: self.widthAnchor, multiplier: 0.25).isActive = true
It seems that in IB you can use the multiplier option with Center X and obtain the effect you're looking for (set the center of button1 at 1/4 the width of the view it's in, and the center of button2 at 2/3 of the width of the view it's in):
.
I tried to use it both in code and in IB, and in code I got the same error as you.
Surprisingly, in IB it worked, no errors, no warnings. (I am using Xcode 7, will try it in Xcode 8 to see if it still works).
You can't use multipliers on NSLayoutXAxisAnchor anchors - multiplying by a position along a line doesn't make sense in a way that the constraints system can understand. You can only use multipliers with NSLayoutDimension anchors, which measure lengths, like the width.
The layout you are trying to make would be better achieved using a stack view.
I can't seem to change the size of my MKMapView in Swift. How would one go on about it?
I've tried two different methods but without any luck:
var rect: CGRect = self.view.frame;
rect.origin.y = 0;
self.mapView.frame = rect;
and one where I used constraints and autolayout but it made the app crash. Any ideas?
EDIT:
When I write this code it doesn't crash but writes some warnings in the output:
let height = UIScreen.mainScreen().bounds.height
let width = UIScreen.mainScreen().bounds.width
let widthConstraint = NSLayoutConstraint(item: mapView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: width)
self.view.addConstraint(widthConstraint)
let heightConstraint = NSLayoutConstraint(item: mapView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: height)
self.view.addConstraint(heightConstraint)
The output says:
2016-03-09 18:43:02.697 Map[19782:3177712] 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.
(
"",
""
)
Will attempt to recover by breaking constraint
Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints
to catch this in the debugger. The methods in the
UIConstraintBasedLayoutDebugging category on UIView listed in
may also be helpful. Message from debugger:
Terminated due to signal 15
I don't really understand this, any ideas?
In this case you should use
self.mapView.addConstraint(widthConstraint)
and
self.mapView.addConstraint(heightConstraint)
You are trying to add a constraint that belongs to the mapView to its superview, that's not the way it's supposed to be. If you were adding a vertical distance between the mapview and another view you would add it to the superview, but not in this case.
For the constraint warning you try to add constraint without disabling the autorisizing mask into constraint translation.
Try adding this line:
mapView.translatesAutoresizingMaskIntoConstraints = false
Regards
I'm an Android developer trying my hand at Xcode and it's been unpleasant so far. What I'm trying to do is have a custom view that has three sub views:
UIImageView (for an icon)
UILabel (for the title)
UILabel (for the content)
I want it such that the content label's height grows and shrinks to wrap the text it contains (like Android's wrap_content). And then, I want the custom view to also grow and shrink to wrap all three sub views.
However, I cannot, for the life of me, figure out how these auto layouts/constraints work.
01) How would I make my UILabel's height grow/shrink to match its contained text?
02) How would I make my custom view's height grow/shrink to match its contained sub views?
override func layoutSubviews() {
super.layoutSubviews()
img_icon = UIImageView()
txt_title = UILabel()
txt_content = UILabel()
img_icon.backgroundColor = Palette.white
img_icon.image = icon
txt_title.text = title
txt_title.textAlignment = .Center
txt_title.font = UIFont(name: "Roboto-Bold", size:14)
txt_title.textColor = Palette.txt_heading1
txt_content.text = content
txt_content.textAlignment = .Center
txt_content.font = UIFont(name: "Roboto-Regular", size:12)
txt_content.textColor = Palette.txt_dark
txt_content.numberOfLines = 0
txt_content.preferredMaxLayoutWidth = self.frame.width
txt_content.lineBreakMode = NSLineBreakMode.ByWordWrapping
self.backgroundColor = Palette.white
addSubview(img_icon)
addSubview(txt_title)
addSubview(txt_content)
/*snip img_icon and txt_title constraints*/
let txt_content_x = NSLayoutConstraint(item: txt_content, attribute: .CenterX, relatedBy: .Equal, toItem: self, attribute: .CenterX, multiplier: 1, constant: 0)
let txt_content_y = NSLayoutConstraint(item: txt_content, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: 80)
let txt_content_w = NSLayoutConstraint(item: txt_content, attribute: .Width, relatedBy: .Equal, toItem: self, attribute: .Width, multiplier: 1, constant: 0)
let txt_content_h = NSLayoutConstraint(item: txt_content, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 40)
txt_content.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([
txt_content_x,
txt_content_y,
txt_content_w,
txt_content_h
])
}
I understand that, in the above code I've tried, I have the height set to a constant 40. This is only because I don't know how to achieve what I want.
[EDIT]
I've tried setting the height constraint to greater than or equal to but it just crashes Xcode.
[EDIT]
It crashes Xcode if I try to view it but works perfectly fine in the simulator. Question now is, why?
My height constraint is now:
let txt_content_h = NSLayoutConstraint(item: txt_content, attribute: .Height, relatedBy: .GreaterThanOrEqual, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 40)
It works in the simulator and has the desired behaviour. However, if I open the storyboard that contains the view, it crashes. It's definitely that line of code because changing it back to .Equal resolves the crash.
[EDIT]
My temporary fix is:
#if TARGET_INTERFACE_BUILDER
//use .Equal for height constraint
#else
//use .GreaterThanOrEqual for height constraint
#endif
This way, it doesn't crash Xcode and still renders the way I want it on the simulator.
[EDIT]
I removed the pre-processor check because I realized there's no actual thing like that defined and it still works now. I swear I've changed nothing else.
I am this close to giving up on iOS development because the interface builder keeps crashing Xcode without a reason when everything works in the simulator. Then, I do some nonsense edits and it works fine again.
01) How would I make my UILabel's height grow/shrink to match its contained text?
Just set top, left and right-constraint to the labels superview. Set the property number of lines to 0. Then it will start wrapping text.
02) How would I make my custom view's height grow/shrink to match its contained sub views?
By using interface builder this is much easier to achieve.
My suggestion to you is to start with your constraints in storyboard. You will not need to compile your code to see what the constraints will result in. Also you will get warnings and errors directly in the interface builder.
If you WANT to use programmatic constraints, my suggestion is to start using a framework for it. For example: https://github.com/SnapKit/SnapKit
You can use a trick with constraints to achieve wrap-content. For example :
let maximumWidth = frame / 4 //For example
yourView.widthAnchor.constraint(lessThanOrEqualToConstant: maximumWidth).isActive = true
The "maximumWidth" depends on your UI and your design and you can change it.
Also, you should set "lineBreakMode" in StoryBoard or in code like :
yourBtn.titleLabel?.lineBreakMode = .byCharWrapping //For UIButton or
yourTxt.textContainer.lineBreakMode = .byCharWrapping //For UITextView
Often clean will do a lot of good when code jams for no reason ar all, cmd-shift-k if i remember correctly
I understand there is no direct application of wrap content in iOS just like we have in Android and thats a big problem, I resolved it through manual anchors like this.
create a function with where in you calculate the height of the view using
mainView.contentSize.height
and then set anchors based on the total height to the enclosing view, call this function inside
override func viewWillLayoutSubviews()
And this would work, the viewWillLayoutSubviews() is a lifecycle method and whenever you override you have to do
super.viewWillLayoutSubviews()
This worked in my case, might work with yours too, if there is a better approach please do comment.
I am trying to use auto layout to to position two views like below picture. I know that with iOS 8 and size classes I can create layout for different layouts and it would work. However I am targeting iOS 7 and according to several posts such as https://stackoverflow.com/a/26841899/4170419, iPhone landscape mode of size classes will not work for earlier version. So, how can I position those two views on different orientation according to my picture? Thanks.
Compact width compact height size class will not work on iOS7. It will clash with compact width any height sadly.
Very good summary here: How can Xcode 6 adaptive UIs be backwards-compatible with iOS 7 and iOS 6?
For you particular case, I think you might have to resort to some manual work for iOS7. A possible approach would be:
1) Add a UIView between the label area and the right hand side pinned to the top, bottom, label area leading and trailing to superview with size 0. With no content this should end up 0 width.
2) Add a UIView between the label area and the bottom, pinned top to the label area, leading and trailing to the superview and to bottom with size 0. With no content this should end up 0 height.
3) Add IBOutlets for both views into your controller .h file.
4) In viewDidLoad, create and place the MKMapView into the appropriate view for the current orientation.
This gives you on startup the map view in the location you want.
5) Add orientation change detection to your controller. When the orientation changes, remove the MKMapView from its current view and add it to the view for the new orientation.
Not sure this will work, but it might give you what you want on iOS8 and iOS7 with one piece of code.
You may need to add constraints to the views for width/height or set the MKMapView frame to get the dimensions right for each orientation when layout occurs.
Hopefully somebody may come up with an easier solution, but seems size classes are unlikely to help in this case.
Finally I solved it :) First of all, both of my orientation show that mapview must be aligned to bottom and right of main view. These constraints are fixed. Then just to shut Xcode I set the constraints for portrait orientation.
Since iPad has enough screen state, I applied rotation fix to only iPhone. I am sure it can be written better way so if you have any comments please share. Thanks.
lazy var landscapeLeft: NSLayoutConstraint = {
return NSLayoutConstraint(item: self.myMap, attribute: .Leading, relatedBy: .Equal, toItem: self.idLabel, attribute: .CenterX, multiplier: 1.0, constant: 0)
}()
lazy var landscapeTop: NSLayoutConstraint = {
return NSLayoutConstraint(item: self.myMap, attribute: .Top, relatedBy: .Equal, toItem: self.idLabel, attribute: .Bottom, multiplier: 1.0, constant: 8)
}()
lazy var portraitLeft: NSLayoutConstraint = {
return NSLayoutConstraint(item: self.myMap, attribute: .Leading, relatedBy: .Equal, toItem: self.view, attribute: .Leading, multiplier: 1.0, constant: 8)
}()
lazy var portraitBottom: NSLayoutConstraint = {
return NSLayoutConstraint(item: self.myMap, attribute: .Top, relatedBy: .Equal, toItem: self.expectedDateLabel, attribute: .Bottom, multiplier: 1.0, constant: 8)
}()
func fixLayout() {
if (UIDevice.currentDevice().userInterfaceIdiom == UIUserInterfaceIdiom.Phone) && (UIDevice.currentDevice().orientation.isLandscape) {
self.view.removeConstraint(portraitLeft)
self.view.removeConstraint(portraitBottom)
self.view.addConstraint(landscapeLeft)
self.view.addConstraint(landscapeTop)
} else {
self.view.removeConstraint(landscapeLeft)
self.view.removeConstraint(landscapeTop)
self.view.addConstraint(portraitLeft)
self.view.addConstraint(portraitBottom)
}
}
override func updateViewConstraints() {
super.updateViewConstraints()
fixLayout()
}
UPDATE: I was so naive to think that the code I wrote before was compatible with iOS 7 just because it compiled to ios 7 target and worked on iOS 8 simulator. Thanks to #Rory McKinnel, I found out that I was using methods which are not available on iOS 7. This time, I tested on both iOS 7 and iOS 8 simulators and they worked. I hope that is the end of this problem.