I'm following the dev tutorial from Apple on iOS, and got to the part where you have to implement a custom control using a stack view. However, when I get to the part where it should show me a little red square referring to the button I added to the stack view, I get the whole stack view in red (the button fills the entire stack view).
My attributes are the following:
What am I doing wrong, despite following the tutorial to the letter? Thank you in advance.
Edit:
I use these constraints:
button.translatesAutoresizingMaskIntoConstraints = false
button.heightAnchor.constraint(equalToConstant: 24.0).isActive = true
button.widthAnchor.constraint(equalToConstant: 14.0).isActive = true
This is the expected behavior of a stack view with one arranged subview. If you have placed constraints on the stack view that make it larger than its arranged subviews those subviews will expand to fill the size of the stack view. Or if the stack view has no constraints on it, it will conform to the size dictated by its arranged subviews. Either way with one arranged subview that subview will take up the entirety of the stack view.
In the tutorial, there are no constraints on the stack view so it shrinks to the size of the constraints set on the button, as it is the only arranged subview in the UIStackView. You should open the size inspector stack view to ensure there are no constraints set on it. For more about stack views and layouts you should see here.
Alright folks I got it. I had the horizontal stack in the wrong place in the view. I had the same issue and I used the alignment -> top but that only fixed my horizontal not my width. The true issue was that I placed the Horizontal Stack View in the wrong location. It says "and drag one into your storyboard scene so that it’s in the stack view below the image view" when I placed it as shown it sized correctly. correct location for horizontal stack
I realise that an answer has been accepted for this question, however, I came across the same problem when following the tutorial. Whether or not this is the expected behaviour, following the tutorial exactly results in different looking interfaces on running the app in the simulator.
Something is not quite right with the constraints and so the constraints set in setupButtons() were not being implemented.
button.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
button.widthAnchor.constraint(equalToConstant: 20.0).isActive = true
To solve this I had to change the stack view allignment attribute from fill to top as shown below:
This fixes the interface so that it's the same as the tutorial screenshots. Hopefully this helps anyone else coming across this issue in the future.
In recent versions of Xcode (v 9.0.1 as or writing) it will complain in the debugger output. It mentions that you may have an unwanted constraint. If you remove the constraints from the storyboard, the code should work as intended.
I follow the tutorial too and I had the same Problem.
I solved it, by deactivating the red contrains in the marked screenshoot.
I uploaded another screenshoot, to show you my other settings.
I am Beginner and it was totaly luck and I want to share this luck^^
other settings
marked screenshoot
enter image description here
Related
hopefully an easy one here. I have some labels and text fields. Between them, I want some empty labels, which will if needed to be error texts. But when I try to stack view it all, Xcode zooms out and nothing can be seen on the viewController.
Anything else I need to change for it to work?
You can see a picture of it here before I hit stack view:
The email label and text field are already in stack view, so are passwords, gentag passwords and label/button.
This certainly appears to be a bug. I duplicated your issue. I was able to solve it by setting a height/width to each empty spacer label, prior to adding it to my stack view. This doesn't make sense because when you add an object to a stack view it loses all of the constraints it has. None the less it resolved the issue:
Sounds like its just an auto layout issue (or lack of). Can be really messy, best to just keep playing around.
As you've already done, I would first put each label and its text field in a horizontal stack view and add constraints.
Then I'd add each of these stackviews to their individual warning labels in a vertical stackview and add constraints.
Finally I would combine all of the stackviews into one vertical stackview!
I am trying to create a custom subclass of UITableViewCell that displays an image and a few labels to the right of the image. I have my UIImageView and UILabels arranged in stack views, the outermost of which I pinned to all four sides of the content view.
But when I run the app in the simulator, I do not see the image views. Debugging the view hierarchy, I see they are getting clipped.
And digging in a little further by focusing on the outermost stack view with "Show Constraints" on, I don't see my auto layout constraints at all (instead I get an ambiguous position runtime warning for each of the outermost stack views).
The text label that expands to the right is set up with 0 lines and the table view gets a constant estimatedRowHeight value and its rowHeight set to UITableViewAutomaticDimension, so I think if these constraints were working, the rows in the table would size to fit the content. Perhaps notably, any width or height auto layout constraint I add does appear when I debug the view hierarchy, so I know some constraints are present at runtime, I just cannot for the life of me figure out why the constraints relative to the content view are not.
After wrestling with this for a long time and having a much more experienced developer look over my project, it seems as if there was nothing wrong with the way it was set up. Recreating the table view cell from scratch with exactly the same layout and constraints and using the exact same code fixed this issue. I had messed around with the stack views and constraints quite a bit before this started happening, so it might be possible to get Xcode into a place where it does not properly set up constraints when you run the app in the simulator.
Try to solve all warnings which are printed into your console log when you run your application and viewing this screen. Because you can not ignore warnings always, many warnings you must have to remove by correcting or solving issues in your constraint. And that is the only solution which helps you most of the time.
I'm 5 years late to the party, but I managed to find a solution to this problem in my project. If any of the views that are contained in the table view cell have a bad subclass set on them, the intializer defaults them back to a regular UIView and without any of the layout constraints. Hopefully that saves someone the hours it took me!
I am unable to get a stack view to fill the view canvas in order for my widgets to be automatically resized to fill the entire screen... i've seen this done on may tutorial/youtube video but for some strange reason it doesn't seem to work for me
How I went about it:
I have a view controller scene where I am trying to display three buttons layed out horizontally with three labels beneath them. I dragged the buttons and labels onto the view canvas from the object library and then added each button and it's label to a verticle stack view. Then I added the three verticle stack views to a horizontal stack view and set the distribution of the horizontal stack view to fill equally. I then control-dragged from the horizontal stack view to view in the view controller scene in storyboard and set the following constraints. (I zero'ed all the constants set automatically by storyboard and then have the following 4 constraints)
trailingMargin = Stack View.trailing
Stack View.leading = leadingMargin
Stack View.top = Top Layout Guide.bottom
Bottom Layout Guide.top = Stack View.bottom
When I run the app I don't see anything displayed on the simulator's iPhone screen and I get a message saying that one or more of the constraints could not be satisfied. Any idea what I am doing wrong?
Check Axis,Alignment and Distribution of the stack views. The outer stack has to have Horizontal,Centre, Equal Centring respectively and the inner stack view's need to be vertical,fill,fill.
Maybe your images are differently sizes, hence making the main stack view show content out of proportions.
I have tried to replicate your scene here.
Link To edited project.
I tried your Project.
Just removed your constraints and apply
Alignment constraints horizontally container and vertical container
at last use update constraints and I got the result on simulator.
It may help to solve your issue.
I'm trying to figure out how to use autolayout, and there seems to be a lack of info about it on the internet. I placed a view within my view controller with three buttons inside it. Before I place any constraints, the buttons show up on the preview. However, as soon as I make ANY constraints, the whole sub view completely stops showing up in the preview. I made a constraint to center vertically, and then one to place it 25 pixels from the left edge. It should know exactly where to place it, but still nothing shows up.
Any ideas on why constraints cause my buttons to not show up?
With Autolayouts the constraints should be as clear as possible. You can try by adding size constraints as well as fix(right, top or bottom) constraints if necessary.
When you don't use auto-layout it positions everything manually. When you enable auto-layout it switches this behaviour off so you have an unconstrained object, which is why it dissappeared.
Turns out I didn't have constraints on the size of the sub view, so it didn't know how to center it. I didn't think I needed that because I thought it would default to what it's already at.
I have a problem here. For last 3-4 days I'm trying to the find the solution but no avail. I'm using a xib to load a view as a subview to scrollView.
I'm using iOS8 and size classes and auto-layout as well.
The problem is that the view gets added to the scrollview but scrollview is unable to go beyond a point. That is I'm not able to scroll till the bottom.
This is frustrating as I have just started to develop iOS apps.
I'm attaching the screenshots for the constraints that I have applied. Hope to get some help here.
The first screenshot is the actual view controller's view that holds the scrollview.And the Place Detail Info View is the placeholder where the view loaded from xib is added. The screenshot also lists the different constraints as well.
The second and third screenshots is of the xib file which i'm trying to load into scrollView.
Please let me know where I have gone wrong.
As said above, the issue is related with the content size of your scroll view. Just try adding width and height (either explicit or implicit: see explanation below) constraints to every direct subview of your scroll view and then define all distance constraints among those.
* By "implicit" width/height constraints I mean things like "aspect ratio", "equal width/height" relation between two views.
P.S. When dealing with scroll view-like controls and auto layout, there should be an exhaustive (some of which may seem redundant) set of constraints for subviews.
Hope this helps.
Your problem is with the view who is immediate subview of your scrollview.In autolayout,scrollView calculate its content size according to its subview.
follow these steps after removing all constarints from this view,i hope u will get your problem solved.
1.for your scroll view,set all 4 constraints i.e leading edge,trailing edge,superview and bottom constraints.
2.now for the view that is immediate subview to your scrollview,set all 4 constraints (leading,trailing,top and bottom),along with these set height constraints and make width equals to scrollview.
if your immediate subview's height is greater than your screen size or scrollview,it will scroll for sure.
run and check whether you are able to scroll and proceed furthur.
after step 2,all your constarints related ambgious type error will resoved.now you can set all other constraints as usual.
for more clear understanding setting constarints in scrollview see this https://www.youtube.com/watch?v=4oCWxHLBQ-A
In interface builder itself there is an option to preview your constraints for all the available devices. This will ensure you that the constraints work fine for all the available devices from Apple. Here is a quick tutorial that will help you with it.
http://adoptioncurve.net/archives/2014/08/working-with-size-classes-in-interface-builder/
Once that is verified and you are still not able to find a suitable solution, then probably there is something wrong in the content size for your scroll view. Try to increasing your scroll view content size.
I hope this should solve your problem.
Happy coding. Cheers :)