Make UIImage fit into UIImageView inside UIView

7
votes

I'm having a lot of trouble getting images to fit, with the correct aspect ratio within their UIImageView.

All images inserted initially from a plist into core data do fit with the right aspect ratio, but as images are added using the app (from the existing library of images), the images in two of three views appear larger than the view itself - so that just the top left corner of the photo is shown. In the screenshot below, the top row of the table shows an image added via the plist and the next two rows (MY RECORDS) show photos that are not confined to the view.

enter image description here

The cells in the above view are created in the usual way, and then configured in its own method, where it's properties are defined.

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
    let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
    self.configureCell(cell, indexPath: indexPath)
    return cell
}

    func configureCell(cell: UITableViewCell, indexPath: NSIndexPath)
{
    let record = fetchedResultsController.objectAtIndexPath(indexPath) as! Record
    cell.textLabel!.text = record.subject
    cell.detailTextLabel!.text = record.shortDetails

    if let imageArray = imagesForRecord(record)
    {
        if imageArray.count > 0
        {
            cell.imageView?.contentMode = .ScaleAspectFit
            cell.imageView?.clipsToBounds = true
            cell.imageView?.image = imageArray[Int(record.featureImageIndex)]
        }
    }
}

But the image does not scale, nor is it clipped within the bounds of the imageView. The images that were initially loaded, like the bear, did not require contentMode or clipsToBounds to be set.

I have the same issue in a different view controller (call it VC2), but this view is defined using storyboard. I've an UIImage view that is constrained to all sides of a UIView that has fixed size constraints. The UIImage view is set to Aspect Fit, but when I set an image from the devices library it appears like the pictures above - the aspect ratio is correct, but only the top corner of the image is shown.

enter image description here

enter image description here

In yet another view, I have almost the same storyboard layout as VC2, but here it works as expected. I cannot see any difference in the constraints, properties, and the same photos are being used (from the library).

enter image description here

enter image description here

I can't see any differences, and I can't imagine how to debug from here. No doubt I am misunderstanding something quite simple about Aspect Fit or how to apply it.

4
swiftuitableviewuiimageview
Are you sure you're settings .contentMode and .clipsToBounds on the right imageView? UITableViewCell has a imageView property by default that is used to display basic cells. Also, in what function are you calling those two ? – Mercurial
In the storyboard, the cell's identifier is 'Cell', which is then used in the tableView.cellForRowAtIndexPath delegate method to instantiate cell with tableView.dequeueReusableCellWithIdentifier. This cell is then passed to a configureCell method where the contentMode and clipsToBounds are added (along with text and image) before being returned by the delegate method. – DrWhat
use .UIViewContentMode.ScaleAspectFill. you cant resize the image as what you are expecting now. i.e take whatsapp , they have the same problem what you are facing. so they simply stick with .ScaleAspectFill for all the images. – karthik
Show the code where you set the image and the content mode - all of it – Wain
Can you please add code of your cellForRowAtIndexPath and configureCell method. – Nirav D

4 Answers

1
votes

The issue is if you use the default imageView that it doesn't contain any constraints. When you load bigger image it will display full size.

Two solutions:

  • Create a cell model, insert your imageView, and give it constraints in the storyboard.
  • Check the constraints that you added to the default imageView.

For example:

let horizontalConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
newView.translatesAutoresizingMaskIntoConstraints = false
cellView.addConstraint(horizontalConstraint)
0
votes

Try to add this cell.imageView?.layer.masksToBounds = true. It can help you

    cell.imageView?.contentMode = .ScaleAspectFit
    cell.imageView?.clipsToBounds = false
    cell.imageView?.layer.masksToBounds = true
    cell.imageView?.image = imageArray[Int(record.featureImageIndex)]
0
votes

  • Create a custom cell with the design that you require.

  • Make the constraints in left top and bottom and set the width for the UIImageview.

  • Add the Custom Xib with the TableView.

i hope this will Help you...

0
votes

Maybe add something like this: 

class func imageWithImage(image: UIImage, scaledToSize newSize: CGSize) -> UIImage {
    //UIGraphicsBeginImageContext(newSize);
    UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)
    image.drawInRect(CGRectMake(0, 0, newSize.width, newSize.height))
    var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return newImage
}