11

I have been trying to make the UIButton in the cells a perfect circle. Unfortunately the circle has been formed based on the background image rather than the UIButton frame.

The code I have for creating a circle:

cell.StoryViewButton.setImage(image, forState: .Normal)
cell.StoryViewButton.frame = CGRectMake(50, 8, 100, 100)
cell.StoryViewButton.layer.masksToBounds = false
cell.StoryViewButton.layer.cornerRadius = cell.StoryViewButton.frame.width/2
cell.StoryViewButton.clipsToBounds = true

The output looks like this: Output Images for each cell

What can I do to get the perfect circle button frames that I want?

5
  • Are you using Autolayout? then set frame does not work.
    – HSG
    Jun 12, 2016 at 3:32
  • @HDT Yes I am using Autolayout, should I use it without?
    – user6413266
    Jun 12, 2016 at 4:17
  • It depends on your current implementation, you are able to still use Autolayout, however, instead of setting frame, use constraints to set width and height of your view equally.
    – HSG
    Jun 12, 2016 at 5:40
  • @HDT I took off the Autolayout constraints and that made it go back to a perfect circe, thanks!
    – user6413266
    Jun 12, 2016 at 6:11
  • cell.StoryViewButton.frame.width/2 to cell.StoryViewButton.layer.bound.size/2 May 24, 2018 at 7:10

3 Answers 3

19

Try something like this

 cell.StoryViewButton.layer.masksToBounds = true
 cell.StoryViewButton.layer.cornerRadius = cell.StoryViewButton.frame.width/2

If you need to create a circle of view you have to set masksToBounds to true, do not set clipsToBounds

Hope this will help you.

1
  • Size is missing: "cell.StoryViewButton.frame.size.width/2" Dec 23, 2018 at 15:55
5

Swift 4

You could apply the following function to any view, including buttons.

func makeViewCircular(view: UIView) {
    view.layer.cornerRadius = view.bounds.size.width / 2.0
    view.clipsToBounds = true
}

Great.

That didn't work for me at first as I applied it in the viewDidLoad, though. At this point, constraints are still playing with the size of your buttons and the corner radius is applied to a button it thinks is twice the size, resulting in the odd shapes you have. To apply the right values to the right measurements, place the code in override func viewDidLayoutSubviews().

I know this may be a more specific case within my personal process, yet I'm sure it'll help somebody.

0

There is the working code.I test it. Hope it helps. I am not sure why but I check that by changing height and width of the frame in here "CGRectMake(50, 8, 120, 120)" that the height and width of the frame and height and width of a button should be same to get the perfect circle.

 cell.StoryViewButton.setImage(image, forState: .Normal)
 cell.StoryViewButton.frame = CGRectMake(50, 8, 120, 120)
 cell.StoryViewButton.layer.cornerRadius = self.btn.frame.width/2;
 cell.StoryViewButton.layer.masksToBounds = true

Hope it helps.

1
  • Yes, it works but user still able to tap on the corners even though UI appears as circle. Is there anyway to have the interaction only to the circle whatever we define with cornerRadius?
    – Srinivas G
    May 9, 2020 at 3:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.