Feldur Feldur -5 years ago 275
iOS Question

UIImage position shifting in UIImageView

I have a UIImageView in a storyboard, into which I store UIImages from one of two sources - I either load the image from the net or from the local asset catalog. In all cases, by examination, the images are 48x48; the image view happens to be 50x50. With the exception of the code that fetches the image (either via Alamofire+AlamofireImage or UIImage:named), the rest of the code is identical. The images when loaded are, by examination in lldb, 48x48 for both sources.

The behavior I see is that the images loaded from the net are displayed properly centered in the image view. Those loaded from the asset catalog, however, are shifted over to the right, and are so shifted regardless of the content mode I set on the image view (I tried them all). The entire local image is shifted over such that the left edge is not aligned to the left edge of the image view - it's roughly at the center. As an experiment, I captured one of the net images and stored it in the catalog; it too was shifted when displayed, leading me to conclude the problem isn't the image itself.

My question is: what could be different in the two cases - between 48x48 images I load from the net versus identical images loaded from the asset catalog - that causes the locally loaded image to be shifted to the right?

This is the code to load from the asset catalog:

image = UIImage(named: iconString)

I also tried this:

image = UIImage(named: iconString)?.imageWithAlignmentRectInsets(UIEdgeInsetsMake(0, 0, 0, 9))

but it made no difference.

The Alamofire/AlamofireImage code is equally simple:

let request = Alamofire.request(.GET, url)
.responseImage { response in completion?(result: response.result.value) }

and, finally, the code to put the image into the UI, common to both paths, is:

cell.imageView?.image = fcsts.first!.icon

The experiment I did capturing the file and trying it from the asset catalog convinces me the file contents aren't the problem (although I'd be willing to be shown wrong!) - something is causing the locally-loaded image to be offset in the view.

The application is for iPhone. I'm testing on the latest Xcode/iOS; the app is in Swift.

Answer Source

The problem turns out to be a function of automatic layout being done by the table view cell, as discussed here. I have explicitly set the icon's view size in my storyboard to be 50x50, so this override in the table cell class fixed the problem for me:

override func layoutSubviews() {
    if let rect = self.imageView?.frame {
        var newRect = rect
        newRect.origin = CGPointMake((50-rect.size.width)/2, (50-rect.size.height)/2)
        self.imageView!.frame = newRect

I have no explanation for why copying the image off the network to a local file causes it to be subject to the repositioning, nor for why the errant positioning is only in the horizontal direction even though all the sizing involved is symmetric. (Yes, it does work if I only adjust the X position; also adjusting Y is merely paranoia.)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download