Create Circle Image View IOS issue

Question

I want to create a Circle image view for my profile avatar. I have tried this:-

   class CircleImageView: UIImageView {

    override func draw(_ rect: CGRect) {
        // Drawing code

        layer.masksToBounds = true
        layer.cornerRadius = min(rect.width/2 , rect.height/2)
        clipsToBounds = true


    }
}

But its not working.

Try placing a breakpoint in the layer.masksToBounds line and check the size and height of the rect. — JPetric, Dec 13 '16 at 07:32
And add borderWidth borderColor properties to get a visual representation of resulted view. — Vladimir Vodolazkiy, Dec 13 '16 at 07:39
make sure your "rect" size is a square, i.e. width and height should be same — , Dec 13 '16 at 07:40
try this ..`yourImageView?.layer.cornerRadius = 0.5 * (yourImageView?.bounds.size.width)!` — vaibhav, Dec 13 '16 at 07:58
@Avinash kumawat - First make sure your image frame should be square i.e.width and height should be same and then replace min(rect.width/2 , rect.height/2) with rect.frame.size.height/2 Hope it will work — Devendra Agnihotri, Dec 13 '16 at 08:41

Bhavin Ramani · Answer 1 · 2016-12-13T07:55:24.573

1

An extension will be great to set corner or do round image:

extension UIImageView {
    func setRadius(radius: CGFloat? = nil) {
        self.layer.cornerRadius = radius ?? self.frame.width / 2;
        self.layer.masksToBounds = true;
    }
}

Use:

imgview.setRadius(radius: 10)
imgview.setRadius() //default frame.width/2

edited Dec 13 '16 at 07:55

answered Dec 13 '16 at 07:42

Bhavin Ramani

3,221
5
30
41

It is not wrong at all to extend the UIImageView, but the main purpose of subclassing UIImageView is to let setRadius() works automatically when creating a new instance with any extra method calling – Ahmad F Dec 13 '16 at 08:18

score 1 · Answer 2 · edited Dec 13 '16 at 07:56

1

Draw function is for drawing not changing layer.

Use layoutSubviews

override func layoutSubviews() {
    super.layoutSubviews()

        layer.masksToBounds = true
        layer.cornerRadius = min(self.frame.width/2 , self.frame.height/2)
        clipsToBounds = true

}

edited Dec 13 '16 at 07:56

Avinash kumawat

475
6
18

answered Dec 13 '16 at 07:42

Mohammadalijf

1,387
9
19

viewDidLayoutSubviews() is a UIViewController method but not a UIView. – Ahmad F Dec 13 '16 at 07:46
@AhmadF tnx i fixed the answer – Mohammadalijf Dec 13 '16 at 07:49
Np, it is not fixed yet :) I highly recommend to test your answer on a playground before you even post it. – Ahmad F Dec 13 '16 at 07:49
how so @AhmadF . changed viewDidLayoutSubviews to layoutSubviews :-? – Mohammadalijf Dec 13 '16 at 07:51

score 1 · Answer 3 · edited May 23 '17 at 11:53

You are adding the code in the wrong place, drawRect: is not really the right method to do such a functionality for editing the layer, you can achive this by:

Editing the layer when init(frame:) the imageView (also, adding the same functionality in init(coder:) because it should work for both approaches: programmatically and via storyboard):

class CircleImageView: UIImageView {
    override init(frame: CGRect) {
        super.init(frame: frame)

        setupCircleLayer()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        setupCircleLayer()
    }

    private func setupCircleLayer() {
        layer.masksToBounds = true
        layer.cornerRadius = min(frame.width/2 , frame.height/2)
        clipsToBounds = true
    }
}

Or as @Mohammadalijf suggested in his answer by overriding layoutSubviews() method:

class CircleImageView: UIImageView {
    override func layoutSubviews() {
        super.layoutSubviews()

        layer.masksToBounds = true
        layer.cornerRadius = min(frame.width/2 , frame.height/2)
        clipsToBounds = true
        backgroundColor = UIColor.black
    }
}

It does the desired fucntionality that you are asking for, but note that:

Subclasses can override this method as needed to perform more precise layout of their subviews. You should override this method only if the autoresizing and constraint-based behaviors of the subviews do not offer the behavior you want. You can use your implementation to set the frame rectangles of your subviews directly.

i.e, it is related to updating the layout of the view, check the documentation for more information; That's why I prefer to do it in the init methods.

In init function autolayout didnt layout the view so the width of the frame will be 0 if created in storyboard. But works fine if you init the view programmatically with frame — Mohammadalijf, Dec 13 '16 at 08:19
@Mohammadalijf my bad :) I forgot about this point, now it should work fine, thanks for the comment — Ahmad F, Dec 13 '16 at 08:32

Create Circle Image View IOS issue

3 Answers3