NSLayoutConstraint in UICollectionViewCell: Size Class Customization doesn't work - ios

I'm trying to customize size of the image inside my UICollectionViewCell,
but I haven't managed to achieve the result yet.
here is my cell
and here is inspector for the height constraint
What am I doing wrong?
Update:
I've just noticed some logs
(
"<NSLayoutConstraint:0x78fcab10 V:[UIImageView:0x78fcaa00(129)]>",
"<NSLayoutConstraint:0x78fcb100 V:|-(8)-[UIImageView:0x78fcaa00] (Names: '|':UIView:0x78fca940 )>",
"<NSLayoutConstraint:0x78fcb130 V:[UILabel:0x78fcac40'Completed all MEDIUM quiz...']-(8)-| (Names: '|':UIView:0x78fca940 )>",
"<NSLayoutConstraint:0x78fcb190 V:[UIImageView:0x78fcaa00]-(8)-[UILabel:0x78fcac40'Completed all MEDIUM quiz...']>",
"<NSAutoresizingMaskLayoutConstraint:0x79195380 h=--& v=--& V:[UIView:0x78fca940(50)]>"
)
But I do not understand how NSAutoresizingMaskLayoutConstraint appears here.

From your screenshot:
you aligned image horizontally and added leading constraint. remove it, if you want to have fixed image size.
if you want your view to automatically resize image (by width) - remove width constraint & horizontal align and add trailing constraint.
It depends on goal.
Hope this helps

Related

"Unable to simultaneously satisfy constraints" with UITableViewCell

I used the Interface Builder to create a pretty simple layout inside a UITableViewCell for my Xcode 13.0/Swift 5/iOS 13.5 app:
UIStackView (with 2 UIViews and UILabels inside) at the top and a UIView (with a UIImageView inside) below it.
The exact constraints are currently:
UIStackView: 10pts leading, 10pts trailing, 0pts top, 10pts to the UIView at the bottom, height of 50pts
UIView: 20pts leading, 20pts trailing, 10pts bottom, (10pts top from the UIStackView), height=width
UIImageView inside the UIView: 0pts leading/trailing/top/bottom, align center x to Superview (=UIView)
Contrary to other questions about the warning here on stackoverflow I don't set the UITableViewCell's height directly but want it to be set by its content. The UIImageView's image is set at runtime and should keep its shape, so square images should be square and the other rectangular images should be centered horizontally (-> invisible bars left/right, if necessary) but not vertically.
Xcode doesn't complain about missing constraints but this layout keeps giving me the infamous "Unable to simultaneously satisfy constraints" warning.
[LayoutConstraints] 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.
(
"<NSLayoutConstraint:0x600002d22d50 UIStackView:0x7fe4fa293330.height == 50 (active)>",
"<NSLayoutConstraint:0x600002d22df0 UIView:0x7fe4fa29d1c0.height == UIView:0x7fe4fa29d1c0.width (active)>",
"<NSLayoutConstraint:0x600002d23070 V:|-(0)-[UIStackView:0x7fe4fa293330] (active, names: '|':UITableViewCellContentView:0x7fe4fa2840f0 )>",
"<NSLayoutConstraint:0x600002d23110 H:[UIView:0x7fe4fa29d1c0]-(20)-| (active, names: '|':UITableViewCellContentView:0x7fe4fa2840f0 )>",
"<NSLayoutConstraint:0x600002d23160 V:[UIStackView:0x7fe4fa293330]-(10)-[UIView:0x7fe4fa29d1c0] (active)>",
"<NSLayoutConstraint:0x600002d231b0 H:|-(20)-[UIView:0x7fe4fa29d1c0] (active, names: '|':UITableViewCellContentView:0x7fe4fa2840f0 )>",
"<NSLayoutConstraint:0x600002d23200 V:[UIView:0x7fe4fa29d1c0]-(10)-| (active, names: '|':UITableViewCellContentView:0x7fe4fa2840f0 )>",
"<NSLayoutConstraint:0x600002d36530 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x7fe4fa2840f0.height == 325.5 (active)>",
"<NSLayoutConstraint:0x600002d364e0 'UIView-Encapsulated-Layout-Width' UITableViewCellContentView:0x7fe4fa2840f0.width == 295 (active)>"
)
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x600002d22df0 UIView:0x7fe4fa29d1c0.height == UIView:0x7fe4fa29d1c0.width (active)>
I already checked with wtfautolayout.com but the only thing wrong that I can see is the height: If the width is 295, then the height should be exactly 50+10+295-40+10=325 (UIStackView.height + constraint in-between + UIView.width - leading/trailing constraints + bottom constraint), not 325.5. Everything else looks fine to me, so I'm not sure why it would calculate that wrong height (and if that's even the problem).
I already tried a couple of things:
Added the UIStackView's fixed height (didn't use it before everything looked fine and it didn't complain about it, still got the warning though)
UIView.width = UIImageView.height (1:1 aspect ratio, instead of the one above)
UIImageView.width = UIImageView.height (1:1 aspect ratio, instead of the one above)
Removed the "center x" constraint
Nothing worked, I keep getting the constraint warning and if it doesn't show up in portrait mode because of something I changed, then it does as soon as I switch to landscape mode. How do I fix this in IB/without code?
Try changing the priority of the height=width constraint to High instead of Required

iOS - auto layout rotation not working as expected

I have app with enabled rotation for iPad (iPhone version is rotation-free). In my design, within storyboard, I have this hierarchy: UIView - UIScrollView - UIView. All "views" are set to have full width of the screen. Second UIView has class set to MyView, which is a class with an external xib file. Storyboard and xib are both created in a portrait mode.
Now for the problem.
If I run the app in the landscape mode, all is loaded OK. If I rotate
app after that, all is OK.
If I run the app in the portrait mode, the design "breaks". The entire content is thiner (so there is about 100+ px gap between the end of MyView and the end of the screen). If I rotate app, the design remains broken but correctly "enlarged". The gap is still of the same size. During the first launch, I got the following error in debugger:
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)
(
"<NSAutoresizingMaskLayoutConstraint:0x1545b7800 h=-&- v=-&- UIView:0x1546a8cb0.width == ScrollableContentView:0x154575da0.width - 232>",
"<NSLayoutConstraint:0x15458dd80 H:[UIActivityIndicatorView:0x1546afa60]-(370)-| (Names: '|':UIView:0x1546ab840 )>",
"<NSLayoutConstraint:0x15458ddd0 H:|-(361)-[UIActivityIndicatorView:0x1546afa60] (Names: '|':UIView:0x1546ab840 )>",
"<NSLayoutConstraint:0x1546c7080 H:[UIView:0x1546ab840]-(0)-| (Names: '|':UIView:0x1546a8cb0 )>",
"<NSLayoutConstraint:0x1546c7120 H:|-(0)-[UIView:0x1546ab840] (Names: '|':UIView:0x1546a8cb0 )>",
"<NSLayoutConstraint:0x154579710 H:|-(0)-[ScrollableContentView:0x154575da0] (Names: '|':UIScrollView:0x15504c000 )>",
"<NSLayoutConstraint:0x154686ef0 UIScrollView:0x15504c000.centerX == ScrollableContentView:0x154575da0.centerX>",
"<NSLayoutConstraint:0x154697cc0 H:[UIScrollView:0x15504c000]-(0)-| (Names: '|':UIView:0x154547b80 )>",
"<NSLayoutConstraint:0x154697d10 H:|-(0)-[UIScrollView:0x15504c000] (Names: '|':UIView:0x154547b80 )>",
"<NSLayoutConstraint:0x15463b8c0 'UIView-Encapsulated-Layout-Width' H:[UIView:0x154547b80(768)]>"
)
Will attempt to recover by breaking constraint
No matter what I do, I am unable to remove this problem. Even If I deleted almost every constraint I have still the same issue.
You should look if you don't have any auto layout warnings in your storyboard or xib file (yellow/red dot beside your controller name in document outline).
If you don't have any, do you set your constraints when adding your xib view ?
Have you think about content hugging priority or content compression resistance priority ?

Creating a "self-sizing" UITableViewHeaderView

OK, a really simple version of this that breaks...
Create a UIView in a nib.
Add an imageView to it. Give the image view a constraint for an Aspect Ratio of 1:1.
Now add constraints from the image view to the edge of the view. (0 size to pin it to the edges).
Now add the view as a UITableView tableHeaderView.
When you run the application on different devices it will break the constraints and remove the aspect ratio constraint. I don't want this, I want it to change the height of the view to be equal to the width.
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. (
"<NSLayoutConstraint:0x7fad01efbbe0 UIImageView:0x7fad047209b0.width == UIImageView:0x7fad047209b0.height>",
"<NSLayoutConstraint:0x7fad04703630 H:[UIImageView:0x7fad047209b0]-(0)-| (Names: '|':VenueHeaderView:0x7fad047204c0 )>",
"<NSLayoutConstraint:0x7fad04703680 V:|-(0)-[UIImageView:0x7fad047209b0] (Names: '|':VenueHeaderView:0x7fad047204c0 )>",
"<NSLayoutConstraint:0x7fad04703740 V:[UIImageView:0x7fad047209b0]-(0)-| (Names: '|':VenueHeaderView:0x7fad047204c0 )>",
"<NSLayoutConstraint:0x7fad04703790 H:|-(0)-[UIImageView:0x7fad047209b0] (Names: '|':VenueHeaderView:0x7fad047204c0 )>",
"<NSLayoutConstraint:0x7fad0429bcf0 'UIView-Encapsulated-Layout-Height' V:[VenueHeaderView:0x7fad047204c0(300)]>",
"<NSLayoutConstraint:0x7fad0429bca0 'UIView-Encapsulated-Layout-Width' H:[VenueHeaderView:0x7fad047204c0(375)]>" )
Will attempt to recover by breaking constraint <NSLayoutConstraint:0x7fad01efbbe0 UIImageView:0x7fad047209b0.width == UIImageView:0x7fad047209b0.height>
It seems that there are constraints UIView-Encapsulated-Layout-Height being added to the superview. But these are added with the wrong value. It should recalculate these based on the internal constraints of the header view.

I can't find a way to make Auto Layout constraints happy

I am trying to make this simple layout:
It's just a simple UICollectionViewCell.
But when I put all the auto layout constraints I believe are needed, I get this warning:
NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
"<NSLayoutConstraint:0x17028dd40 H:[UIImageView:0x13fd3b000(48)]>",
"<NSLayoutConstraint:0x17028e2e0 H:|-(8)-[UILabel:0x13fd3bfe0'Something as a title...'] (Names: '|':_UIVisualEffectContentView:0x13fd3ace0 )>",
"<NSLayoutConstraint:0x17028e380 UILabel:0x13fd3bfe0'Something as a title...'.leading == UIImageView:0x13fd3b000.leading>",
"<NSLayoutConstraint:0x17028e470 H:[UIImageView:0x13fd3b000]-(8)-[UILabel:0x13fd3b140'Lady Oracle']>",
"<NSLayoutConstraint:0x17028e4c0 H:[UILabel:0x13fd3b140'Firstname Lastname']-(8)-| (Names: '|':_UIVisualEffectContentView:0x13fd3ace0 )>",
"<NSLayoutConstraint:0x17028e830 H:|-(0)-[UIVisualEffectView:0x13fe0ebd0] (Names: '|':UIView:0x13fe142d0 )>",
"<NSLayoutConstraint:0x17028e8d0 H:[UIVisualEffectView:0x13fe0ebd0]-(0)-| (Names: '|':UIView:0x13fe142d0 )>",
"<NSAutoresizingMaskLayoutConstraint:0x17428ee70 h=-&- v=-&- _UIVisualEffectContentView:0x13fd3ace0.width == UIVisualEffectView:0x13fe0ebd0.width>",
"<NSAutoresizingMaskLayoutConstraint:0x17028fd20 h=--& v=--& H:[UIView:0x13fe142d0(50)]>"
)
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x17028dd40 H:[UIImageView:0x13fd3b000(48)]>
As can be inferred from the log I have the following constraints:
bottom container view: bottom, leading and trailing aligned to super view
title: top, leading and trailing spacing to container view. Bottom spacing to user avatar.
user avatar: to have specific size (width & height), horizontal aligned with the title, vertical spacing with the title, bottom space to container.
user name: top aligned to user avatar, leading spacing to user avatar, trailing spacing to container.
I can't seem to have sufficient constraints to make the layout how I want and get rid of the warning. The layout is appearing as expected, though.
There is two thing I can think of:
you forgot to set the views with..
[view setTranslatesAutoresizingMaskIntoConstraints:NO];
your collectionView cell size its to small when the collection view is trying to layout.

iOS - AutoLayout 'Unable to simultaneously satisfy constraints'

I am trying to fix these errors I keep getting when running my app.
I have a UITableView that uses prototype cells and I keep getting these errors despite having no errors listed in Xcode Storyboard for constraint problems.
Not sure how to read most of these errors so was hoping someone could assist me?
Background UIImageView that should stretch entire cell width/height:
(
"<NSLayoutConstraint:0x174086c20 UIImageView:0x1741e7100.width == 2.5*UIImageView:0x1741e7100.height>",
"<NSLayoutConstraint:0x174087530 H:|-(0)-[UIImageView:0x1741e7100] (Names: '|':UITableViewCellContentView:0x174181e10 )>",
"<NSLayoutConstraint:0x1740875d0 V:[UIImageView:0x1741e7100]-(0)-| (Names: '|':UITableViewCellContentView:0x174181e10 )>",
"<NSLayoutConstraint:0x174087620 H:[UIImageView:0x1741e7100]-(0)-| (Names: '|':UITableViewCellContentView:0x174181e10 )>",
"<NSLayoutConstraint:0x174087670 V:|-(0)-[UIImageView:0x1741e7100] (Names: '|':UITableViewCellContentView:0x174181e10 )>",
"<NSLayoutConstraint:0x170088890 'UIView-Encapsulated-Layout-Width' H:[UITableViewCellContentView:0x174181e10(375)]>",
"<NSLayoutConstraint:0x1700888e0 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x174181e10(160)]>"
)
UIImageViews (5) that are suppose to be matching width/height, centered on 3rd UIImageView in cell and equal distances apart from each other (when rotated to landscape, these items stay centered and the distance from left/right on first/last cell just increases):
(
"<NSLayoutConstraint:0x174086e00 Bobblehead_TV.BobbleheadImageView:0x100715ff0.width == 0.5*Bobblehead_TV.BobbleheadImageView:0x100715ff0.height>",
"<NSLayoutConstraint:0x1740873a0 Bobblehead_TV.BobbleheadImageView:0x100715ff0.width == Bobblehead_TV.BobbleheadImageView:0x1007180e0.width>",
"<NSLayoutConstraint:0x1740873f0 H:|-(0)-[Bobblehead_TV.BobbleheadImageView:0x100715ff0] (Names: '|':UITableViewCellContentView:0x174181e10 )>",
"<NSLayoutConstraint:0x174087490 Bobblehead_TV.BobbleheadImageView:0x100715ff0.top == UIImageView:0x1741e7100.top>",
"<NSLayoutConstraint:0x1740874e0 Bobblehead_TV.BobbleheadImageView:0x100715ff0.bottom == UIImageView:0x1741e7100.bottom>",
"<NSLayoutConstraint:0x1740875d0 V:[UIImageView:0x1741e7100]-(0)-| (Names: '|':UITableViewCellContentView:0x174181e10 )>",
"<NSLayoutConstraint:0x174087670 V:|-(0)-[UIImageView:0x1741e7100] (Names: '|':UITableViewCellContentView:0x174181e10 )>",
"<NSLayoutConstraint:0x174087710 Bobblehead_TV.BobbleheadImageView:0x1007207d0.width == Bobblehead_TV.BobbleheadImageView:0x1007180e0.width>",
"<NSLayoutConstraint:0x174087800 H:[Bobblehead_TV.BobbleheadImageView:0x100715ff0]-(>=0)-[Bobblehead_TV.BobbleheadImageView:0x1007207d0]>",
"<NSLayoutConstraint:0x174087850 UITableViewCellContentView:0x174181e10.centerX == Bobblehead_TV.BobbleheadImageView:0x1007180e0.centerX>",
"<NSLayoutConstraint:0x1740878a0 H:[Bobblehead_TV.BobbleheadImageView:0x1007207d0]-(>=0)-[Bobblehead_TV.BobbleheadImageView:0x1007180e0]>",
"<NSLayoutConstraint:0x170088890 'UIView-Encapsulated-Layout-Width' H:[UITableViewCellContentView:0x174181e10(375)]>",
"<NSLayoutConstraint:0x1700888e0 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x174181e10(160)]>"
)
Background UIImageView that should stretch entire cell width/height:
You want the image view to stretch the entire cell, but you have a rule UIImageView:0x1741e7100.width == 2.5*UIImageView:0x1741e7100.height that locks the aspect ratio at 1:2.5. You need to remove this rule.
UIImageViews (5) that are suppose to be matching width/height, centered on 3rd UIImageView in cell and equal distances apart from each other (when rotated to landscape, these items stay centered and the distance from left/right on first/last cell just increases):
This one is much more complex, but I will hazard a guess that it's the same aspect ratio problem. This time is Bobblehead_TV.BobbleheadImageView:0x100715ff0.width == 0.5*Bobblehead_TV.BobbleheadImageView:0x100715ff0.height which locks the aspect ratio at 1:0.5.
My Friend,
Reasons could be
1: You have insufficient constraints to satisfy the layout. or
2: You have added more than the required constraints.
As a result of which layout is ambiguous. It is confused and so warning .
My opinion is to recheck all your constraints. And provide minimal constraints but be specific.
Thanks

Resources