OK so I have a UITableView and a custom UITableViewCell. This custom cell has a title, below that a sub-title, below that a UIImageView (aspect fit) and below that a button. Now the titles will always be one line of text so the only element with varying height is the UIImageView. Now I've assigned the following constraints:
title label - top space 8px, left space 8px, right space 8px
sub-title label - top space 10px, left space 8px, right space 8px
image - top space 20px, left space 8px, right space 8px
button - top space 8px, left space 8px, bottom space 40px
Now I didn't give the image view a height or width constraint because the images will be of varying size. I was also sure to create a trail of constraints going from the top of the cell to the bottom. I also set postTable.rowHeight = UITableViewAutomaticDimension to automatically adjust the cell height and gave a fair estimate of the height.
However when I run the application there is a HUGE amount of space at the top and bottom of the image view. Which is strange because I set a constraint on the image to be 20px below the sub-title label, and I set a constraint on the button to be 8px below the image, which does not happen AT ALL. What could be the issue here? The constraints I posted above are the only constrains on the entire view.
Ok so figured it out, for anyone who stumbles upon this the issues is the image aspect fit mode which throws off the cell height calculation. What you have to do is apply the constraint manually before setting the UIViewImage.image.
See this for more info: Auto-Layout: Get UIImageView height to calculate cell height correctly
Related
I have been facing issues horizontally aligning two UILabel and one UIImageView like this:
First label has variable width, can be truncated if long. Second label has fixed width, it should always be aligned to right of UIImageView. It should never go off screen. UIImageView is aligned to right of first label.
I have tried embedding them in horizontal UIStackView but the image + second label always aligns to end of cell. Got the same issue when trying without UIStackView.
Please help.
You can embed both label and horizontal StackView into another horizontal stack view. Then, you'd need to set the dynamic width Label's Content Compression Resistance Priority (you can find this property at the bottom of the Size Inspector), to be smaller in order for it to shrink.
Then on the container StackView (the one that contains all views), you'd need to set constrains to top, bottom, leading to 0 to the superview and the trailing to be greater than or equal to 0, for it to not take all space of the superview, but at the same time not get offset if the content is too wide.
I hope that is clear enough!
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 want to have a UILabel with a button to it's right centered horizontally like of the picture.
I've implemented an "Align by Horizontal center" for the UILabel and standard space between label and button and it usually works just fine.
The problem appears when UILabel's text is very long and it goes out of bounds and the button is not even visible.
I've tried to set lines count for the UILabel to 0 and set questionLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.questionLabel.frame)what makes the label to grow vertically. But it's width is very small (it's the base width from ui designer) so it looks like a column of text.
So the question is how to make UILabel to:
to fill all available horizontal space without hiding the button
autoscale vertically if there is no enough horizontal space to fit text into one horizontal line
be centered horizontally
It's missing the constraint from the trailing of the UIImageView to the trailing of your container view or margin. I used a Greater Than or Equal constraint so if the label has a short length, the image will stay close to the label - using the horizontal space constraint from the label to the image.
With that, your label - that is centered relative to your view, will be centered and will respect your trailing constraint of the UIImageView to the view using all the horizontal space that is possible to use as follow:
In the following image it's possible to see that the label reaches the maximum width it can, according to the constraints:
you could remove the width constraint and add a horizontal space constraint from the right side of your label to your image and one from the left side of your label to the left border of your view (set the constant to the minY Value of your Image to get it centred)
I've been trying to make a screen look like this:
But when i run it it keeps appearing like this:
So far I've tryed to debug the View Hierarchy but debugger shows the actual expected view:
I've come up with a workaround, putting the UIImageView before the top bar in the View Hierarchy so when it extends it goes under the top bar instead of on top.
EDIT:
The bottom white box is not a blank space, is actually a view intended to host 2 buttons.
My constraints are set as follow:
Top banner:
height: 50
vertical spacing to Top Layout Guide: 0
leading and trailing spacing to superview: 0
Image:
vertical spacing to Top banner: 0
leading and trailing spacing to superview: 0
Bottom view (white box):
vertical spacing to Image: 0
leading and trailing spacing to superview: 0
proportional height to Image: 1:3
There are no other views in the hierarchy and no other constraints.
You need to place a vertical spacing between the top banner ("Amigo invesa app" written image) and the middle image (image with unknown green fruit/vegetable). But there is an unclear point, which is following
Exactly how many spacing do you want bottom of the middle image view
For example you want a 64px distance between middle image and the bottom of the view controller's view, then don't forget to put an vertical spacing with spacing 64px.
According to your second editing::
all the Constraint you have listed in the bottom. But there are some missing constraint which is
Height of the top banner, but you may want to resize the banner in bigger screen, that's why you need to specify other component's height (explicitly or implicitly). Here explicitly, I mean hard-coded specify the height of the middle image & the bottom white view's height & implicitly means by ratio between both of them as you mention proportional height to Image: 1:3. In the implicit case, you middle image height is not specified so the bottom white view's height can't be specified by the autolayout. Its an ambiguity situation for autolayout.
My advise will be please specify a explicit height for both top banner & bottom white view & remove the ratio constraint. That should do what you want.
Happy gui designing.
I found both the problem and the solution to this problem.
The UIImageView is actually behaving as expected, but the image it contains is spilling out of the view as stated in this answer.
The solution, explained in detail in the referenced answer, is as simple as to set imageView.clipsToBounds = true.
I am working with autoLayout for UITableViewCell
So here is my xib and constraints
Here I set constraints such that tableView has dynamic height
Whenever I run on iphone5, it looks this way correctly which I want
But when I run the same thing on ipad it shows this way
So I am not understanding how to make the ipad version look same as iphone version, Not understanding which constraints I am missing.
When working with autolayout constraints, formulate what you want into sentences.
Example:
I want the yellow view to be pinned to the right.
I want the yellow view to be pinned to the top and bottom.
I want the yellow view to have width of 50.
I want my label to be pinned at the top and bottom.
I want my label to be pinned to the left.
I want my label to be pinned to my yellow view, with 10 pixels between them. (Thus growing in width along with the superview width).
And there you have all your constraints. Now you just have to add them one by one. Top, Bottom, Right to superview and Width constraint with a constant of 50 for the yellow view. Top, Bottom, Left to superview and Right to Yellow view with constant of 10 constraints.
You've pinned your yellow view to the left of the superview, so on bigger screens, it will grow to fulfill that constraint.
It looks like you pinned the left edge of the yellow view to the left edge of the table view cell with a 300pt offset. That means on the iPad, the yellow view is still 300pts offset from the left edge of the screen, and grows to fill the rest of the width available.
What you probably want to do instead is pin the right edge of the yellow view to the right edge of the table view cell with a 0pt offset, then also pin the yellow view's width to its desired size.