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.
Related
Edit: PLEASE LEAVE A COMMENT IF YOU'RE GOING TO DISLIKE SO I CAN IMPROVE MY QUESTION
I'm trying to recreate a custom table view cell in my xib file as shown below. The company's square image is on the left. The company's name and company's booth (2 UI Labels) are to the right of the company's image. The star button is to the right of the text and is a square image. I guesstimated that the company's image and favorites button should be about 8px from the top and edge.
I tried to create 4 constraints for the top, bottom, left, and right of every element (image, 2 UI labels, and button). I also added 1:1 aspect ratio constraint to the image and button to make sure the image would be square. Then I aligned the left edge of the 2 UI labels. I vertically centered the image and the button. However, it came out with no star button and the location and title switched. How do I create this design using constraints?
Their is no difficulty with that.
First if we talk about your left UIImageView, Set following constraints,
Leading constraint
Fixed Height
Fixed Width
Centre Vertically
After that the UIImageView on left, set following constraints,
Trailing space from superview
Fixed Height
Fixed Width
Centre Vertically
Now for both Labels, put them in a UIView and give that UIView following constraints,
Leading space from left image view.
trailing space from right image view.
top space from superview
bottom space from superview
Now for upper UILabel, Set following constraints,
Leading space
Trailing space
top space
Now for lower UILabel, Set following constraints,
Leading space
Trailing space
top space from upper UILabel
bottom space
After all this, i think that this will work for you.
You can use the constraints in the image below. It will work for all screen size and for any height of row.
I'm a newbie when it comes to UIConstraints and i'm trying to center the "Continue Button" and "No, thanks" with Auto Layout in the space between the UICollectionView and the bottom in the xib. Which UIConstraints should i add?
Here is the implementation i made
As you can see in the image, i implemented 3 Stack Views with the different components. To make them all "one" i put them in a Stack with constraints <= to the bottom and top and constraints with a fixed size so that they don't go pass the bounds of the view.
If you don't want to use absolute values, you need two more transparent views to obtain the layout you want.
One view, should be added above "Continue" and it should have it's top margin set to the collectionView and the bottom margin set to "Continue".
The second view should be placed under "No thanks" and it should have the top margin set to "No thanks" and the bottom margin set to the bottom of the superView.
You can have both views take up all the horizontal space by adding left and right margins equal to the superView.
After you set the constraints I mentioned above, you have to add one more equal height constraint between the two extra views. This will ensure that the space above "Continue" and under "No thanks" will always be equal.
Using auto layout I am trying to create two buttons on the bottom like this
After dragging two buttons I set constraints like this
On Back button I set Leading Space to Container Margin and Bottom Space to Bottom Layout Guide
On Go To Settings button I set Trailing Space to Container Margin and Bottom Space to Bottom Layout Guide
Then I ctrl+Drag from Back button to Go To Settings button and set the Equal Widths constraint and I get this.
Then I update the Back button width same as Go To Settings button which is 101 and all constraints turn to blue.
But I want both buttons to cover half of the screen no matter what the size of screen is, same as shown in first screen shot, How to accomplish this?
you can done it using equal width to 2nd button like this
and the output is
Here is apple guide
You can have the equal widths constraint between the buttons, but you also have to tell them which is that width you need.
So drag from a button to the superview, add an equal widths constraint. Then in the properties of the constraint you've added, set the multiplier to 0.5, this way your buttons should be on half the screen.
You need to add one more constraint - set horizontal space between buttons to 0
You can followed the layout changes. you will get what you want.
Layout for Back button.
Layout for Go to Setting button.
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.