Embed Views in super view without losing autolayout constraints - ios

in an ios application,
I have a custom UITableViewCell with a lot of views in it. I am using auto layout and setup all the constraints as I need.
But now I need to have a main view (in the content view) and put all the other views in it (some sort of a parent view to all).
This is an example of how my cell looks in the interface builder:
it has all the views setup with the constraints.
I know there is an xcode feature to embed selected views inside a parent view:
So I select all the view and select to embed them in a view. I get the following:
My Problem
Although the views are embedded correctly in a superview, the autolayout constraint were removed, and now I have to recreate them.
Is there a way I can put all the views inside a superview and have the same autolayout constraints without having to recreate them all?
Thank you

As mentioned in the comments above, this approach works well for me:
indiestack.com/2013/12/transplanting-constraints
In short, the approach is:
Give your old superview a restorationId so you can easily identify it in the XML.
Open the XIB/Storyboard you are working with in a text editor view.
Copy and paste what is currently there into a backup file.
Embed your content into a new superview using the storyboard. Do not set any new constraints yet.
Give your new superview a restoration ID so you can easily identify it in the XML.
Open up the current storyboard/XIB side by side with the old storyboard/XIB you backed up.
Find the old container view in the backed up XML by searching for the restoration ID. Copy everything inside the <constraints></constraints> and <subviews></subviews> tags
Find the new container view in the current XML and replace the content of its <constraints></constraints> and <subviews></subviews> tags with the copied content
Go into the old XML and copy the ID of the old container.
Go into the new XML, and replace the old ID you got from step 9 with the id of the new container everywhere inside the <constraints></constraints> you pasted in.
Don't forget to add constraints to your new container that match the old container (in my case this was pinning the new container to all the edges of the super view).
Caveat:
This will break any outlets to constraints you may have set up. Outlets to other things, views, etc... will be fine.

Select all views
goto editor -> embed in -> view
Again select all views
Add new constraint , pin top, bottom, leading, trailing to 0

Have you ever tried to just create the constraints of the container view? You don't need to recreate all the constraints.
They are appearing as incorrect because the loosing they parent constraints.

Create a new view at the top level of the xib. Then drag your existing view into it. Existing constraints will still be there. You'll just have to set new constraints up for the embedding.

Related

Can't add constraints in xib

I have a xib but I can't add constraints. When I control click and drag I can't do anything also the buttons at the bottom I can't do anything with it.
I'm using xCode 11.
Check if the layout option is set to automatic or not for the views/buttons etc for which you trying to add constraints. Attaching a screenshot for reference, hope this helps.
Please also pay attention to the Layout parameter in the Size Inspector. There are 2 kinds of values for each component in the xib: Inferred (Constraints) and Autosizing Mask.
If Inferred (Constraints) is selected, the view is added to the parent view without the autosizing constrains. It means no matter what autosizing you set for this view, it has no affect when added to the parent view. In fact, it is the same as "translatesAutoresizingMaskIntoConstraints" property set to false.
As the contrast, if Autosizing Mask is selected, the view's autosizing parameters you defined in the view will be applied when added to the parent view. It should be selected if you are using autosizing in xib.
I had this issue and I just figured out what caused it.
When I added a new button to my view controller XIB, I added the button to the open space next to the XIB and then dragged the button under the View in the Document Outline on the left. If you do this, for some reason, it doesn't let you Ctrl-drag to the view to add constraints.
If you add a new button and drag it into the view immediately, it should allow you to Ctrl-drag constraints into existence.
Try to embed the views in a view using the Embed in button. Set the Layout attribute of the new view to Autoresizing Mask.
Now you can use auto layout in the views inside the new view.
The new view should have the autoresizing mask with everything checked.
You should set layout property of your view to Inferred (Constraints)
For me on macos 10.15.6, XCode 12.4, this happens because I copied a NSViewController root view and tried to modify it as a child view. Seems like it also copies some hidden "can't be constrained" parameter.
So, just don't do what I did.
Xcode is very confusing sometimes but and when I was trying to pick from Layout option in the UI, it didn't give me Constraints, and as instead my Inferred was the same as currently selected option Autoresizing Mask which caused the most confusion:
But if you actually be brave and go ahead, instead of Autoresizing Mask it will activate Constraints and you are able to setup constraints hereinafter:

How to add a UIView as SuperView(background View) to already existed UI elemets with contraints

firstly I have Placed 3 labels in the xib file and I added constraints to the elements(using the Auto layout in storyboard), next I got the requirement to add an image to its background so to do this first I need to remove those constraints after that I added UIImageView and finally need to set constraints to all UI elements but if I have more UI elements with more constraints its more difficult to remove constraint and adding view how to solve this issue
Sometimes its hard to implement when information is poor when you begin. To solve this particular problem, you could have a transparent container view. Just make UIView, place your Elements on it and add constraints. When you now have to add another view behind it, you just have to remove the constraints from the container. Makes things easier.
Another thing is, you can leave those constraints as they are. They refer to the view you have put the Elements in. When you now add another view behind them, you just can add constraints to this new view and the other elements are not affected.
Hope that halps a bit!

Keep autolayout contraints after changing superview in the storyboard

I have a UIView in the storyboard where all the constraints are defined. Now I have to change it so that all the subviews are inside a new scroll view. I drag a scroll view into the view, adjust the size and then add all the subviews into the scroll view. All the autolayout constraints are now out of place and the best solution I find is to delete the constraints and create them again, but this is very time consuming. Is there a better way to do this?
Unfortunately, there is no easy way to transfer the constraints. You can take a look at this article that shows how to edit your storyboard in a text editor.
One thing that can at least help a little bit is the "Embed In" functionality. This will wrap a container around your selected child views and at least save you the time of repositioning everything.
Editor > Embed In > Scroll View

Modifying a storyboard that is already laid out with auto layout

I am working through the CS193P Stanford iOS course and I am struggling with auto layout. I have laid out my calculator ViewController and set up all of my constraints. Now I need to add additional UI elements and I'm not sure how to got about it. In the storyboard editor in Xcode my existing UI elements are taking up the entire view controller. Do I need to just delete all of my existing constraints, move the UI elements around to their new positions and recreate all of the constraints or can this be done incrementally without having to recreate all of the constraints.
You can move and resize the controls with the constraints still in place. Xcode will note that there are misplaced views, but that will go away after you adjust the constraints.
Depending on exactly what you want to do, you can tell Xcode to adjust the constraints to match the new layout on the canvas. However, if you need to interpose a new control between things that were previously spaced relative to each other, you should delete that constraint and add two new ones. That is, if you had something like (in visual format language) [view1]-[view2] and you want to put another view between those to get [view1]-[view3]-[view2], you will want to remove the constraint between view1 and view2 and create two new constraints, one between view1 and view3 and another between view3 and view2.

IOS Storyboard Constraining Every Subview to bottom of screen

This seems like it should be very simple, but I am having a terrible time trying to get every subview (they act like menu bars) constrained to the bottom of the parent view in the IOS storyboard.
There seems to be automatic constraints placed between the subviews that make them override the constraint I'm trying to set. I try to take these off, and then place the new constraints, but nothing seem to work as I loop over trying to reset constraints, over and over and over...
It should be very simple, set all of the uiviews to a particular width and length and set the distance between the bottom of the superview to be equal to 0. That's it.
The secret to happy constraint editing in interface builder is simple:
Don't do it
If that isn't possible, then:
Create your own constraints before trying to delete the system ones
Make judicious use of the pinning menu and editing constraints in the inspector
Don't drag and drop your views after you've added them - this causes interface builder to discard all constraints and set you up with a new set of "best guess" system constraints.
I've written more about this here but that's the gist of it.

Resources