iOS UITableViewCell Image shifts to different size upon didSelectRow?

[grandM]

Hi Guys

I had different sizes for my images who are used in my UITableView. I saw white space was left on the right hand side of certain pictures. I tried the different options in IB as scale to fit etc but the white space did not vanish. So I used a class to resize the images.

Upon loading the tableViewCells my images look fine. I also put them in a queue and everything works fine. Images have the same size. Everything is aligned nicely. The prinln is shown indicating the closure is performed just fine. However when I select a cell the images shift again. The prinln isn't shown, so the closure is not being performed. The image remain aligned though but they shifted.

How can I solve this

code in ViewController:

       // resize image 


        dispatch_async(dispatch_get_global_queue(Int(QOS_CLASS_USER_INITIATED.value), 0)) {

           

            var croppedImage: UIImage?

            if let image = specific.image {

                croppedImage = ImageUtilities.cropToSquare(image: specific.image!)

            }

           

            // fill contents of cell with a specific 

           

            dispatch_async(dispatch_get_main_queue()) {

                // Filling resized image in UITableViewCell

                cell.imageView?.image = croppedImage

                println("executed")

            }

        }

the class ImageUtilities being

class ImageUtilities {

    staticfunc cropToSquare(image originalImage: UIImage) -> UIImage {

        // Create a copy of the image without the imageOrientation property so it is in its native orientation (landscape)

        let contextImage: UIImage = UIImage(CGImage: originalImage.CGImage)!

       

        // Get the size of the contextImage

        let contextSize: CGSize = contextImage.size

       

        let posX: CGFloat

        let posY: CGFloat

        let width: CGFloat

        let height: CGFloat

       

        // Check to see which length is the longest and create the offset based on that length, then set the width and height of our rect

        if contextSize.width > contextSize.height {

            posX = ((contextSize.width - contextSize.height) / 2)

            posY = 0

            width = contextSize.height

            height = contextSize.height

        } else {

            posX = 0

            posY = ((contextSize.height - contextSize.width) / 2)

            width = contextSize.width

            height = contextSize.width

        }

       

        let rect: CGRect = CGRectMake(posX, posY, width, height)

       

        // Create bitmap image from context using the rect

        let imageRef: CGImageRef = CGImageCreateWithImageInRect(contextImage.CGImage, rect)

       

        // Create a new image based on the imageRef and rotate back to the original orientation

        let image: UIImage = UIImage(CGImage: imageRef, scale: originalImage.scale, orientation: originalImage.imageOrientation)!

       

        return image

    }

}

Once again: thank you very much!

 

[1458279]

It sounds like tableview is grabbing two different images, the original and the resized one.

When you 'didSelectRow' is fired, do you resize the image there as well?

My guess is that the system works such that it re-grabs the original image when it gets to the 'didSelectRow' method. You could test this by displaying the size of the image and comparing it to the resized one.

I'm not suggesting this would be the best work-around, but it should at least work. Simply resize the image every time the 'didSelectRow' is fired.

 

[grandM]

It sounds like tableview is grabbing two different images, the original and the resized one.

When you 'didSelectRow' is fired, do you resize the image there as well?

My guess is that the system works such that it re-grabs the original image when it gets to the 'didSelectRow' method. You could test this by displaying the size of the image and comparing it to the resized one.

I'm not suggesting this would be the best work-around, but it should at least work. Simply resize the image every time the 'didSelectRow' is fired.

I'm considering to resize all images before they are put into the system. This way I can give all images the same size and I guess the shifting would stop?

 

[1458279]

That sounds like a solution. Give it a try and report back what happens. IDK if your project required different images at different times from different sources, but if you have control over all the images, that should work.