Auto resizing corner radius using viewDidLayoutSubviews() not updating the view before it is displayed

Question

I'm new to swift and Xcode so there may be a simple answer or better way to do this. I am trying to make rounded edges to my buttons in all size iOS devices and the best way that I have found so far is using this method:

    override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    for i in 0..<buttons.count {
        self.buttons[i].layer.cornerRadius = self.buttons[i].bounds.size.height / 2
    }
    examResultsBackButtonOutlet.layer.cornerRadius = examResultsBackButtonOutlet.bounds.size.height / 2
}

// Build UI

func loadUI() {

    // Round the edges, change color background, font

    titleOutlet.mainMenuStyle("", 75, earthGreenWithAlpha)
    for i in 0..<buttons.count {
        buttons[i].mainMenuStyle("", 40)
    }

    print("Main Menu successful load")

}

I call the loadUI() method in my viewDidLoad method for what its worth:

    //MARK: viewDidLoad()

override func viewDidLoad() {

    super.viewDidLoad()

    // Load the UI
    loadUI()
    loadExamResultsView()
    mainMenu()
    examResultsStackView.isHidden = true
    loadStoredScores()
    loadStoredSettings()

}

The issue presents itself not when I start the app for the first time (this is the first scene/View Controller), rather the issue occurs when I segue back to this scene from my second View Controller.

What happens is the buttons are formatted weird for about a half a second, then they are reformatted perfectly:

Correctly formatted screenshot

Incorrectly formatted screenshot

You'll notice the second image (which only occurs for about 0.5 seconds) has much more intense corner radius'.

How can I prevent this from happening so that the user only sees the perfectly round corner radius' for each button and not the poor janky ones?

Thanks!

Is there a particular reason you’re applying the corner radius to these buttons this way? — trndjc, Mar 11 '18 at 15:54
Well I found that when I apply a corner radius the rounded edges of the buttons varied from screen size to screen size. This could be due in part to the constraints I put on them (they are not a fixed height, but rather inside of a stack view that has equal heights with the superview with a multiplier of 0.8, so essentially 80% of the superview for whatever screen size). So since the frame height varies from screen size to screen size I need to update the layout. See this post: https://stackoverflow.com/questions/31961568/how-to-make-round-corner-button-which-supports-all-device-in-ios — Jared L., Mar 12 '18 at 02:32

score 1 · Accepted Answer · answered Mar 15 '18 at 18:43

Thanks for everyone's feedback but here is what fixed it for me:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    for i in 0..<buttons.count {
        self.buttons[i].layer.cornerRadius = self.buttons[i].bounds.size.height / 2
    }
    examResultsBackButtonOutlet.layer.cornerRadius = examResultsBackButtonOutlet.bounds.size.height / 2
}

This replaced the original post:

override func viewDidLayoutSubviews() {
     super.viewDidLayoutSubviews()
     for i in 0..<buttons.count {
     self.buttons[i].layer.cornerRadius = self.buttons[i].bounds.size.height / 2
  }
  examResultsBackButtonOutlet.layer.cornerRadius = examResultsBackButtonOutlet.bounds.size.height / 2 }

Thanks!

Qi Hao · Answer 2 · 2018-03-12T06:32:39.413

0

Maybe you can try this:

https://i.stack.imgur.com/u5aoT.jpg

or add to extension of UIView

extension UIView  {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = (newValue > 0)
        }
    }
}

edited Mar 12 '18 at 06:32

answered Mar 11 '18 at 13:12

Qi Hao

36
3

Thank you, but I’ve tried that. I’ve tried setting the UI changes by putting the methods in my viewDidLoad() function into a viewWillAppear() function, but I had the same result from before. And if I move the viewDidLayouSubviews function to the viewWillApper it doesn’t round the edges of my buttons. Correct me if I’m wrong but the viewDidLoad occurs before viewWillAppear, so setting my UI changes sooner is better right because the viewDidLayoutSubViews needs to reference the UI changes to update the UI for the rounded corners. – Jared L. Mar 11 '18 at 15:10
didLayoutSubview does not get called initially, it only gets called when you addSubview or remove subview. In this case, I think it might be called when you set the stack view to hidden. You can try to move your codes in layoutsubviews to viewDidLoad – Qi Hao Mar 11 '18 at 16:46
Thank you, very much. Ok I just tried that. I tried it two ways... 1) with this method still remaining: override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() } and 2) without that method. In either case my corners were not rounded, they remained jagged like I have in the original post. I keep moving code around and I have noticed that the corners only round out if I keep the cornerRadius modification inside of the override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() } method – Jared L. Mar 12 '18 at 02:27
I am not sure about how you add button to the view. Do you programatically added the button or those buttons are just on the storyboard. If those buttons are on the storyboard, try to set the runtime attributes in the storyboard instead. – Qi Hao Mar 12 '18 at 06:27
The buttons are on the storyboard and are inside of a stackview. I have set constraints to the stackview to be 80% of the height of the superview (stackview.height = superview.height x 0.8). I then update the attributes in code through IBOutlets. I do not know how to round the corners in the storyboard without using code. Is that the better way? – Jared L. Mar 12 '18 at 12:51
I have updated my answer to how to round the corners in storyboard, you can check it out. – Qi Hao Mar 13 '18 at 12:31

Auto resizing corner radius using viewDidLayoutSubviews() not updating the view before it is displayed

2 Answers2