clipsToBounds causes UIImage to not display in iOS

Question

I switched my project over to new beta versions of iOS 10 and XCode 8. In all three areas of my app where I use:

imageView.layer.cornerRadius = imageView.frame.size.width/2
imageView.clipsToBounds = true

The associated images are not displaying at all. I have attempted cleaning the project as well as the build folder, restarting the device, trying on various simulators, re-adding the imageView, programmatically setting the associated UIImage instead of choosing one from the assets.

Removing the clipsToBounds line shows the rectangular image regardless of whether masksToBounds is true or false. How can I make a circular image in XCode8 / iOS10 ?

Edit: The project is Swift 2.x and not yet updated to Swift 3.0 syntax.

Answer 1

I had the same problem and calling layoutIfNeeded before all the rounded corner / clipsToBounds stuff fixed the issue. iOS 10 GM with xcode 8 GM causes views to disappear due to roundedCorners & clipsToBounds

Answer 2

This problem also happened to me.

I moved these code imageView.layer.cornerRadius = imageView.frame.size.width/2 from - (void)awakeFromNib to - (void)drawRect:(CGRect)rect and this problem went away.

My imageView is sized by autolayout. I think that height and width are not decided when awaking from nib on iOS 10.

Answer 3

Using obj-c, moving the syntax from viewDidLoad to viewDidLayoutSubviews worked for me.

Answer 4

I had the same problem. Not showing on the phone, but perfect on Storyboard and UI debugger. It was also working when I was putting the project "Opens with Xcode 7" instead of 8 but wasn't a satisfying solution. So I digged and found out the problem. The trouble was with a class looking like this :

@IBDesignable public class MyButton: UIButton {

   @IBInspectable var styleName: String = "" {
        didSet {
            switch styleName {
            case "RoundedLight":
                tintColor = UIColor.lightPinkColor()
                layer.borderColor = UIColor.whiteColor().CGColor
                layer.borderWidth = 1
                layer.masksToBounds = true
            default:
                break
            }
        }
    }

    override public func layoutSubviews() {
        super.layoutSubviews()

        switch styleName {
            case "RoundedLight":
                layer.cornerRadius = frame.height / 2
            default:
                break
        }
    }
}

I changed it to this and it works now :

@IBDesignable public class MyButton: UIButton {

   @IBInspectable var styleName: String = "" {
        didSet {
            layoutIfNeeded()
        }
    }

    override public func layoutSubviews() {
        super.layoutSubviews()

        switch styleName {
        case "RoundedLight":
            tintColor = UIColor.lightPinkColor()
            layer.borderColor = UIColor.whiteColor().CGColor
            layer.borderWidth = 1
            layer.cornerRadius = frame.height / 2
            layer.masksToBounds = true
        default:
            break
        }
    }
}

Note that none of the above worked for me, and I mean :

• Calling layoutIfNeeded in the layoutSubviews()
• Calling layoutIfNeeded in the awakeFromNib of my button (or my cell containing the button)
• Calling layoutIfNeeded in the layoutSubview of my cell
• Calling contentView.layoutIfNeeded() in the awakeFromNib of my cell
• Calling view.layoutIfNeeded() in my view controller

Answer 5

I had ImageView that is fully circular in shape. Below is code :

//MARK:- Misc functions
func setProfileImage() {
    imgProfile.layer.masksToBounds = false
    imgProfile.layer.cornerRadius = imgProfile.frame.size.height/2
    imgProfile.clipsToBounds = true
    imgProfile.contentMode = UIViewContentMode.ScaleToFill
} 

This works fine in iOS 9. However, in iOS 10 Xcode 8 the ImageView disappears. After debugging found that ClipsToBound is culprit.

So placed the code in viewDidLayoutSubviews() resolved the issue.

override func viewDidLayoutSubviews() {
    setProfileImage()
}

You can also use self.view.layoutIfNeeded()

Answer 6

You should call layoutSubviews() on the main view before call imageView.frame.size.width

[self.view layoutSubviews];
imageView.layer.cornerRadius = imageView.frame.size.width/2
imageView.clipsToBounds = true