I am new to swift and so I am not familiar with auto layout. I have an image. on the right of the image is a label. The distance to the right label should be 8. Also I have a label under the image. Here the distance should also be 8.
My hope was that the picture is doing its size now automatically. But on the picture you can see that it tells me that there is a problem with constraints. Probably because I dont told the image to always make the picture in the view as wide as possible and than look how high it needs to be. But I also dont know how do add a constraint like this. Can you help me?
Constraints on image top left:
scissor.top = topMargin (so 0 to top)
scissor.leading = leadingMargin (so 0 to left)
constraint between scissor and label on bottom:
label.top =scissor.bottom + 8 (so distance of 8 between them)
constraints of label on bottom:
label.bottom = bottomMargin (distance of 0 to bottom)
label.leading = leading.Margin (so dostance of 0 to the left)
constraint between label on right and scissor:
articleLable.leading = scissor.trailing + 8 (so distance of 8)
constraint of label on right:
articleLable.top = topMargin
articleLable.trailing = trailingMargin
You need to constrain the imageView, because x-Code does not know what 'as wide as possible' means.
I assume you mean that the left side of the imageView and the Cell's left side are identical and the top side of the imageView and the Cell are identical.
Adding these two constraints should fix the issue.
you can click on red icon like image for detail
Image
Related
I use a stackview (horizontal) with this setup:
Inside it, I have just 3 buttons (without text, only icon). The height/width button are set by constraints:
And the result is:
BUT I don't understand why my second button has a huge width... even if it width is fixed at 44.
Have you got some explanations guys please?
Thank you very much!
Your settings are just conflicting, that's the answer. It must fill stackview width with 3 buttons 44pt each + 6pt spacing between them, and this can't be resolved, because stackview width is bigger than 44*3 + 6*(3-1).
If you want all buttons be on the left with 6 point spacing, then remove trailing constraint for stackview;
if you want buttons to fill the full width -- then remove spacing = 6 and set distribution = equal spacing
Try to put the distribution to equal spacing on the stack view. That means that the spacing will be equal between every button. If you do not have any constrains on the stack view that affects the width then that should work.
Otherwise you need to increment the spacing value in order for the buttons to have equal widths.
Thanks for the question!
I have a label with many lines of text. I want to have 20px of margin on left and right if the screen is small but I do not want it to be bigger than 300px if the screen is big.
What I have tried:
- I choose a label as I want the text to be not scrollable and not selectable
- I have given it Attributes > Lines > 0. To adapt to many lines
- I have given it constraints to top, left and right
I am very new to Xcode. In html I would use something like that css:
.text {
with:90%;
max-width:300px;
}
How could I create a similar effect in Xcode and Swift?
(The left and right constrains works well for me to give a similar effect to the width:90% in a small screen. What I am asking now is how to limit the width of the label if the screen is big. Please, be aware that I am very new to Xcode)
This is where you'd want to use less than and greater than constraints.
Set the following constraints:
width ≤ 300
left ≥ safe area left + 20
right ≥ safe area right - 20
horizontally in container = 0
top = 20
You can add a ≤ or ≥ constraint by selecting the constraint and using the drop down that says "Relation" in the property inspector:
I am doing a sample project with size class and autolayout in swift.I have four buttons on top of the screen.How to set same width for all buttons with one pixel gap between them and make them fit for all screen size.
thanks in advance
The trick here is to make the button widths variable, but the same for all buttons. This can be accomplished like this:
Place the four buttons
Set the left margin constraint from the leftmost button
Set the right margin constraint from the rightmost button
Set horziontal distance constraints between the buttons to 1
Set the width constraints for all buttons to >= 10 (or any other
value, this makes the width variable)
Set equal width constraints on all buttons (ctrl-drag from one button to the next and choose equal width. Repeat that for all buttons)
I am trying to set a UIImageView has no fixed size and width in the storyboard. I set the leading space to container to greater than or equal to 20, top space to the container to greater than or equal to 20 and trailing space to container to greater than or equal to 20 and vertical spacing to a UICollectionView, the UICollectionView satisfy the constraints. But the UIImageView don't work, it's telling me it's Position and size are ambiguous. How can I make it work? My Idea is no matter how large the image view, it will always keep 20 space to leading, top, trailing and bottom.
I have set the height and width to be greater than or equal to some value and their priority to 999, it's lower than the leading, top and trailing priority. and I have set the imageview to center horizontally. but i get height and vertical position are ambiguous for “Image view”.
Can you see what happens when you add height and width constraints to the UIImageView, but set their priorities to some low value, e.g. 1? It should help, but now UIImageView won't be centered. You can fix it by enclosing UIImageView in another view (empty UIView) and centering it in it both horizontally and vertically.
When you get this error:
Position and size are ambiguous for “view”
Probably following constraints are missing/incorrectly set:
Width constraint (size issue)
Height constraint (size issue)
Alignment constraints (position issue)
If you are using Stack Views, make sure the Photo Image View is inside the Stack View! (As in the Apple Tutorial)
If you want to give margin kind of thing into button through coding than please try these if it'll work
[button_Name setTitleEdgeInsets:UIEdgeInsetsMake(0.0, 12.0, 0.0, 0.0)];
I hope this will work..!!!
In cases where the height/width are not ambiguous at runtime, but ambiguous at storyboard time, e.g., setting an image dynamically, having a container view, etc, I try to add constraints with the placeholder checkmark checked to silence xcode.
I have some buttons in an UIView. My problem is, that they get cut
off at the right side of the UIView. How do I prevent this?
alt text http://img.skitch.com/20090629-mj32p1bkff476256pwrpt69n2d.png
I've checked already Interface Builders clip property, but it's no
solution for this problem.
Regards
It seems like either you made these buttons programmatically, or you reiszed the initial IB view window to be larger and expected it to shrink down to the fit the screen.
The buttons in question cannot fit on the screen as they are - what effect are you looking for?
If you want the buttons all to fit you could set the text size to be smaller, and then they could fit.
If you want the buttons the size they are then you'll have to make another row, or put the buttons into a side scrolling container.
I have been using java and only recently began learning Apple's Obj-C framework.
An alternative to scrolling and row-breaking is using a "grid" layout with 1 row and n columns, where n is the number of buttons. Each cell has a fixed size. And you will have to resize your buttons (the subviews) in your superview's setNeedsLayout: method to whatever width you need such that all buttons fit the row.
See java's GridLayout class.
Kendall, thanks for your answer.
Here is my solution:
if(previousFrame.origin.x + theStringSize.width > 220){
roundedButton.frame = CGRectMake(15, previousFrame.origin.y + 30 , theStringSize.width + 8, theStringSize.height);
[myContainer insertSubview:roundedButton belowSubview:[tagsContainer.subviews lastObject]];
}else {
roundedButton.frame = CGRectMake(previousFrame.origin.x + previousFrame.size.width + 5, previousFrame.origin.y, theStringSize.width + 5, theStringSize.height);
[myContainer insertSubview:roundedButton belowSubview:[tagsContainer.subviews lastObject]];
}
I calculate, how many pixel I've moved from the left side. At some threshold (in my case 220) I start a new line.