I am trying to learn to use layout constraints in interface builder but I am running across an issue...
I've got two views, one UILabel and one UIImageView, and I'd like a layout as follows:
the label should be centered in the superview
the imageview should be a set distance to the left of the label
Seems pretty simple, but I can't figure out how to impose a constraint for the second condition (the first is done automatically). Anyone know how to do this?
Thanks!
Click on both views while holding the command key so they're both highlighted. Then click on the pin button in the bottom right hand corner of IB (the middle button). Select horizontal spacing and the constraint should now be added. You should be able to adjust it as needed from there.
Related
I was trying to add a UISTackview in a scrollview. I believe the UIScrollview setup is right as the following screen has scrolled. Please note that it does not have any stackview, I have added a button with big top constraint so that I can see whether the scrollview works or not.
Next, I added the stackview and just added the top, left, right constraint but not bottom constraint like the following image. However, since there is no bottom constraint, the scrollview does not work.
When I added the bottom constraint, it shows the error like the following image because none of the textfields has height constraints.
If I change the distribution to "Fill Equally". The textfields are taking too much blank spaces depending on the screen size.
How can I use the stackview inside the scrollview. I want to use it as I want some of the views hidden based on conditions and claim the space. Any suggestion would be helpful. Thanks
Your second image is correct - but you need one more constraint.
Add a constraint from the Bottom of the Stack View to the Bottom of View (its superview), but set it to >= 0
A couple of tips...
rename your UI elements... it gets very confusing to refer to elements by default generic names (you have more than one View, for example).
give your objects contrasting background colors during development... makes it much, much easier to see the frames.
I'm hoping someone can help me out here. I set where I want the items to be using constraints and when I run and build the app it seems to push everything to the top. This occurs even when I don't put any constraints on any items. I've attached pictures if they help at all.
Have you tried setting the Top Constraint of your topmost subview to "Top Layout Guide" as seen in this screenshot? (Looks like your Top constraint is to the 'Superview' instead!)
http://i.stack.imgur.com/fpHAQ.png
Making sure your view is selected go click on the triangle constraint button in the bottom right and select clear constraints under all views.
Place the views where you want them. Then for each element click the square constraint button on the bottom right and do this:
Uncheck constrain to margins
Pin to top bottom and both sides
Check width and height
Then select the triangle and choose update frames for selected view.
Fine tune position by by selecting the view you want to move and updating the constraint value.
Because sometimes its just easier to start again than to try and fix constraints.
I've figured out a solution. Somal was on the right track in terms of the Top Layout Guide. I simply had to right click each individual object to drag onto the view and select Vertical Spacing to Top Layout Guide (See picture) or I could of simply delete the entire ViewController and start from scratch with no copying and pasting from the old View.
VerticalSpacingMenu-Image
I'm creating an app with quite a lot of text. It will be of variable size, so I was wondering if there is a way to adapt my ScrollView to the size of the UILabel, not knowing in the IB what will be the number of lines of that label. I'm doing it from the IB, drag n dropping it, then I'm putting 4 elements inside : an image for the logo, a title, another image, and then the label.
My question is : how can I tell my ScrollView to adapt to the text ? With constraints ? In the code ? I'm sooooo lost with that scrolling thing…
I think I need a very very good tutorial about autolayout…
Here's some screenshots of my project
The project on simulator
The layout
Thanks a lot!
You have to add the constraints to your label so that it will always have the same spacing to the scroll view. Also, you will have to set your labels lines to 0.
Don't press Add Missing Constraints because it will probably set your height and you don't want that to happen. Use the Pin button to set the spacing to nearest neighbor.
These are the buttons you will have to use, they are bottom right.
First of all, press the one in the right and select All Views > Clear Constraints.
Then, select your label in the storyboard and press the button with a square Pin, here you will have to select everything until you have something like this with different values... Also click in the red lines so that you get a continuous red line. Don't check any of the boxes you see.
After this, you have to do the same process for your Scroller.
It should be enough. I will also need to know where your scroller is.
If you have anything else in your view, do the same.
I am currently having difficulty with AutoLayout. I am using interface builder and am trying to position two buttons of equal width side by side as illustrated in the following image.
From the following Preview image, my titleImage has been properly constrained and is displaying correctly however the buttons are not. I have experimented by aligning button 1 with the leading edge of titleImage, and button2 with the trailing edge of titleImage, however the width distribution between the two buttons becomes skewed at this point, as demonstrated below.
My objective is to understand what constraints are missing and should be applied to the two buttons to maintain equal widths regardless of device. If possible I would like to achieve this through interface builder as opposed to additional code.
Add the following constraints
Assign equal width from button1 to button2.
Assign horizontal spacing between both buttons.
Assign leading space from button1 to its superview.
Assign trailing space from button2 to its superview.
Assign top space to both the buttons.
Let me know if it works for you.
Follow Steps and Screenshots for easy solution
Step-1)
For Button 1 : Set Constraints: (1)Leading, (2)Top or Bottom asper your need, (3)Height
Step-2)
For Button 2 : Set Constraints: (1)Trailing,(2)Top or Bottom asper your need, (3)Height
Step-3)
Press Ctrl + Drag From Button 1 to Button 2
Select Horizontal Spacing
Step-4)
Select Both Button (using Command) and Add Constraints Equal Width
OUTPUT
Hope it Helps you :)
Stack layout in iOS9, will do the job really nice.
Add stack view to your view and configure as follow:
You can check my example - you can easy aim this, by using proportional constraint.
Also you can easy aim proportional multiple UIViews.
Please look attached example
https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib
My solution is to
Put a small view in the middle of two buttons and make it centre(Horizontal centre in container and vertical centre in contener as 0).
Add height and width to the small view.
Add buttons the constraints and give horizontal space constraints to small view.
Give the small view background colour same as buttons or View's colour.
Note: See the Screenshot.
When I select "Vertical Spacing" in interface builder, I expect the bottom of the upper view and the top of the lower view to have a relationship. However, frequently what seems to happen is that the bottom of the lower view gets linked to the bottom of the upper view. Then at runtime the bottom view will have the wrong frame (after resizes, animations, etc.). Is there a way I can ensure that views are consistently linked bottom to top?
[EDIT]
Here's another example. I set a height of 419px. I select "Top space to top layout guide". But instead it puts a constraint for how far the bottom of the imageview should be from the top of the superview. Then I change the height from 419px to 374px, and the view has correct height, but a gap at the top.
I've noticed this many times (usually when attaching the top of something to the topLayoutGuide), and I've put it down to a bug in Interface Builder. It seems like the issue has gone away in the betas of Xcode 5.1
The only workaround I've found is to initially move your view away from the view you're attaching it to, and then create the constraint. In this situation, Xcode will usually do the right thing. Then manually edit the constraint's constant back to 0 (or whatever you want it to be).
Instead of adding vertical spacing, try by adding "Top spacing to nearest neighbor" constraint. Please refer attached image,
Hope this will help.
This issue is fixed in the latest versions of Xcode. You can now select which part of the constraint you want to attach to. It may attach wrong initially, but the constraint editing controls are much better now.