0

This code is only working with fix height and width. How can Round UIImageView when we use multiplier?

Here, is the code that Circle my ImageView. Width and Height is 300.

class MusicViewController: UIViewController {

    @IBOutlet weak var imgAlbum: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        imgAlbum.layer.borderWidth = 1
        imgAlbum.layer.masksToBounds = false
        imgAlbum.layer.borderColor = UIColor.black.cgColor
        imgAlbum.layer.cornerRadius = imgAlbum.frame.height/2
        imgAlbum.clipsToBounds = true
    }
    
}

enter image description here

If I change my height and width to multiplier like. Now, the multiplier of Height 0.5 and width 0.8. (Proportional height and width to SuperView)

My ImageView Constrain

enter image description here

Yogesh Patel
  • 1,893
  • 1
  • 20
  • 55
  • Does this answer your question: https://stackoverflow.com/questions/32362934/how-to-keep-a-round-imageview-round-using-auto-layout – Kishan Bhatiya Feb 26 '21 at 11:48
  • Hello Kishan, I already check but not working same output happened. Thanks! – Yogesh Patel Feb 26 '21 at 11:49
  • 1
    Circle required square. so use 1:1 aspect ratio and give proportional height or width. not both. Also, use viewDidLayoutSubview method for corner radius – Raja Kishan Feb 26 '21 at 11:53
  • By setting different width and height size, you can't achieve circle. It's maths :) – Raja Kishan Feb 26 '21 at 11:56
  • Haha, So First I need to set height and width then set ratio to imageview is it right? – Yogesh Patel Feb 26 '21 at 11:58
  • Yes, you can set first height or width (not height and width). and after ratio. With the new Xcode, the aspect ratio automatically set as per your width and height so if your image is not square then you need to manually set the ratio to 1:1 or 1. – Raja Kishan Feb 26 '21 at 13:15

2 Answers2

1

you will not get a square by using proportional width and proportional height constraint together like that, in different device it will have different height and width

my suggestion is to use only one proportional width or proportional height (which one you want) and use aspect ratio constraint 1:1 on the view

aiwiguna
  • 2,852
  • 2
  • 15
  • 26
1

As @RajaKishan and @aiwiguna both said that you can't get a square image with both proportional height and width constraint together because then you can not get a round circle with different height and width.

You can set width or height proportional to superview and set the aspect ratio to 1:1 then you can change the multiplier and get the circle properly. You can check to attached image for constraints

enter image description here

then set cornerRadius in viewDidLayoutSubviews(), not in viewDidLoad(). (viewDidLoad() is called before the layout constraints change the view height, and only once. viewDidLayoutSubviews() is called any time your view's geometry changes, so you should invoke any layout logic there.

override func viewDidLayoutSubviews()  {

    self.yourImageView.layer.cornerRadius = self.yourImageView.bounds.height/2
    self.yourImageView.clipsToBounds = true

}
Duncan C
  • 128,072
  • 22
  • 173
  • 272
Kishan Bhatiya
  • 2,175
  • 8
  • 14