Jake T. Jake T. - 2 months ago 13
iOS Question

Inexplicable behavior using CALayer to make button round

I've been using the CALayer of a button to create a round button for a profile image.

I deleted a background image and instead applied a gradient directly to the background of the view of the ViewController that this profile picture sits in, and for some reason my profile image disappeared! Here is the code that I am using to make the button round:

//NSLog(@"Building round layer. proflieImageButton width is: %f", _profileImageButton.imageView.frame.size.width);
CALayer *imageLayer = _profileImageButton.layer;
[imageLayer setCornerRadius:_profileImageButton.frame.size.width/2];
[imageLayer setBorderWidth:1];
[imageLayer setBorderColor:[[UIColor colorWithRed:195.0 green:195.0 blue:195.0 alpha:1.0] CGColor]];
[imageLayer setMasksToBounds:YES];


I did not touch this code, but when I ran it, my background of the VC was set properly but my button was gone. I could still tap the space it was supposed to be in to go to the profile screen, and it was properly sized judging by taping from the edge of the screen to find where the hit box is.

I tried using
[_profileImageButton setClipsToBounds:YES]
as well but that led to the same result. I commented out the
setMasksToBounds
call, and the image was there, correctly positioned and sized, but not rounded of course.

So, I added that commented out NSLog. However, first I had it printing
_profileImageButton.frame.size.width
. When I did that, I got 1000.0, though the profile image was still gone.

Then, I decided to see if the size of the frame on the button and the imageView on the button are the same, so I set it to what you see above, though not commented out... the size is 0, but, the profile button appears as expected, round and properly sized!

Commenting out that NSLog reverses this. I have no idea what's causing it, or why it stopped working in the first place, but could anybody explain what may be going on so I can ensure it's not something that could potentially break within my code?

Now, that's not the end of things.

When you push the button, you go to the Profile View Controller. On this VC, I also display the profile Image in a similar fashion, except that it is just a UIImageView instead of wrapped into a button. When the profile button from the menu broke, it also broke the profile image within the profile. This one, since it doesn't have a separate imageView, is not working this same way. I can't get it to appear at all.

Here is the very similar code snipper I have on that View Controller, which used to work when I removed the background image of the menu, but no longer will.

NSLog(@"Building round layer. profileImageView width is: %f", _profileImageView.frame.size.width);
//Make the Profile Image round
CALayer *imageLayer = _profileImageView.layer;
[imageLayer setCornerRadius:_profileImageView.frame.size.width/2];
[imageLayer setBorderWidth:1];
[imageLayer setBorderColor:[[UIColor colorWithRed:195.0 green:195.0 blue:195.0 alpha:1.0] CGColor]];
[imageLayer setMasksToBounds:YES];


Any idea what's going on at all?

Answer

In viewDidLoad method your views has not correct sizes. Remove your code into viewDidLayoutSubviews. It should help.