Auto layout for uicollectionview - ios

I have a UILabel in my storyboard which i want to align from bottom and whose width and height want to get adjusted in portrait and landscape.
For this, i dragged in a UILabel pinned its leading space, trailing space, bottom space to its superview.
I did not pin its width and height since i wanted its width and height to be changed during its landscape rotation.
With this i got a warning in story board where i have selected to update frame, which automatically adjusted the frame and made it work correctly.
Now i am trying to achieve same kind of behaviour with UICollectionView but this is not working as expected, instead it is giving out some errors saying 'misplaced view' and 'missing constraints'.
I am aligning buttons in 2 rows and 3 columns in the collection view in portrait mode and want to align all the 6 in single row in landscape mode, so if i pin the height here.
The problem is it will go good for portrait mode but in landscape the height will seem higher. Any help on how this could be achieved.?

You got errors because you did not added the constraint for the collection view top layout or height or aspect ratio. it is necessary to assign all side constraint so the view will automatically layout according to the constraint. if you miss one it will give you error or warning. Look you want dynamic height for collection view. If you want to achieve this for all the devices like for all iphones then you need to pin the height and make a outlet of the height constraint and change it in your viewDidLayoutSubviews method. select the collection view then go to size inspector and double click the height constraint. this will show you the constraint on the document outline. make outlet of that and change that constraint according to your need like on portrait or landscape you can calculate with logic. you might need to change the constraint according to the orientation change. follow https://stackoverflow.com/a/24072010/4030971
i know that will be great if all those stuff work only with some constraint but i found this way easier for me.

Related

ScrollView is missing constraints

Swift 5/Xcode 12.4
My app uses a UIScrollView to zoom its child UIImageView (which is filled through code). This part works but the ScrollView keeps complaining in XIB that it's missing constraints for the x/y position or width/height.
As you can see, the ScrollView has a top, leading and trailing constraint and the width is set to equal the height. From my understanding it knows its dimensions and position because of these constraints but apparently it's not enough. I do NOT want to center the ScrollView vertically and as the app has to support both iPhones and iPads, I also can't just set a fixed "bottom space to" constraint for the ScrollView.
I already tried to set the ScrollView's width to the ChildView's width and center it horizontally in it but the warning still didn't go away.
I've seen suggestions to put the ScrollView's contents inside another UIView but in my case it's only a single image and if I embed it inside a view, then the zooming breaks.
Why is the ScrollView still missing constraints and how do I fix it (without changing the overall layout of this ViewController)?
A UIImageView (without an image) has no Intrinsic Content Size.
If you're going to be setting its Width and Height constraints via code, but you want to get rid of the IB layout complaints, give the image view a Placeholder:
Edit
If you want the view(s) to be sized in IB, but you're going to change the constraints at run-time, you can either:
Connect the constraint to an #IBOutlet and change the .constant via code (more problematic to change the multiplier if needed, so probably not the way to go)...
Or...
Give the view constraints in IB but set them as Placeholders by checking "Remove at build time":

ios - How to auto-resize my view in storyboard? swift 3

I try to auto-resize my view with auto-layout contraints, but I have some errors of Y-position missing. I can't understand what is wrong, I attached my Y-position to the top of the view.
Thanks for your help, here is the screenshot:
The problem is that you don't set a fixed height but, if you can, ALWAYS AVOID to put a fixed height for a view. For an app that can fit all screen is better to use different techniques.
If don't want to set a fixed height on your view, you have two possible options:
Give to the view a bottom constraint. You should also set the distance between the bottom of your view and the screen (or another object below your view).
Use stackview. If you place your views into a stack view you will be able to autoresize the width and height of your views according to the screen dimension.
You must give a height for the view or construct it's subviews in a way that gives it a height by hooking constraints properly from top to bottom
when you have a y position error it means top, bottom and height issue
and when x it means leading , trailing and width issue
IF you want to create dynamic view drag a vertical UIStackView and give it a height and in runtime add items to it
self.myStackView.addArrangedSubview(lbl)

Constraints in Swift not working

I'm trying to add some constraints to my view, but everytime I switch the device, the view goes crazy. How can I fix this?
How I want it to look and how it looks like on the iPhone 8 Plus:
How it looks like when I switch to iPhone SE:
I added these constraints:
0 top
0 left
0 right
686 bottom
If your bottom constraint is larger than the height of the device, naturally, it will be out of bounds.
Moreover, your constraints will be ambiguous if the screen's height is smaller than 686.
You'll need to have a height constraint with a constant of 50 to set up on the view rather than a bottom constraint.
It's not preferable to have such a huge value for any constraint. So when changing devices, the height of screens may change and your constraints will break.
The preferred way will be to create a Height constraint and set it to 686 and don't set the bottom constraint as it's not needed anymore. But the problem can arise here if the screen size is smaller, as the views on the bottom will not be visible. To overcome this you should make use of a scrollview and put this content view inside scroll view.
you can set the Height constraint of View instead of bottom constraint
or
you can use the Size classes

Trouble with layout on various screen sizes

My screen layout has elements placed correctly
but when I switch to another screen, eg. iphone 7 plus
or se
things change. I've set constrains, height and witdh when I suppose I should, but apparently it does not want to cooperate with me. Please tell me what constrains and heights, widths should I set.
Add below constraint
For the red and green View You need to give Equal Width Constraint.
For Blue View at the center you need to give Center Horizontally Constraint.
For the bar at the bottom You need to give Bottom distance from the Red/Green Top Constraint.

iOS view height and auto layout

I have a viewController, which is configured for the iPhone5 screen size. In red rectangle is the view.
To make this view show properly in iPhone4 - I used auto layout. But when I specify constrains such as: leading edge, trailing edge, bottom space and top space (in top space I even made constraint's priority to LOW ) - the view still goes partially down the screen as if my constraints don't work.
BUT if instead of top space constraint I specify view's heigh and delete top space constraint - everything works perfectly.
Does anyone can explain it please? Thank you.
Thats because when you set up the top space constraint it will move the view by the constant you provided. iPhone 4 and iPhone 5 screen height is different but the constant remains the same so obviously it will behave differently. One way to troubleshoot your interfaces is to switching between iPhone4 and iPhone 5 on storyboard device on storyboard (first button from left to right on the bottom right corner of interface builder).
Auto-layout is all about experience in my opinion. I struggled alot with it until i learned. If you want your view to be attached to the bottom of the screen you should set the BOTTOM SPACE to 0 and specify the view's height like you did or adjust constraints for it's subviews so that the height is set dinamically according to the views inside.

Resources