clipsToBounds causes UIImage to not display in iOS

问题:

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.

回答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

回答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.

回答3:

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.

回答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

回答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()

回答6:

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().

回答7:

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

回答8:

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

回答9:

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;}

回答10:

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