I'm trying to load a image to my tableview cell, however, the image seems to be bigger than the imageview and exceed the boundary of imageview.
I tried to set the contentMode property of the UIImageView to ScaleAspectFit but it didn't solve my problem.
Code :
cell.imageView?.contentMode = UIViewContentMode.Center
cell.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
switch (post.priorityLevel){
case "High Priority Posting":
cell.imageView?.image = UIImage(named: "High Priority Posting")
case "Priority Posting":
cell.imageView?.image = UIImage(named: "Priority Posting")
case "General Posting":
cell.imageView?.image = UIImage(named: "General Posting")
default:
print("Priority Level can't be loaded to table")
}
I added screenshots of my table view from Interface builder and the result on simulator.
Any suggestions will be appreciated.
Follow below constraint and you will see the magic of Auto layouts
ImageView constraints:
Set the fix height and width you want to display for the imageView, and set VerticalCentre constraint. Set imageView's content mode to Aspect Fit.
Top label constraints:
Label TrailingSpace constraint should not be a constant value, instead set it to standard spacing (i.e 8 pts).
Second label constraints:
Labels TrailingSpace and BottomSpace constraint should not be a constant value, instead set it to standard spacing (i.e 8 pts), and set its VerticalContentHugging priority to 250
Update:
ImageView vertical constraint to cell:
Label1 TrailingSpace to cell with standard spacing:
Label2 TrailingSpace to cell with standard spacing and BottomSpace to cell with standard spacing.
Try cell.imageView?.contentMode = UIViewContentMode.ScaleAspectFill
https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/Lesson7.html#//apple_ref/doc/uid/TP40015214-CH8-SW1
In this official tutorial, they design a tableview exactly like yours. I think your main issue has to do with the lack of constraints/autolayout
UIImage
1) first you set the imageview leading space ,equal height,center vertically to container
2)set height itself
City and State
1) set horizontal space and Top to UiimageView, Trailing space to container view
2)set height itself
Description label
1)set horizontal space and Bottom to UiimageView, Trailing space to container view
2)set height itself
story board -> set lines = 0
If its a custom table view cell, dont name the imageView outlet to "imageView", name it to any other for eg: "cellImageView". and then try setting clipsToBound to true of your cell cellImageView.
Related
I have a collectionviewcell with a button and a label like this:
The button is a 100x100 square, the label is a 100x40 rectangle. The cell is adjusted to 120x140.
So the constraints I have added are:
Button:
aspect ratio 1:1
top to superview space 0
bottom to label space 0
center horizontally in respect with cell
width = 100
LABEL
same width as button
center horizontally in respect to button
height 40
top space to button 0
bottom space to cell 0
I see constrain errors everywhere.
I have tried to embed these two views on a stack. It craps everything.
Then I have tried to embed the stack into a view, same problem.
This defies any logic.
Can you guys tell me how in the name of heaven I constrain these elements? All I want is both elements centered horizontally, the button on top, the label on the bottom, both with the same width of 100, the button squared and the label with a hight of 40. Both in a cell of 120x140.
Thanks
This is how you should set your constraints using a stack view in a cell to accomplish what you need: (cell width = 120, height = 140)
I have a UITableView filled with one type of custom UITableViewCell. Each cell contains a title (UILabel), subtitle (UILabel), and thumbnail (UIImageView), as shown below.
The widths of all three subviews are fixed, but only the subtitle label has a fixed height. The title label's height is dynamic according to the amount of text. I have set the title label's numberOfLines to 0 to reflect this.
My objective: The height of the cell should be determined by the height of the title label. In other words, the cell height should be the sum of the two labels' heights plus the three vertical padding gaps. The image height should be set to the resulting height of the cell.
My current implementation: I have set the following autolayout constraints:
Thumbnail is pegged to superview on top, left and bottom
Thumbnails width is proportional to superview width by a multiple of 0.2
Thumbnail is pegged on its right side to title and subtitle (trailing space = 8)
Title is pegged to superview on top and right (trailing space = 8)
Title is pegged on its bottom to subtitle (trailing space = 8)
Title height is greater than or equal to 24
Subtitle is pegged to superview on right and bottom (trailing space = 8)
Subtitle height is equal to 20
Additionally:
Title numberOfLines = 0
Thumbnail contentMode = Aspect Fill
Thumbnail clipToBounds = true
The problem: The image height does not respect the height of the labels, so the height of the cell is set to the full height of the image and the title label is stretched vertically. This is understandable given the constraints I have used, but is not what I want to happen.
My question: How do I constrain the UIImageView's height to respect the cell height (determined by dynamic label height), instead of having the cell height respect the UIImageView height?
My Environment:
Xcode 10
iOS 11 & 12
Swift 4.2
Try setting thumbnail vertical compression resistance lower than title vertical hugging priority. In code it'll look like this:
thumbnail.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
titleLabel.setContentHuggingPriority(.required, for: .vertical)
I'll explain the vertical constraints to make this possible.
Pin the top of the label to the contentView with enough padding so that image view stays inside it.
Pin the top of the subtitleLabel to the bottom of the titleLabel.
Pin the bottom of the subtitle similarly to the bottom of the contentView, so that the image view stays inside it.
Your cell now has a height based on the above constraints. Now you just have to make sure you place the image view inside this height.
Pin the top of the thumbnail to the top of the label, bottom to the bottom of the subtitle label.
Example:
titleLabel.top -> contentView.top + 10
subtitleLabel.top -> titleLabel.bottom + 5
subtitleLabel.bottom -> contentView.bottom - 10
imageView.top -> titleLabel.top - 5
imageView.bottom -> subtitleLabel.bottom + 5
I'm having issues centering my UIImageView in a UITableViewCell.
The image below you can see it's not correctly aligned. My cell is setup like so, with the image view pinned to the top, bottom and sides of the cell, centered horizontally and aspect ratio on.
Any ideas what I might be doing wrong here?
UPDATE: Curiously if I tap on the cell and select it the image then centers correctly.
Try
imageView.contentMode = UIViewContentModeCenter;
//Or
imageView.contentMode = UIViewContentMode.ScaleAspectFit;
Hope it will solve your problem.
Try to remove leading and trailing constraints and add Center Horizontally constraint from your imageView to the label which is above that imageView.
Please add following 2 constraints and image will starts appearing in centre of parent view.
1) Centre horizontally in parent
2) Centre vertically in parent
I have a ScrollView embedded in my ViewController. Inside the ScrollView I have embedded a content view (UIView) which has a UIImage set to match the left, top and right of the ScrollView with a dynamic height that changes depending on the aspect ratio of an image that the user can load after the ViewController loads. There are three buttons all horizontally aligned in the content view and spaced evenly apart from each other.
When the user loads in a photo that is too big for the screen it should just resize the ScrollView and the content view appropriately to allow scrolling to see the buttons but instead it just bunches up the buttons at the bottom of the screen.
Here is how the buttons should look:
Here is what happens when the photo is too big:
Here are the constraints of the ScrollView:
Here is my resizing code:
let img : UIImage = info[UIImagePickerControllerOriginalImage] as! UIImage
let screenSize: CGRect = UIScreen.mainScreen().bounds
let multiplyNum = screenSize.width / img.size.width
imageViewHeightConstraint.constant = (multiplyNum*img.size.height)
imageView.image = img
Even when I try and change the ScrollViews height programatically to a very large number it still won't get any larger than the ViewController (no scrolling).
Constraints of ContentView:
Constraint of ImageView:
Constraints of first 2 buttons:
Constraints of last button:
Make sure to set all the constraints that completely define the vertical layout of all elements (top constraint for image, vertical space between elements and bottom constraint of last element), and try changing the priority of the content hugging or compression resistance of the elements.
Edit:
You can achieve that behaviour with this view hierarchy:
- UIView
- UIScrollView
- UIImage
- UIButton
- UIButton
- UIButton
There is no necessity to add a container view if you set the constraints like this:
scrollView:
Leading, trailing, top and bottom constraints to view (all 0)
inner views (horizontal):
Leading constraint from imageView to scrollView
Trailing constraint from imageView to scrollView
Equal width from imageView to view
inner views (vertical):
Top constraint from imageView to scrollView
Height constraint of imageView (this constraint constant will change depending on the size of the image)
Horizontal space from imageView to button1
Horizontal space from button1 to button2
Horizontal space from button2 to button3
Bottom constraint from button3 to scrollView
There is no necessity to change the priority of the content hugging or compression resistance of the elements.
I already check that it works in a project.
I'm trying to setup a tableview which each cell will have an Image on the left, a Label which overlays the image, and finally a label to the right of the image with long text in which I would like for it wrap to the next line if needed. My tableview row height is set at 65.
I have set the number of lines to 0 and set the line break to work wrap.
I even tried setting parameter programmatically in my CustomTableViewCell class:
self.materialLabel?.numberOfLines = 0
self.materialLabel.sizeToFit()
self.materialLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping
I've tried many combinations of setting constraints on my label, but it either doesn't work or affects all objects in the cell with the image and image label out of sync. The alignment constraints are not available to set.
Working with Xcode 6.3.2, Swift 1.2, and iOS 8
Thanks in Advanced!
You can use dynamic cell height ( or self sizing cell).
Basically, you create top, leading, bottom, trailing label's constraints relative to cell's contentView.
and then set
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = someValue
http://www.raywenderlich.com/87975/dynamic-table-view-cell-height-ios-8-swift
There are many ways to setup dynamic height for table cell.
If your not not using autolayout, you need to calculate table size programmatically and return using table view delegate method.
If your using autolayout, your life will be very easy. Add constraints to cell, I.e add border, width and height constraints to image. Add only 4 border constraints to image(don't add height constraint). This may not be the exact constraints, but this will give you a idea. Add following code in viewDidload
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = someValue
This should work.
Turns out my label width was too wide. I had to anchor my imageview and the imagelabel and set the width and height before setting the constraints on my label.