I've a simple layout that I know how to do it with a horizontal stackview. But for learning purpouses I want to know if it is posible to code using AutoLayout constraints.
The layout is simple, it's a rectangular row that contains an image and a label.
The problem is that the label can have multiple lines and be bigger than the icon.
The desired layout is that image and label had to be centered in Y axis and the bigger height one have a margin of 8 points at top/bottom.
You should give the image and the label a margin constraint for both top and bottom. Use greater or equal as relation for these margin constraints.
Give a top and bottom margin constraint for image and label. Set high priority with relation Greater Than or Equal.
First Write this in viewDidLoad
self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 44.0;
Set numberOfLine property to 0 in StoryBoard
Set UIImageView Constrains like:
Fixed Height and Width and Vertical Center in Container.
Set UILable Constrains to HorozontalSpacing from UIImageView Trailing Top Bottom from SuperView i.e Cell.
Hope it will work...
Related
I have a horizontal collection view that contains an UILabel. I have mentioned the collection view cell's size in the delegate method.
And added leading, trailing, height and vertical center constraints to that label as shown in the below image.
But in the output, the width of the label is getting increased or decreased based on the text and the collection view cell size as well.
I want to keep the size of the collection view cell fixed as mentioned in the delegate method.
How can I accomplish this?
Two things.
First, it sounds like you might be adding a width constraint to the label that’s equal to the label’s text width. That width constraint will force the cell to expand to meet the requirements of the leading, trailing and now width constraints. Instead, make the width constraint equal to the width the label should be.
Second, set the label’s .numberOfRows property to 0. This will make it so the label will break into multiple horizontal lines instead of going wider.
Edit:
Another thing that could help might be to adjust the horizontalCompressionResistance property on the label to 249 or something lower.
I have an UIImageView and an UILabel next to each other with horizontal spacing constraint 0 and vertical alignment constraint. Now I want the image to be 80% as high as the label, so I set an equal height constraint with multiplier 0.8. But now instead of the image shrinking the image and the label grow insanely big. The constraint is still applied since the image is smaller than the label, but they are just way to big. My guess is that the constraint resizes the label based on the image instead of the other way around. So how can I tell it to do what I want?
Ary you trying to achieve like I shown in following image?
Where UIImageView view will be having 80% height of your UILabel?
If yes then Height Constraint will be key here.
Select both UI elements and apply Equal Heights constraint
It will make both as same height.
Then select the Height Constraint of UIImageView and add
Multiplier = 0.8 in Size inspector
Apply One by One constraints to each element first to show in expected way then add Equal Heights constraint. It will show conflict because other constraints are already present, then apply Multiplier = 0.8 and finally you are good to remove the unwanted constraints i.e. Fixed Height.
To avoid auto resizing of UIImageView according to Image, you need to have fix Height constraint for UILabel.
I am not sure why but I have having so much trouble with constrains and auto layout. I have the below view and I want to make it display as is shown but every single approach I take to get seems to be incorrect.
I have been following this tutorial online Auto Layout Tutorial in iOS and I am rather trying to describe my constraints. Following this technique this is what I have:
Description of my constraints.
Label:
Centered in the view
51 from the top
All images:
Must have equal height and equal width.
Are separated from the left and right by a 0 gutter.
All inner gutters separating the images are 12.
I have also included my storyboard.
storyboard link
for this you just declare height and width of the first imageview with respect ViewController use equal heights and equal widths and then change in the multiplier default it will be 1 adjust to your size then for the remaining imageviews you just give equal widths and equal heights of the first imageview.
If you want keep height and width constant , don't pin it, just use horizontal centre constraint. Pin it up using auto layout , hope this is helpful.
You are set image height and set image bottom constraint and does not set label height that you are many choice
Set your label height because you run iPhone 4 or 4s that your label doesn't display.
remove your image bottom constraint because you are set fix image height.
you image doesn't fix height that remove your set image height and all image select and set equal height constraint (all image height same).
Better You should move that four image views into a uiview(childView) .Make sure that 4 image views are the subviews of UIView.
-Add equal width and hight constraint to SuperView from the childView.
- Add multiplier value for the EqualHight and Equal Width constraints by selecting both constraints on storyboard(like 1:2.1,1:2.2).it may keep the same distance in all orientation
Add Y position and X position by trailing space and leading space, centre vertical in container.
Then Select the 4 uiimageviews and make sure they have same width and hight,after that
select 4 image views then click the pin button and check the equal width and equal hight.
Add leading ,top and trailing space for image1
[1,2]
[3,4]
add trailing and top space for image 2
add leading ,top and bottom space for image 3
add trailing ,top and bottom space for image 4,
I have one UILabel and One UIView contains other subviews side by side in Storyboard. The UIView should butt up against the right edge of the UILabel(trailing constraint of 1), but I also need the UIlabel (the one on the left) to set it's width equal to it's content size unless it hits a max width. Visually:
|Label text| |UIViewWithSubviews|
And I need the following constraints:
1) Label should resize width wise unless it hits a max size and height is also dynamic that means when text reaches the maximum width then the word wrap will break the sentence to another line. and UIview will become vertical to UIlabel.
2) UIView should always be butted up against the right edge of label one in vertical center.
How do I set this up in Storyboard?
Thanks In advance.
Is this what you need?
Here is how i did in Interface Builder.
1) Set a width constraint on the UILabel that is "Less Than Or Equal" to the max width you want.
2) Set the number of lines for the UILabel in the storyboard to be 0. This enables the wrapping you are looking for. Don't set any height constraint at all.
3) Set up constraint to center the UIView vertically with the UILabel.
4) Your other existing constraints sound fine. Just make sure that the UILabel has a clear x and y position, for example by anchoring to the leading and top edges of the superview. And make sure the UIView similarly has sufficient constraints as needed in addition to the vertical centering and the leading edge alignment with the UILabel.
I'm trying to use auto layout to dynamically size my UITableViewCell heights. For basic cell design, like to labels in row, I've managed to achieve what I want. But I can't get it working for the following:
Setup
I'm using Swift and Xcode 6.4 targeting iOS8 and above.
TableView row height is set to UITableViewAutomaticDimension.
Estimated height for TableView is set to 100, which should generally be close to the final height.
The title's vertical hugging priority is set to low (250).
Didn't change the other elements hugging and compression priority.
Here's the prototype cell:
The image to the left has a fixed height. The title text should grow to fit the complete text. It's a label with rows set to 0. The subtitle should not grow because it will only be short text.
My constraints setup
For the image leading and top constraint set to 18. Trailing constraint to title and subtitle label set to 18. Bottom constraint set to 18 with priority low (249).
For the title label top and trailing constraint to superview set to 18. Leading constraint to image 18. Bottom constraint to subtitle is 0.
For the subtitle label top constraint to title label is 0. Trailing space to superview is 18. Leading constraint to image is 18. Bottom constraint to superview is 18 with priority low (250).
The Problem
No matter what, I want the bottom space to the superview to be 18 units. That means, if the text's (title + subtitle) height is less than the image's height. The image's bottom constraint should ensure 18 unit bottom margin. If the title grows in height and the total text is higher than the image, the subtitle's bottom constraint should ensure 18 unity bottom margin and the image's bottom constraint should be ignored.
I'm thankful for any suggestions how to solve this, because I'm at a point, where I'm just punching in some random values to the constraints...
Update
Please see the marked answer on how to setup constraints to achieve the layout I needed. If your cells do not layout properly on the tableview's first load, please se this question for a workaround: iOS 8 Auto height cell not correct height at first load
Firstly, UITableViewAutomaticDimension despite the name isn't documented for auto TableView row heights. Just don't implement heightForRowAtIndexPath and implement estimatedheightForRowAtIndexPath as you have.
To address the layout problem, it is not a priority issue but a problem with your constraints. Because you have a fixed top and bottom constraint from your image, the cell will never grow to be larger than the image + 36pt. The solution is to make your top and bottom constraints from your image >= rather than =.
After doing this, you will probably find that there are red warnings in IB for ambiguous constraints. This is because with greater than or equal to constraints, the layout can't determine the correct Y position of the image view. The solution: add a center Y in superview constraint to the imageView.