How to set imageView in circle like imageContacts in Swift correctly?

Question

I want to show a picture into imageView like the image contact (in a circle) But when I try to show this, the imageView rescale his size and this doesn't show correctly in a circle.

 image.layer.borderWidth=1.0
 image.layer.masksToBounds = false
 image.layer.borderColor = UIColor.whiteColor().CGColor
 image.layer.cornerRadius = image.frame.size.height/2
 image.clipsToBounds = true

I want to show like this: enter image description here

But I get this: enter image description here

How can do the image resize to UIImageView size to show as a circle?

Thanks!

here is solution for case the imageview had Width different with Height: http://stackoverflow.com/questions/29685055/ios-frame-size-width-2-doesnt-produce-a-circle-on-every-device — lee, Aug 18 '16 at 04:29

score 57 · Answer 1 · edited Jan 12 '18 at 11:03

57

This is solution which I have used in my app:

var image: UIImage = UIImage(named: "imageName")
imageView.layer.borderWidth = 1.0
imageView.layer.masksToBounds = false
imageView.layer.borderColor = UIColor.whiteColor().CGColor
imageView.layer.cornerRadius = image.frame.size.width/2
imageView.clipsToBounds = true

Swift 4.0

let image = UIImage(named: "imageName")
imageView.layer.borderWidth = 1.0
imageView.layer.masksToBounds = false
imageView.layer.borderColor = UIColor.white.cgColor
imageView.layer.cornerRadius = image.frame.size.width / 2
imageView.clipsToBounds = true

edited Jan 12 '18 at 11:03

Eric Aya

69,473
35
181
253

answered May 11 '15 at 11:59

Manu Gupta

1,759
1
14
22

1

Why all answers here so up-voted so much? isn't it a bit stupid to use cornerRadius there is image don't have to be square? – Injectios Nov 09 '17 at 11:08
"Value of type 'UIImage?' has no member 'frame'". Hmmmm. – Chris Neve Apr 22 '21 at 20:26

score 46 · Accepted Answer · answered Aug 31 '14 at 01:29

46

What frame size are you using for image? I can get a perfect circle if I set the frame to be a square.

let image = UIImageView(frame: CGRectMake(0, 0, 100, 100))

answered Aug 31 '14 at 01:29

chazkii

1,300
12
21

my image size in the size inspector is set to 120 width and 120 height, yet when I run it, it's not a perfect circle because the width turns out to be a bit longer? Why? – LuKenneth Jan 21 '16 at 19:08
1

If the frame is a square, setting the radius to half the width/height will always give you a circular view. If one is creating a custom class that might accomadate various squared frame sizes, one mustn't hardcode the radius value. – Feb 27 '16 at 06:44
This is actually the only correct answer, if you don't set your imageView to square none of other answers will work. – bojan May 20 '20 at 19:25
"'CGRectMake' is unavailable in Swift". – Chris Neve Apr 22 '21 at 20:35

fatihyildizhan · Answer 3 · 2017-06-09T12:16:15.257

21

Fast and Simple solution.

How to mask UIImage to Circle without cropping with Swift.

extension UIImageView {
  public func maskCircle(anyImage: UIImage) {
    self.contentMode = UIViewContentMode.ScaleAspectFill
    self.layer.cornerRadius = self.frame.height / 2
    self.layer.masksToBounds = false
    self.clipsToBounds = true

   // make square(* must to make circle), 
   // resize(reduce the kilobyte) and 
   // fix rotation.
   self.image = anyImage
  }
}

How to call:

let anyAvatarImage:UIImage = UIImage(named: "avatar")!
avatarImageView.maskCircle(anyAvatarImage)

edited Jun 09 '17 at 12:16

answered Mar 19 '16 at 14:23

fatihyildizhan

8,614
7
64
88

1

I cannot find `prepareImage()` method. Has it been changed? – Antonio Apr 22 '17 at 23:18
@Antonio that is his custom func... you just use self.image = anyImage – Boris Nikolic Jun 08 '17 at 11:56
I removed extra function. Thank you @BorisNikolić – fatihyildizhan Jun 09 '17 at 12:17

Jaywant Khedkar · Answer 4 · 2018-08-10T11:13:57.820

Try this it's work for me ,

set imageView width and height same .

Swift

imageview?.layer.cornerRadius = (imageview?.frame.size.width ?? 0.0) / 2     
imageview?.clipsToBounds = true
imageview?.layer.borderWidth = 3.0
imageview?.layer.borderColor = UIColor.white.cgColor

Screenshot

Objective C

self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
self.imageView.clipsToBounds = YES;
self.imageView.layer.borderWidth = 3.0f;
self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;

Hope this will help to some one .

score 9 · Answer 5 · answered Jul 16 '17 at 08:03

Create your custom circle UIImageView and create the circle under the layoutSubviews helps if you use Autolayout.

/*
      +-------------+
      |             |
      |             |
      |             |
      |             |
      |             |
      |             |
      +-------------+
  The IMAGE MUST BE SQUARE
*/
class roundImageView: UIImageView {

    override init(frame: CGRect) {
        // 1. setup any properties here
        // 2. call super.init(frame:)
        super.init(frame: frame)
        // 3. Setup view from .xib file
    }

    required init?(coder aDecoder: NSCoder) {
        // 1. setup any properties here
        // 2. call super.init(coder:)
        super.init(coder: aDecoder)
        // 3. Setup view from .xib file
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.borderWidth = 1
        self.layer.masksToBounds = false
        self.layer.borderColor = UIColor.white.cgColor
        self.layer.cornerRadius = self.frame.size.width/2
        self.clipsToBounds = true
    }
}

score 8 · Answer 6 · answered Feb 11 '16 at 21:46

I would suggest making your image file a perfect square to begin with. This can be done in almost any photo editing program. After that, this should work within viewDidLoad. Credit to this video

image.layer.cornerRadius = image.frame.size.width/2
image.clipsToBounds = true

Codetard · Answer 7 · 2020-02-05T05:42:59.020

7

That is all you need....

        profilepic = UIImageView(frame: CGRectMake(0, 0, self.view.bounds.width * 0.19 , self.view.bounds.height * 0.1))
        profilepic.layer.borderWidth = 1
        profilepic.layer.masksToBounds = false
        profilepic.layer.borderColor = UIColor.blackColor().CGColor
        profilepic.layer.cornerRadius = profilepic.frame.height/2
        profilepic.clipsToBounds = true

edited Feb 05 '20 at 05:42

answered Jun 03 '15 at 05:37

Codetard

2,441
28
34

Do you need to import ```quartzcore``` for this? – Supertecnoboff Oct 23 '15 at 13:19
@Supertecnoboff nope.! – Codetard Nov 18 '15 at 18:43

Lance Samaria · Answer 8 · 2019-09-21T15:43:11.720

If your using a UIViewController here's how do do it using Anchors. The key is to set the imageView's layer.cornerRadius in viewWillLayoutSubviews like so:

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
}

Also make sure the heightAnchor and widthAnchor are the same size. They are both 100 in my example below

Code:

let imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.layer.borderWidth = 1.0
    imageView.clipsToBounds = true
    imageView.layer.borderColor = UIColor.white.cgColor
    return imageView
}()


override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(imageView)

    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 50).isActive = true

    imageView.image = UIImage(named: "pizzaImage")
}

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
}

If your using a CollectionView Cell set the imageView's layer.cornerRadius in layoutSubviews():

override init(frame: CGRect) {
    super.init(frame: frame)

    addSubview(imageView)

    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 50).isActive = true

    imageView.image = UIImage(named: "pizzaImage")

}

override func layoutSubviews() {
    super.layoutSubviews() // call super.layoutSubviews()
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
}

adding the corner radius code to `viewWillLayoutSubviews` worked for me to make my ImageView a perfect circle — Anna Harrison, Sep 21 '19 at 15:36
adding corner radius to viewWillLayoutSubviews when imageview is anchor through the storyboard worked for me for all devices, I had an issue when it worked for iPhone X or greater but did not work for iPhone 8. Thanks — clopex, Feb 24 '21 at 14:44

score 5 · Answer 9 · answered Mar 29 '19 at 14:29

this extension really works for me (including in swift 4+)

extension UIImageView {
    func roundedImage() {
        self.layer.cornerRadius = (self.frame.size.width) / 2;
        self.clipsToBounds = true
        self.layer.borderWidth = 3.0
        self.layer.borderColor = UIColor.white.cgColor
    }
}

Then simply call it as

imageView.roundedImage()

Sai kumar Reddy · Answer 10 · 2017-08-22T05:53:34.560

3

reviewerImage.layer.cornerRadius = reviewerImage.frame.size.width / 2;
reviewerImage.clipsToBounds = true

edited Aug 22 '17 at 05:53

answered Mar 25 '17 at 14:05

Sai kumar Reddy

1,751
20
23

Umair Afzal · Answer 11 · 2016-05-26T05:44:55.557

2

what i found out is that your width and height of image view must return an even number when divided by 2 to get a perfect circle e.g

let image = UIImageView(frame: CGRectMake(0, 0, 120, 120))

it should not be something like let image = UIImageView(frame: CGRectMake(0, 0, 130, 130))

edited May 26 '16 at 05:44

answered May 13 '16 at 11:15

Umair Afzal

4,947
5
25
50

score 2 · Answer 12 · answered Jun 24 '17 at 21:40

2

I had a similar result (more of an oval than a circle). It turned out that the constraints I set on the UIImageView forced it into an oval instead of a circle. After fixing that, the above solutions worked.

answered Jun 24 '17 at 21:40

cph2117

2,651
1
28
41

score 2 · Answer 13 · answered Oct 10 '17 at 14:48

try this. swift code

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(true)
    perform(#selector(self.setCircleForImage(_:)), with: pickedImage, afterDelay: 0)
}


 @objc func setCircleForImage(_ imageView : UIImageView){
    imageView.layer.cornerRadius = pickedImage.frame.size.width/2
    imageView.clipsToBounds = true
}

score 1 · Answer 14 · answered Apr 08 '16 at 00:26

1

I fixed it doing modifying the view:

Go to your Main.storyboard
Click on your image
View -> Mode -> Aspect Fill

It works perfectly

answered Apr 08 '16 at 00:26

Nicolas2bert

1,142
7
10

score 1 · Answer 15 · answered Apr 11 '16 at 10:58

This work perfectly for me. The order of lines is important

func circularImage(photoImageView: UIImageView?)
{
    photoImageView!.layer.frame = CGRectInset(photoImageView!.layer.frame, 0, 0)
    photoImageView!.layer.borderColor = UIColor.grayColor().CGColor
    photoImageView!.layer.cornerRadius = photoImageView!.frame.height/2
    photoImageView!.layer.masksToBounds = false
    photoImageView!.clipsToBounds = true
    photoImageView!.layer.borderWidth = 0.5
    photoImageView!.contentMode = UIViewContentMode.ScaleAspectFill
}

How to use:

    @IBOutlet weak var photoImageView: UIImageView!
    ...
    ...
    circularImage(photoImageView)

handiansom · Answer 16 · 2017-03-28T16:10:01.290

This also works for me. For perfect circle result, use the same size for width and height. like image.frame = CGRect(0,0,200, 200)

For non perfect circle, width and height should not be equal like this codes below.

 image.frame = CGRect(0,0,200, 160)
 image.layer.borderColor = UIColor.whiteColor().CGColor
 image.layer.cornerRadius = image.frame.size.height/2
 image.layer.masksToBounds = false
 image.layer.clipsToBounds = true
 image.contentMode = .scaleAspectFill

score 1 · Answer 17 · answered Jan 31 '18 at 09:32

1

Use this code to make image round

     self.layoutIfNeeded()
     self.imageView.layer.cornerRadius = 
     self.imageView.frame.width/2
     self.imageView.layer.masksToBounds = true

answered Jan 31 '18 at 09:32

Nithinbemitk

2,710
4
24
27

HafizAnser · Answer 18 · 2022-08-31T22:53:34.667

1

You need to make sure the height and width should be the same as your image/view.

Like an image with 100 widths and 100 height sizes (100 X 100). If the sizes are different then the circle does not look like a circle.

edited Aug 31 '22 at 22:53

answered Feb 17 '20 at 22:37

HafizAnser

553
6
10

score 1 · Answer 19 · edited Dec 21 '20 at 06:06

// MARK: ImageView extension to make rounded   
@IBDesignable extension UIImageView {

    @IBInspectable var masksToBounds: Bool {
        set {
            layer.masksToBounds = newValue
        }
        get {
            return layer.masksToBounds
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    
    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
        }
        get {
            return layer.cornerRadius
        }
    }
    
    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

score 1 · Answer 20 · answered Oct 13 '20 at 18:56

You can add this file extension to your project & Don't forget to make your image Square "Width = Height" and you can grantee it by giving the image width and Aspect Ratio (1:1)

import Foundation
import UIKit


extension UIView {
    @IBInspectable
    var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
    
    @IBInspectable
    var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }
    
    @IBInspectable
    var borderColor: UIColor? {
        get {
            let color = UIColor(cgColor: layer.borderColor!)
            return color
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
    
}

Then you will write this line in the cell or view controller or wherever you use your image:

imageViewCountryImage.cornerRadius = imageViewCountryImage.frame.height / 2

and you will find your image very super circular

score 0 · Answer 21 · answered Dec 20 '20 at 21:22

You can add this extension to your code

import Foundation
import UIKit


extension UIView {
    @IBInspectable
    var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
    
    @IBInspectable
    var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }
    
    @IBInspectable
    var borderColor: UIColor? {
        get {
            let color = UIColor(cgColor: layer.borderColor!)
            return color
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
    
}

score 0 · Answer 22 · answered Dec 29 '21 at 07:09

Just add this extension
Extension:

extension UIImageView { 

    func circleImageView() {
       layer.borderColor = UIColor.white.cgColor
       layer.borderWidth = 2
       contentMode = .scaleAspectFill
       layer.cornerRadius = self.frame.height / 2
       layer.masksToBounds = false
       clipsToBounds = true
    }
}

Controller:

self.imageView?.circleImageView()

One more thing, in order to make the image circle we've to set both width and height equal to each other.

score 0 · Answer 23 · answered Aug 31 '22 at 12:10

0

Make sure that your height and width of your UIImageView is equal, or else it will look elliptical.

answered Aug 31 '22 at 12:10

EAO123

55
9

score 0 · Answer 24 · answered Dec 12 '22 at 18:57

I have solved this problem with using these codes

private let profileAvatarImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.clipsToBounds = true
        imageView.layer.masksToBounds = true
        imageView.layer.cornerRadius = imageView.frame.width/2
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.image = UIImage(systemName: "person")
        imageView.backgroundColor = .black
        imageView.layer.borderWidth = 2.0
        imageView.layer.borderColor = UIColor.black.cgColor
        return imageView
    }()

How to set imageView in circle like imageContacts in Swift correctly?

24 Answers24

Linked

Related