obs: sorry if it's confusing, I'm not too good at english
I've started programming in the early 2016, so my first language is Swift and I created new project just for training AutoLayout stuff.
I want the objects to fill the whole screen, so I did like this:
The buttons abc, 1-9, - and . measure 200x50. The reiniciar and calcular button (on the bottom) measure 300x50. The label delta is 600x120 and x1 & x2 are 600x60.
When I stack them individually, no problems. I got into this scene:
They're all stacked together and respecting the height x width
But I got in trouble when adding constraints to make them fill the hole screen. I set all the constraints margins to 0 (in order to stretch and fill) and I got this:
What am I doing wrong?
When you pin to the 4 edges of the superview, you will open the autolayout pin menu. When you open it, there is a checkbox beneath the 4 edges you can select.
Remove your constraints and add them again with that checkbox unchecked, it says something like: constrain to margins.
Also check whether your stack view has some edge insets in the settings pane when you have selected the stack view. Edge Insets are basically margins inside of your stack view, set them to 0.
Please comment if that didn't solve your problem.
Related
I’ve built a simple login screen layout. In a vertical direction, there is a logo at the top, followed by 2 text boxes for email and password and then a submit button.
There is an outer container which container 2 more container views, one for the logo and one for the text boxes and button.
With auto layout, I have got the layout displaying correctly in Xcode, with the logo container above the input details container. However, when I launch the app on the simulator or on a device, the logo seems to drop down over the top of the text boxes.
Xcode is telling me I am missing a constraint for containerLayout for y position or height. I’m unsure if this has any impact on the problem.
It would be extremely useful if someone could explain why the logo is dropping down. I will include an image of the constraints in place.
As an absolute minimum, you should:
Add leading, trailing, bottom and top constraints to the logo image view.
Set vertical content hugging priority for the text fields to required (1000).
Add bottom constraint for the sign in button.
You definitely use too much of center X, and equal widths, this obscures entire picture of your layout. If you want to make it simpler and more readable include the following modifications.
Remove center X, center Y and equal widths from the logo image. As you will see it won't break anything but only simplify the layout.
For both text fields, remove center X and equal widths constraints.
For both text fields, add leading and trailing constraints to the superview
Repeat last two points for sign in button.
If you are targeting iOS9 or higher you can use a stack view to layout text fields and buttons. Below you can find the final result. Of course, you can introduce a lot more improvements to this layout but I don't want to reinvent it here.
Update
To configure bottom constraint for the logoDetailsLayout just add it as normal. Sometimes when views are not aligned as they should be Xcode gets lost. In this case, you can double-click this constraint and fix it in the attribute inspector.
This is how I configured it.
I am trying to understand the basics of Auto Layout and have been trying to learn with no avail. In the image I have below I have set no constraints as I always end up not doing it correctly.
For the four squares and buttons I just want them to show appropriately on all size classes and I can not get them to. I always set leading constraints for the left squares/buttons and trailing constraints for the right squares/buttons(both to the main view controller). I put horizontal spacing and vertical spacing between the squares/buttons and put bottom/top spacing on the bottom/top squares/buttons to the bottom/top layout guide.
Screenshot:
First of all select your size class to for example w:compact h:regular and than do everything else.
You can do it using stack view. It is easy, just select two of your blue views (select one then hold shift and select second) and than click stack icon:
then set stack distribution to fill equally:
and set spacing for example to 8.:
than set constrains of the stack view to 0 from left and 0 from right and copy and paste. It will look like this:
then both stack view put in a stack view:
and set spacing to 8 in the main stack view.
Finally set 20 from bottom constraint to your main stack view.
You can use same way for buttons. After that you can simply set size class to all iPhones landscape (any,compact) and do same thing again.
If you do not understand anything, just ask me :).
The Bar at the top is a view in a view that contains 10 views, each the same size however I am unable to get them to look like this on the simulator. What constraints settings should I be using?
Also is there a better way to have visually represent all of these boxes without using views? it can't be an image as the individual views will visible depending on remaining battery.
What I am using: I am not currently using any constraints as I was only able to make it worse.
What it is doing now:
portrait:
Landscape:
You just need to give leading, trailing and equal-widths constraints between adjacent buttons.
Check my answer here, I've explained with screenshots and steps to achieve this:
What is the best approach for horizontally aligning 5 buttons with Autolayout
Let me know if you want more clarity.
Select all the bars at once and then apply the following constraints:
Check the equal width. which will make all bar of same width. 5 is the margin from top, bottom, center, leading and trailing.
Press Add x Constraints.
At the end update frame by pressing option + command + equal simultaneously.
The first has left, up and bottom constraints and then it is linked to next one on the right and the next is linked to the next and so on with the horizontal leading option.
Everything looks fine in IB. When I run my app using an iPhone5/iPhone6/iPad sims, it's completely mangled.
In IB:
In iPhone6 sim:
In the above sim, the buttons are cut. The textfield and textview are also cut. For the TF & TV, they are aligned center but trail off the edges on both sides.
I have the buttons width set
Editor > Pin > Widths Equally
The title label is set with a
Horizontal Center in Container
constraint
The textfield and textview also have
Horizontal Center in Container
and
Editor > Pin > Width
Is there some way to fix this?
-- EDIT --
After a few tries with constraints, looks like I have everything working except the two buttons.
Current listing of constraints:
As suggested by others, you should consider using the Auto-layout feature if you plan on constructing your views using the IB.
Here are some tutorial links:
RayWenderlich.com Part One
Youtube video This one covers a bit of size clases
Hope they help.
UPDATED:
I've read your updated post, you need to add width and height constraints. The view you see in the IB right now is 600 by 600 points, and the simulator one is smaller, which means that if you leave it as is, when you run the app you'll only see what the iphone screen has the capacity to show.
You need to add more constraints than what you used, try defining an equal width for the buttons, and assign the left one a left margin constraint, the right one a right margin constraint, give both of them vertical spacing constraint related to the text view or long label, the text view or long label should have left and right margin constraints, a height constraint and a top constraint to the textfield, the textfield should have a vertical spacing constraint to the label, also left and right and height constraint, and last the label should have leff, right and height constraints plus a top constraint to the main view.
I feel that those are all you need, but Xcode will through warnings at you if it feels you are missing something.
Try it, and let us know.
I have pretty straightforward requirements where two labels must be centered horizontally. So, I have selected them and chose Editor->align->center horizontally. Then added top space to container constraint to both of them. I also need the labels to shrink/grow regarding content size. However, IB shows errors and several warnings. I could make the labels shrink/grow just by adding pin between them (horizontal space) but they will not be centered in that case. Here are the screenshots:
here are the errors and warnings:
UPDATE theraven gave an interesting suggestion to use dummy view for centering it horizontally and pinning two labels to it. I have removed all existing constraints, added this dummy view and center X + center Y constraints to it. Then pined two labels to it (added horizontal space constraints). However, I still get a bunch of errors and warnings:
UPDATE2 Just updating the question, but still no valid answer found. #Theraven workaround works for iPhone4, iPhone4S, iPhone5 and iPhone5S, however it's not real centering but rather a workaround. Therefore for iPhone6 and iPhone6 Plus it doesn't work as leading and trailing spaces will be fixed and won't automatically resize for larger width.
What you could do is add both labels to another view, like a container view. Then you need to center this one horizontally and add the necessary constraints.
To add the containing UIView, you can select both labels, go to Editor -> Embed In -> View.
Then you would need to add constraints to make the containing view fit the two labels. So something like this:
First Label (left one):
Leading Space to Superview
Top and bottom Space to Superview
Horizontal spacing to the next Label
Second Label:
Trailing space to superview
Top and Bottom to superview (or align top with the first one)
Then the containing view should resize as to fit both labels. Then all you need to do is add the top offset constraint for this container view and a horizontal alignment it in the parent view.
This way, the containing view will grow as much as it needs to fit both labels and the space between them and will always be centered in the parent view.
I took a screenshot of my test constraints in case it helps you more.
Hope this was what you were looking for.
To solve this use a blank UIView in between your two labels and center it horizontally. Then pin the two labels either side of the centered blank view. It is common convention to use spacer views like this in auto-layout.
I really don't like the idea of adding another view just for sake of estethic.
Another alternative is to horizontally-center the left view, and horizzontally space the right view of an amout X with the left one.
Then to give the horizontally-align contraint of the first view a negative value equal to the first view width plus half the views distance. Or use multipliers as said in a previous comment.
But this only works with fixed width views i guess.
Use centered UIStackView as a container for two labels with a spacing required.
I didn't really understand what you wish to do.
The error you get (in the first screen shot) is that you are missing constraint for the x position of the labels.
For UILabel you must have constraint both for y and for x position regarding to the container view, when you selected them both and chose Editor->align->center horizontally, you just say that label1.center.x = label2.center.x.
You still need to say where they will be in the container view, you added the top space to container, so you do have the y position, but you didn't say where the x position should be.
You said
I have pretty straightforward requirements where two labels must be centered horizontally
But where they should be in respect to their container?
thanks
Using spacer views is the best possible solution I could figure out, even though it looks ugly for the developer. The user wouldn't even know what's going on behind the scenes and once you have the spacer UIView, you can always reuse it.