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 just implemented corner rounding like this

@implementation RoundImageView

- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        self.layer.masksToBounds = YES;
        self.layer.cornerRadius = MIN(self.bounds.size.height, self.bounds.size.width)/2;
        [self addObserver:self
               forKeyPath:@"bounds"
                  options:NSKeyValueObservingOptionNew
                  context:(__bridge void * _Nullable)(self)];
    }
    return self;
}

-(void)dealloc
{
    [self removeObserver:self
              forKeyPath:@"bounds"
                 context:(__bridge void * _Nullable)(self)];
}

-(void)observeValueForKeyPath:(NSString *)keyPath
                     ofObject:(id)object
                       change:(NSDictionary<NSString *,id> *)change
                      context:(void *)context
{
    if(context == (__bridge void * _Nullable)(self) && object == self && [keyPath isEqualToString:@"bounds"])
    {
        self.layer.cornerRadius = MIN(self.bounds.size.height, self.bounds.size.width)/2;
    }
}

@end

so I always have properly rounded corners. And I hadn't issues on upgrading to iOS10 and XCode8

Answer 2

I think the problem happens because we set the round corner and clip subviews as @Pranoy C said.

I solved the problems by using layoutIfNeeded for the my tableview cell showing a user's profile picture. I want to ensure the image is round corner

Code is as follow: - (void)awakeFromNib { [super awakeFromNib]; [self layoutIfNeeded];

[self.inputIndicator_imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
self.profile_pic_edit_imageView.layer.cornerRadius = self.profile_pic_edit_imageView.frame.size.width/2;
self.profile_pic_edit_imageView.layer.borderWidth = 1.0;
self.profile_pic_edit_imageView.layer.borderColor = GRAY_COLOR_SUPER_LIGHT.CGColor;
self.profile_pic_edit_imageView.clipsToBounds = YES;}

Answer 3

It might be a layout issue. Setting clipToBounds to false would show the image even if its size is zero. Can you print the frame of your images?

If you set the cornerRadius and clipToBounds properties in viewDidLoad, try doing it in viewDidLayoutSubviews().

You could also try to call self.view.layoutIfNeeded().

Answer 4

This sounds like it could be due to a new bug since iOS 10 and Xcode 8 where views are initialised at size 1000x1000 and when trying to set corner radius to half your frame, it is setting it to 500 instead. This is documented further in this question here: Since Xcode 8 and iOS10, views are not sized properly on viewDidLayoutSubviews. My reason for thinking this is the fix to the 1000x1000 issue it to call layout subviews before doing anything that requires sizes for something that has been constructed on the interface builder.