I'm trying to display 3 image views, along with some additional information in a UILabel, in a UITableView. Attached is an image of my Cell Prototype:
Currently, my issue is that the image content is running over to the following cell. As I test, I'm currently only loading the largest image of the 3 (I pull them from a server presorted from largest to smallest-- I'll also note that the images will be subject to various dimension constraints).
My issue is that, while its width is working correctly, its height runs over the metrics label and into the next cell.
I now know that in order for this to work, auto layout constraints have to be properly configured. However, I'm new to this and am having some trouble with it.
To start, I'll try and explain exactly what I'm looking to accomplish:
The description label should span across the entire table cell.
To do this, I've pinned the leading, top & trailing spaces to the superview
I would like the top right and top left image to both be positioned directly below the description label. To do this, I've:
Pinned the leading space of the top right image to the superview
Pinned the trailing space of the top left image to the superview
Pinned the top space of both images to the Description label
Pinned the horizontal spacing between these two images
I would like the bottom right directly under the top right, to do this, I've:
Pinned the leading space of the bottom right image to the superview
Pinned the top space of the bottom right image to the top right image
I'd like the metrics label to appear below the top left image, to do this, I've:
Pinned the top space of this label to the top left image
Pinned the bottom and and trailing edges of metrics to the super view
Pinned the leading space of metrics to the bottom right image.
I'm certain I'm doing something wrong here, should I not be pinning subviews to each other at any point?
Also, apologies for my presentation of this issue. Below is an image of the warnings I'm getting (for your reference, Image 1 is top right, Image 2 is top left, and Image 3 is bottom right) When I view the constraints of each of the image views, each side IS accounted for.
Any help would be appreciated! Thanks.
try adding this code to your viewDidLoad:
override func viewDidLoad() {
super.viewDidLoad()
tableView.estimatedRowHeight = tableView.rowHeight
tableView.rowHeight = UITableViewAutomaticDimension
}
Related
I have a peculiar issue when dealing with my label in Vertical, then horizontal stack view.
The horizontal stack view is supposed to be of a dynamic height based on the label's contents. I've tried other solutions mentioned before, such as embedding the label (and image which is also in the horizontal stack view) in separate UIViews and pinning the labels to the edges.
The issue is, when the label is set to 0 - the label grows beyond what it requires, adding padding above and below the label.
I did verify this wasn't an issue with constraints from where the Stack View begins below the imageView, as the warning label correctly floats upwards when aligning the stackview to "top", but the label still remains centered.
Everything has been done in the storyboards without code.
Take a look at the images, maybe someone can help me out and recognise how I can resolve this issue.
Desired Effect
What occurs upon running the application
Verifying that the stack view is correctly pinned to the image view by aligning top
Constraints involved
The second stackview in the hierarchy at the bottom is just to fill the empty space during the designing phase. I don't think that would be causing the issue.
I would guess that actually your second stackView at the bottom is also the part of your problem. If you pinned the vertical stack view to the bottom of the image (TOP constraint) but you also pinned it to the bottom of the screen (BOTTOM constraint), your vertical stack view tries to strech it's content. That's the reason why the label has the extra space.
What you can do: get rid of that bottom constraint (don't give vertical stackView bottom constraint) or maybe better set vertical content hugging priority of warning label to greater value.
Here, the warning UILabel is occupying the remaining available space, try adding an empty UIView in the second stack view which you kept for the later stage of the development. This will act like a spacer view.
Also, don't forget to call warningLabel.sizeToFit() inside viewDidLoad()
You can achieve this by calling yourLabel.sizeToFit()
Above will dynamically adjust the height of the label based on the amount of space your text occupies.
I'm trying to use autolayout to create a layout for cells in my table view. I will attach a screenshot of what I am trying to achieve.
The main rules are that the button at the bottom must be the width of the cell. Then the image on the left should sit tight to the left but exactly halfway between the top of the entire view and the top of the bottom button. Then I need the 4 rows on the left to sit equally between top of the view and top of the button. And for them to display in a list like they do, and with a small image and text label in line.
I have tried quite a few ways to get this to work. I have managed to get the button to stay at the bottom as required. However, I am struggling to get the imageview to stay as a square on the left and then the 4 rows on the right to take up the rest of the space.
Any help would be appreciated.
You can achieve what you want by wrapping imageView and rows into separate container views (see
Attachment)
Steps for imageView:
ContainerView1 constrained to the top of the cell view and to the top of Check In button
imageView constrained vertically to the center of the ContainerView1. Also set imageView leading constraint to the ContainerView1 leading as you need
Steps for rows
Wrap rows into ContainerView2. ContainerView2 constrained to the top of the cell view and to the top of Check In button.
Constrain firstRow top to the top of ContainerView2. Each subsequent row should be constrained by its top the previous row's bottom. Constrain lastRow bottom to the ContainerView2 bottom
For all rows except firstRow drag "equal height" constraint to be equal to the firstRow height
That is all!
P.S. if your application works starting with iOS 9.0 you can use UIStackView instead of manual setting constraints in your cell
To keep the images square you need a 1:1 aspect constraint.
Hard to know what else is going wrong with your layout without seeing your constraints but for reference this is how I'd lay out this view.
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.
today i have set up some constraints in a view but there looks awful. Which Constraints have i to add (see screenshots)
In XCode
In Simulator
If I have understood your requirement right, you need to have four images with labels below these individual images. If this is the case, you can use collection view whose cell contains a image view and a label. You can give the spacing between cells, size of cell and intercell spacing through delegates. Also just you need to specify image view and label constraints in collection view cell. Like for instance, image view placed horizontally centre and pinned to top of superview, label placed horizontally pinned to bottom of image view and top of label to give a gap between them.
Fix the all images height and width, and given the leading, trailing, top and vertical spacing between label and images. Also fix the label height. You will given the min 4 and max 6 constraints for every fields.
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.