I'm trying to accomplish the following view:
So what I have is a view and 6 labels, the top two labels have both leading and trailing space to container of 0, the bottom left two labels have leading space to container of 0, the bottom right two have trailing space to container of 0, and I have a spacing of 12 in between the bottom left two and the bottom right two.
However, this is what I get when I run it:
How can I fix it so it looks more like the first picture?
Do you have an "equal width" constraint between the left labels and the right ones ? Without it, your "weird" issue is in fact totally right according to your constraint :
The left label tries to expand its width to the maximum possible. How can it ? By minimising the width of the right label, which is why it looks shrinked, but in the way its frame contains exactly the text "Label".
Select the left and right labels and add an "Equal widths" constraint in interface builder.
Related
I want to have 15 buttons equally spaced between them and correctly leading and trailing the superview vertically. I set constraints so that the left set of buttons aligns to the left margin and the right set aligns to the right margin. The first button leads from the top margin in each set, and the remaining buttons each have a constraint for vertical space set to the upper neighbor. I thought this would be enough to make it work but it wasn't. As you can see, for an iPhone 4, the number of buttons displayed on the screen is only 12 so I would definitely need to somehow dynamically change the button size depending on the screen size. I am attaching a screenshot from the storyboard that shows the Any x Any editor view and a preview for the 3.5-inch screen.
This was really easy to accomplish using stack views. Simply select all the buttons and click the leftmost icon (bottom right side of left pane) which is named Stack, and see the magic happening!
Try to set the constraints like this:
First select the all elements on left side and give leading constraint:
Now select first element and give top constraint:
Now select the second element and select it , and drag it to first element and give vertical spacing: , repeat giving vertical spacing for all the elements, So that each element will be vertical space constrained with its top element!!.
Do the same for elements on right side.
Give the trailing constraints for all elements on left,
and the select top element and give top constraint
and then select one element below top element and give vertical spacing between those two, repeat it for all the elements!!! So that each element will be vertical space constrained with its top element!!
Note: I only gave left constraints, you can try for right side too!!!!!
Add height constrain to the top left button to be 1/15 of the superview height and for all buttons let their height equal to the top left one.
Note it will work only if the vertical spacing is zero between buttons.
If you have a vertical space value for example x, then set it as 1/15 - 14 * x
Note #2 in iOS 9 only, seems the stack view will help perfectly in that
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 this layout when running it on an iPhone 6, which is EXACTLY what i want:
However, here it is when running on the iPhone 4S (or on the iPad):
I really can't wrap my head around this. As you can see, the above picture has the text leaving the area, and the image being "shrunken". It is as if, the first image has the image resizing itself, and in the latter the text is filling up the blank space. How do i fix this?
EDIT
Here are the constraints for the left-side image, and the right-side table:
Left image:
Right table:
And here they are selected in IB:
am not sure what you are doing with other elements but for the table and image i can suggest you those constraints. first clear all constraints of these two element and then try those.
for table in right side -
top to superview
bottom to superview
width - fixed
trailing to superview
for image on left
top to superview
bottom to superview
leading to superview
trailing to superview
put constraint values are according to your design. this will keep the right side table fixed width and resize the image to fill the rest of gap. i think this will solve your problem.
So, it's a little hard without being able to try out the layout myself, but here's what I think you need to do:
On your left image, remove the "Trailing Space To Superview" constraint.
On your right tableview, add a Width constraint, constraining the table to its current width.
This means the text in the table will stay in the same location, and the left image will grow or shrink depending on the space available.
I am trying to recreate the calculator app layout in my app. My problem is that I can't get auto layout to work right. So I have a label at the top and 19 buttons (0 is bigger than the other ones).
What I did:
For label, I control + drag from the label to the top and margins (Leading Space to Container Margin, Top Space to Top Layout Guide, Trailing Space to Container Margin). Then for the bottom part warning, I went and Update Frame. This works.
For the buttons I set Equal Heights for all of them and Equal Widths for all of them expect the bigger button (0). For the buttons from the upper part again I control drag from them to the label and set Vertical (I don't want any space between them, and I don't know what to set here). For the buttons from the right I control + drag and set Trailing Space to Container Margin. For the bottom ones I control + drag and set Bottom Space to Bottom Layout Guide. Same thing for the left buttons.
I am not sure what to do for the buttons in the middle. I don't want any space between any control, but from the tutorials I didn't saw how to control drag from one control to another and tell it to not be space between them.
Any suggestions how to fix my alignment issues ? I always get: Need Constraint for: X/Y Position errors.
I'm attempting to have two buttons side by side that look correct across all devices but no matter what constraints I seem to add in I keep getting issues similar to this (one button larger then the other):
Any ideas what I'm doing wrong as far as adding in constraints? I'm not using code for this simply doing it through the InterfaceBuilder in Storyboard.
Constraints set:
Reply: Leading Space, Bottom Space, Height Equals :45, Trailing to Delete Button
Delete: Trailing Space, Bottom Space, 32:9 Ratio, Height Equals :45, Leading to Reply Btn
With both buttons selected, go to Editor > Pin > Widths Equally. Then set the height, leading/trailing space, space between the buttons, and bottom space.
According to me add following constraints
Select Reply button adds leading space and bottom space to superview
Add center Y constraints to delete button
Then align top and bottom space to delete button and also add trailing space to delete button
After this select delete button add bottom space and trailing space.
I had similar operations on one of my view, please see this picture for more info
Happy Codding :)
You need to add a constraint for equal widths, and also remove the '32:9 ratio' constraint, which is currently setting a width for the "Delete" button w/o having a set width for the "Reply" button. That's what's causing the issue.
If you then still have the leading & trailing edges pinned to their respective sides of the container view, and set the space between them to zero, then you should be good.