How to set image in circle in swift

Question

How can i make i circle picture with swift ?

My ViewController :

import UIKit
import Foundation

class FriendsViewController : UIViewController{

    @IBOutlet weak var profilPicture: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))
    }
}

My profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100)) do nothing ..

Exemple: http://www.appcoda.com/ios-programming-circular-image-calayer/

Prebo

What does "set image in circle" mean? Can you describe more precisely what you want to do? Perhaps draw a picture of the results you want? – Drool

profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100)) does not "do nothing". It definitely does something! But what it does is rather unfortunate. It creates a UIImageView and assigns it to a weak reference. The image view is empty; it has no image. Moreover, the reference is weak, so the image view vanishes immediately in a puff of smoke. It's hard to see from this code what you imagined would happen here. – Drool

I want to make this result : appcoda.com/ios-programming-circular-image-calayer – Prebo

So, now you've added a link to a tutorial that tells you how to do it. So just follow the instructions in that tutorial! You've answered your own question. – Drool

I work in swift when i do the instructions in the tutoriel nothing append :S – Prebo

Answer 1

import UIKit

class ViewController: UIViewController {
  @IBOutlet weak var image: UIImageView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    image.layer.borderWidth = 1
    image.layer.masksToBounds = false
    image.layer.borderColor = UIColor.black.cgColor
    image.layer.cornerRadius = image.frame.height/2
    image.clipsToBounds = true
}

If you want it on an extension

import UIKit

extension UIImageView {
    
    func makeRounded() {
        
        layer.borderWidth = 1
        layer.masksToBounds = false
        layer.borderColor = UIColor.black.cgColor
        layer.cornerRadius = self.frame.height / 2
        clipsToBounds = true
    }
}

That is all you need....

Term

that image.clipsToBounds = true was exactly what I needed :-) – Beavers

It doesn't work if UIImageView can grow or shrink due to constrains. In that case it must be inside viewDidLayoutSubviews() – Malka

I found that adding the border around the rounded image leaves a ghost of the original rectangle on the screen. This was visible on Simulator 10.0 and may not occur on a real device, but thought it was significant enough to mention here. – Phalangeal

image.layer.borderColor = UIColor.blackColor().CGColor turns into image.layer.borderColor = UIColor.black.cgColor – Shame

Work perfect in swift 4. 👍🏻 – Zomba

You may need to use DispatchQueue: DispatchQueue.main.async(execute:{ self.imageview.makeRounded() }) – Peccary

Answer 2

You can simple create extension:

import UIKit

extension UIImageView {

   func setRounded() {
      let radius = CGRectGetWidth(self.frame) / 2
      self.layer.cornerRadius = radius
      self.layer.masksToBounds = true
   }
}

and use it as below:

imageView.setRounded()

Decasyllable

Answer 3

Based in the answer of @DanielQ

Swift 4 and Swift 3

import UIKit

extension UIImageView {

    func setRounded() {
        self.layer.cornerRadius = (self.frame.width / 2) //instead of let radius = CGRectGetWidth(self.frame) / 2
        self.layer.masksToBounds = true
    }
}

You can use it in any ViewController with:

imageView.setRounded()

Melonymelos

Answer 4

If you mean you want to make a UIImageView circular in Swift you can just use this code:

imageView.layer.cornerRadius = imageView.frame.height / 2
imageView.clipsToBounds = true

Allfired

If you don't do image.clipsToBounds = true, the image will not scale. – Famished

@Tom Spee when I set the corner radius to half the pictures width, I am getting a diamond shaped image and not a ircle. Any idea why this would be?? – Mclellan

@Mclellan I suspect you've figured it out by now, but have you confirmed you used the imageView and not the image? – Succor

@ScottCorscadden sorry Scott, I don't have the old code to look back on. – Mclellan

A bit late maybe but a diamond shape can be caused by auto layout so might be that you need to call self.view.layoutIfNeeded() before. – Allfired

Answer 5

Don't know if this helps anyone but I was struggling with this problem for awhile, none of the answers online helped me. For me the problem was I had different heights and widths set on the image in storyboard. I tried every solution on stack and it turns out it was something as simple as that. Once I set them both to 200 my circle profile image was perfect. This was code then in my VC.

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

Manns

Sweet! Thanks. This should be the answer. Two clean lines of code. No need to extend classes or anything extra. – Ferial

Answer 6

This way is the least expensive way and always keeps your image view rounded:

class RoundedImageView: UIImageView {

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

        clipsToBounds = true
    }

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

        clipsToBounds = true
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        assert(bounds.height == bounds.width, "The aspect ratio isn't 1/1. You can never round this image view!")

        layer.cornerRadius = bounds.height / 2
    }
}

The other answers are telling you to make views rounded based on frame calculations set in a UIViewControllers viewDidLoad() method. This isn't correct, since it isn't sure what the final frame will be.

Amphitheater

Suggest might as well add @IBDesignable – Beckett

Answer 7

For Swift 4:

import UIKit

extension UIImageView {

func makeRounded() {
    let radius = self.frame.width/2.0
    self.layer.cornerRadius = radius
    self.layer.masksToBounds = true
   }
}

Toilworn

Answer 8

All the answers above couldn't solve the problem in my case. My ImageView was placed in a customized UITableViewCell. Therefore I had also call the layoutIfNeeded() method from here. Example:

 class NameTableViewCell:UITableViewCell,UITextFieldDelegate { ...

 override func awakeFromNib() {

    self.layoutIfNeeded()
    profileImageView.layoutIfNeeded()

    profileImageView.isUserInteractionEnabled = true
    let square = profileImageView.frame.size.width < profileImageView.frame.height ? CGSize(width: profileImageView.frame.size.width, height: profileImageView.frame.size.width) : CGSize(width: profileImageView.frame.size.height, height:  profileImageView.frame.size.height)
    profileImageView.addGestureRecognizer(tapGesture)
    profileImageView.layer.cornerRadius = square.width/2
    profileImageView.clipsToBounds = true;
}

Neophyte

Answer 9

struct CircleImage: View {
    var image: Image

    var body: some View {
        image
           .clipShape(Circle())
    }
}

This is correct for SwiftUI

Ladner

Answer 10

extension UIImageView{
   
// Round Image
    func roundCorner() {
        self.layer.masksToBounds = true
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.clear.cgColor
        self.layer.cornerRadius = self.frame.size.width/2
    }
}
 

Brownfield

Answer 11

First you need to set equal width and height for getting Circular ImageView.Below I set width and height as 100,100.If you want to set equal width and height according to your required size,set here.

 var imageCircle = UIImageView(frame: CGRectMake(0, 0, 100, 100))

Then you need to set height/2 for corner radius

 imageCircle.layer.cornerRadius = imageCircle.frame.size.height/2
 imageCircle.layer.borderWidth = 1
 imageCircle.layer.borderColor = UIColor.blueColor().CGColor
 imageCircle.clipsToBounds = true
 self.view.addSubview(imageCircle)

Decastro

Answer 12

For Swift3/Swift4 Developers:

let radius = yourImageView.frame.width / 2
yourImageView.layer.cornerRadius = radius
yourImageView.layer.masksToBounds = true

Skimmia

not quite, I think he's adding an extension to ImageView. This is changing the instance of the class directly. If it's not helpful I can take it down. – Skimmia

Answer 13

For Rounded Image, Only following code would be enough in Extension:

self.layoutIfNeeded() // in case of autolayout(mentioned by Tom Spee in the comment).

And also make sure the property of UIImageView contentMode should be set correctly to get the result. In my case it is:

imageView.contentMode = .scaleAspectFit


extension UIImageView {
    func setRounded() {
            self.layoutIfNeeded()
            self.layer.cornerRadius = self.frame.height / 2
            self.clipsToBounds = true
    }
}

Mile

Answer 14

// code to make the image round


import UIKit

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 = prepareImage(anyImage)
}
}

// to call the function from the view controller

self.imgCircleSmallImage.maskCircle(imgCircleSmallImage.image!)

Hoff

Answer 15

imageView.layer.cornerRadius = imageView.frame.height/2
imageView.clipToBounds = true

Inexpressible

Answer 16

If your image is rounded, it would have a height and width of the exact same size (i.e 120). You simply take half of that number and use that in your code (image.layer.cornerRadius = 60).

Benignity