Round corners on UIImageView work. But I don't get a circle

Question

I'm trying to apply round corners to an UIImageView. Although the corners are round, there are still 4 edges, which simply won't go away no matter the size of the radius. Removing the border also doesn't help.

Could this have something to do with auto layout constraints? What am I doing wrong?

Here's the code I'm applying:

self.imageViewProfilePicture.layer.cornerRadius = self.imageViewProfilePicture.frame.size.width / 2.0
self.imageViewProfilePicture.layer.borderWidth = 2.0
self.imageViewProfilePicture.layer.borderColor = UIColor.whiteColor().CGColor
self.imageViewProfilePicture.layer.masksToBounds = true
self.imageViewProfilePicture.clipsToBounds = true

Link to the image

Where are you calling this code? Inside which method? Do you use constraints to set the size? Is its width equals to its height? — Gustavo Barbosa, Dec 10 '14 at 19:25
The picture you've linked to doesn't seem to have anything to do with this question. Are you confusing the image view with the image???? They are very different things. — matt, Dec 10 '14 at 19:30
@GustavoBarbosa This code is applied in viewDidLoad(). Yes, constraints are set in the Storyboard. Yes, it's width is equal to it's height. — ezcoding, Dec 10 '14 at 19:52
@matt The picture in the link shows the borders I've applied. Inside is should be the picture (which I've removed for this post). I'm not confusing the image with the image view and I know they are very different things. — ezcoding, Dec 10 '14 at 19:54
@DuZi Its seems like it is getting the wrong value before setting the cornerRadius. Can you inspect its value at that line? — Gustavo Barbosa, Dec 10 '14 at 19:58
@Unheilig I did. There is a link to the image under the code. You can see how the borders have edges — ezcoding, Dec 10 '14 at 20:04
@GustavoBarbosa You are right! Although I set constraints for the height and the width and they both have the same value, the uiimageview's frame is totally different. — ezcoding, Dec 10 '14 at 20:08
What is the dimensions of `imageViewProfilePicture.frame`? Is it squared? — Unheilig, Dec 10 '14 at 20:12
Still I don't understand why I was down voted??? I think it's a totally legitimate question to ask, if the auto layout constraints could have anything to do with my problem. — ezcoding, Dec 10 '14 at 20:13
@Unheilig I thought that it was, since I've applied constraints setting the uiimageview's height and width to the same value. Apparently the values do not apply directly to the frame's width and height value -> the width and height value of the frame were not the same — ezcoding, Dec 10 '14 at 20:15
The constraints will be applied after the view's layout. In your case, probably if you move your code to `viewDidLayoutSubviews`, the result will be what you expect. — Gustavo Barbosa, Dec 10 '14 at 20:18
@GustavoBarbosa Thanks a lot mate! Learned something valuable! Post your answer to that I can accept it :) — ezcoding, Dec 10 '14 at 20:28

score 8 · Accepted Answer · answered Dec 10 '14 at 20:33

8

As you are using constraints to define your imageView's width and height, the final frame will be defined after the layout of the subviews. In your case, just move your code to viewDidLayoutSubviews:

- (void)viewDidLayoutSubviews
{
    super.viewDidLayoutSubviews()

    self.imageViewProfilePicture.layer.cornerRadius = self.imageViewProfilePicture.frame.size.width / 2.0
    self.imageViewProfilePicture.layer.borderWidth = 2.0
    self.imageViewProfilePicture.layer.borderColor = UIColor.whiteColor().CGColor
    self.imageViewProfilePicture.layer.masksToBounds = true
    self.imageViewProfilePicture.clipsToBounds = true
}

answered Dec 10 '14 at 20:33

Gustavo Barbosa

1,340
1
17
27

2

You're so damn right!!! But really, where you've got this from?? Is there any book which explains all this stuff in a proper way? I just mean, im programming for some months iOS but i think i don't have some (underestimated...) basic understandings, like when actually something is really drawn or not. Trying to put this in viewwillappear method for example doesnt work, although i thought that the momemt before appearing all should have been set (autolayout, frames, and so on), sothat a "redraw" should have been done?!?! – S. Birklin Feb 27 '16 at 21:13

score 0 · Answer 2 · answered Dec 10 '14 at 19:20

0

Try setting your borderWidth to 0.

answered Dec 10 '14 at 19:20

Sandy Chapman

11,133
3
58
67

The edges stay even without the borders – ezcoding Dec 10 '14 at 19:23

Round corners on UIImageView work. But I don't get a circle

2 Answers2