BKSingh BKSingh - 1 year ago 79
Swift Question

not able to prepare circular imageview using swift 2 in ios app for iPad

I am trying to load a circular imageview in my ios app.
I have tried all the combinations that has been listed in stack-overflow, but i still get the same error. I tried every mentioned step over here
How to set imageView in circle like imageContacts in Swift correctly?

What I have done is this

  1. I have created an image view in my storyboard - with height=300, width=300, view mode = aspect fit.

  2. I defined constraint to place the image view at the horizontal and vertical center. Also defined trailing from top and right edge

The 4 constraint are as follows

i. ImageView.centerY = centreY
ii.ImageView.centerY = centreY
iii. ImageView.top = TopLayoutGUide.bottom + 103
iv. trailingMargin = ImageView.trailing + 125

  1. In my controller file I have `declared and IBOutlet for imageview as

    @IBOutlet var imageView: UIImageView!

  2. In my controller file I have used the following piece of code to make it circular

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

I am however, getting an oval shaped image view.

Answer Source

Try this:

@IBOutlet var imageView: UIImageView! {
    didSet {
        imageView.layer.borderColor = UIColor.grayColor().CGColor
        imageView.layer.cornerRadius = imageView.frame.width/2
        imageView.clipsToBounds = true
        imageView.layer.borderWidth = 0.5

And if you want you can just set clipsToBounds in storyboard instead of using it here.

Depending on when you're calling that circularImage function you wrote, the frame on the image might not be right yet.

If this doesn't fix the issue, you probably have some constraint troubles - make sure height and width are high priority and consider deleting the top & right constraints if you're using center horizontal and vertical.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download