How to add image in ImageView of TableController properly? - ios

I have a TableViewController and custom cell. Inside of the cell i have an ImageView. Xcode 9.4
*I do not have enough reputation - so provide links.
Click for image
I have constraints settled to superview Leading-Trailing: 20, Top-Bottom:10, clip to bound enabled, Scale to fill.
When i launch application, i oversee this:
Click for image
Image shrinks down. If i change to Aspect Fit/Aspect Fill the image becomes smaller(image view is not filled) or zoomed(not all image is available).
How to fix this issue? I do not want to give it specific width/heigh for compatibility.
Maybe i should change my constraints? I have watched several tutorials, where these constraints work, even did step by step, however it does not work as supposed to.
All constraints are settled for ImageView to superView (that is cell itself).
Thanks.

Set estimated height for your cell self.tableView.estimatedRowHeight = CGFloat(44) and also tableView.rowHeight = UITableViewAutomaticDimension so that it will grow according to your content inside. the problem here is with your image your cell getting height from your image you provided if you give fix height for your image your problem would be solved.
to adapt height for imageView according to iPhone and iPad.
First way is to get superView height and give your image height according to that programmatically.
Second you can get current device type and give your image you height to that UIDevice.current.userInterfaceIdiom == .pad. you can't do it in storyboard because you don't have access to superView in custom cell.

Related

ImageView in self-sizing table cell uses height of image before Aspect Fit is applied

I have an ImageView inside of a self-sizing table cell that has a content mode of Aspect Fit.
When the table fully loads the image itself looks great, it resizes to fit within the width of the cell while still keeping the original ratio.
However, the height of the table cell is as large as if the Aspect Fit content mode was never applied to the image view.
The red in this image is the image view and the space above and below the actual image is what I'm trying to avoid.
When I replace Aspect Fit with Aspect Fill, this is what the same cell looks like:
This is what I mean when I say it looks like the image view is using the height of the image before Aspect Fit is applied.
Am I missing a constraint or setting in the ImageView?
Any help is appreciated!
If the images are being downloaded from a server, they will take a second or a millisecond to be downloaded. The time they take to download is noticeable to the user. The best user experience is explicitly setting the height and width before the image is downloaded. If you are using a third party API to fetch the image (i.e. facebook or youtube API), the return will include the image URL along with the height and width for the image. This way you can set the height and width of the cell and then wait for the image to download without any interruption or change in the size of cells. This would be the best way to do it. By having the height and width set explicitly, you don't need to worry as much about the content mode to use for the image view. I would only recommend using a self sizing UITableViewCell if you are explicitly setting the height and width of image view within that cell. I hope this helps!
I just saw your most recent comment. You can adjust the size of each image view within each cell depending on the image that is being returned. You don't need to set a fixed height for the image view. You can change the height of each cell depending on the image that is in that cell. I would just recommend doing this before the image is downloaded.
If you are using storyboard, then one way to do this is creating an outlet for the height constraint of the image view.

Expanding UITableViewCell UIElements Constraint Issues?

After an extended amount of time searching for an answer and fidgeting within my project, I have decided to come here.
The issue: I have created a UITableView in which the cells expand when a user taps on them. This part is perfect, however, I can not seem to get either the constraints or heights correct. The cells are each 1/3 of the TOTAL screen (including status & navigation bar) before they are tapped, and then they expand to be 1.75 times that size. Originally there is just a UIImageView that takes up the unrevealed cell and once it is taped it is supposed to reveal a UIScrollView (of which contains static data.) However, I can not seem to get this to happen, when I add constrains I either get overlapping ImageViews that opens to a part of the ScrollView, squished images, or a properly working expanding cell but once the cell opens the image expands with it (which I do not mind) but the ScrollView is not there.
I have attached a screenshot of a reconstruction of the interface builder. The UIImageView is set to 300, the ScrollView to 215. Screenshot of Interface
Try to check content hugging priority and content compression resistance priority of your image view and scrollView.
func checkHeight() {
levelsView.hidden = (frame.size.height < P1Cell.expandedHeight)}
you should check this return no or yes,
and how about change frame to bounds.

UIImageView overflowing custom tableview cell

I have a custom table view cell with a UIImage on the left, and two labels on the right one on-top of the other. I originally had only the image and one label, and the image was fitting perfectly inside the cell, but after I added the second label, the table view cell is smaller and doesn't contain the full image(even though the image is still the same size as it was), and doesn't contain the second label. So for some reason after I added the second label the custom tableview cell shrunk in heigh and won't contain them. I have messed with constraints for hours and can't seem to find the right ones. And yes, the image is aspect fit.
Let me know your thoughts, this might be a simple fix, I just simply can't find that fix. Thanks in advance!
When you click on your UIImageView, ensure that it has Mode set to "Scale To Fill" In the attributes inspector. It can be done programatically like this if you want:
newImgThumb.contentMode = .ScaleAspectFit
Also, make sure that your constraints are not conflicting and are properly arranged. If this doesn't work post some screenshots and I will take another crack.
Set mode of image view Aspect Fill, and select Clip Subview in XIB/Storyboard.
Hopefully it works. Thanks

aspect ratio for imageView in dynamic tableViewCell

I've got a tableView with 4 dynamic prototype cells: three of them for different kind of labels and one for an imageView.
In viewDidLoad() I use this code to determine the height of each cell based on their content:
tableView.estimatedRowHeight = 100
tableView.rowHeight = UITableViewAutomaticDimension
The problem is for the cell with the imageView.
The picture to be displayed occupies almost all the cell and it needs to be shown in landscape keeping it's aspect ratio.
I was able to do it, setting top, bottom, trailing, leading and height constraints: in this way the tableView could calculate the appropriate row.height.
Switching from iPhone 6 to 4, the image width is reduced but the height remains the same resulting in strange ratios.
I need to calculate the eight of the view based on the width of the moment and I tried it in two ways:
creating an NSLayoutConstraint outlet for the height. If I assign it a static value it works but when I try to calculate like:
constraintOutletForTheHeight.constant = CGFloat(myImageView.frame.size.width / 2)
it starts showing the first cells with the old value and the others appear with the computed height value.
I also attempted setting the aspectRatio constraint from Storyboard but in both cases Xcode tells me that it can't simultaneously satisfy constraints.
Thank you for your interest
After a lot of println() I found where I was wrong and a solution for that (not the most elegant but at least it works).
I discovered that the starting width of the imageView is the one assigned via storyboard (even after I set the imageView.image property) and after a bit of scrolling, it switches to presumed value: this is why I got constraint errors.
As a solution in tableView:cellForRowAtIndexPath:, I used the tableView width property like this:
cell.<image_view_height_contraint>.constant = CGFloat(tableView.frame.size.width / 2)
If you know a better solution you're welcome otherwise I hope it could help someone else.

How to use a fixed height for UIImageView in a tableViewHeader with Scale to Fill mode?

iOS 6+
Using Auto Layout
Table View with Header and Footer because cells in between are static (static cells are only supported in a UITableViewController, not a UITableView in a normal UIViewController..)
In IB I set the height of the UIImageView to 140. The image that I load into it is square.
I want to use scale to fill and see a portion of the image, as long as the entire UIImageView is filled. There is no way to use constraints on this header view, not in IB, not programatically (tried).
The issue is that probably because of Auto Layout, the UIImageView gets stretched until the image fits entirely in the UIImageView. In fact the image view is even stretched over the first couple of rows of the table view's body.
How can I get around this issue?
Fixed by checking "Clip Subviews" in IB.
try play with [UIView setContentMode:]

Resources