Programmatically Setting Corner Radius for UIButtons in Landscape and Portrait Mode for All iPhone and iPad Devices

Question

The app I am working on is a near replicate of Apple's default iPhone calculator app.

I am having a hard time in keeping the corner radius set for both the basic operator buttons in portrait and the basic operator buttons plus additional buttons in landscape mode.

Is specifying the corner radius (by dividing the UIButton.bounds.height / 2) in viewWillLayoutSubviews() the right place?

I need the buttons left and right side to stay round on all device rotations. I am not concerned with the top and bottom of the buttons being round.

Thank you all for your consideration in helping me figure out this issue. I am not looking for a direct answer, but if you all could maybe point me to some topics to look into that would be a huge help. I have also tried setting the corner radius in viewDidAppear().

Looking for a programmatic solution using UIButton.bounds.height. I believe I am just trying to find the right method to implement the corner radius through

   var cornerRadius_forButtons: Double = 0
  if UIDevice.current.orientation == UIDeviceOrientation.landscapeLeft{
            cornerRadius_forButtons = Double(tag1_Button.bounds.height / 2.0)
        }
        else if UIDevice.current.orientation == UIDeviceOrientation.landscapeRight{
            cornerRadius_forButtons = Double(tag1_Button.bounds.height / 2.0)

        } else {

            cornerRadius_forButtons = Double(tag1_Button.bounds.height / 2.0)

        }
 UIButton.layer.cornerRadius = CGFloat(cornerRadius_forButtons)

Nol4635 · Answer 1 · 2018-12-22T17:21:59.280

0

When you use this method the only thing that is slightly hard is setting the constraints. You will not have to mess with code for the most part.

1.) In an image editor make a circle. Link To Image Editor I Used

2.) Add the operator/number to middle of circle

3.) Make background transparent (Not needed if background white)

4.) Add the image to your apps Assets Folder

5.) In Xcode set the buttons image property to the image you just created.

6.) Create constraints for all of your buttons

Now it should work on all devices regardless of orientation.

edited Dec 22 '18 at 17:21

answered Dec 22 '18 at 17:10

Nol4635

631
1
14
24

Sorry for being vague in my initial question, but I am looking for a programmatic solution as the default bounds of the buttons in landscape and portrait mode. – Tony Pendleton Dec 22 '18 at 17:44
Maybe these would help? https://www.appcoda.com/rounded-corners-uiview/ and https://stackoverflow.com/questions/25587713/how-to-set-imageview-in-circle-like-imagecontacts-in-swift-correctly. Thats my best guess. Sorry if not what your looking for as I usually use the method I posted. – Nol4635 Dec 22 '18 at 17:57
Sorry, I think I might be onto something! Just now, I realized its not working only on iPad devices. Kinda odd. All the calculator buttons that are present in landscape view for iPhone display in both the landscape and portrait mode for iPad. The buttons load fine initiially on iPad but they don't update when the device is rotated? I will try to add some pictures of my project. Thank you, Nol. – Tony Pendleton Dec 22 '18 at 18:07
Found the issue... left some code in viewDidLoad that claculated the corner radius. That was setting it before viewWillLayoutSubviews could get to it. Updating and calculating the code in viewWillLayoutSubviews is what resolved this issue. – Tony Pendleton Dec 22 '18 at 18:13
Glad you could fix it – Nol4635 Dec 22 '18 at 18:13

score 0 · Answer 2 · answered Dec 22 '18 at 18:17

Issue was on my end. The solution to getting round edges on both the left and ride side of UIButton(s) in portrait and landscape modes for all iOS devices was successfully done by calculating and implementing the corner radius in

   var cornerRadius_forButtons: Double = 0

   override func viewWillLayoutSubviews() {
   if UIDevice.current.orientation == UIDeviceOrientation.landscapeLeft{

        cornerRadius_forButtons = Double(tag1_Button.bounds.height / 2.0)

    }
      else if UIDevice.current.orientation == UIDeviceOrientation.landscapeRight{

        cornerRadius_forButtons = Double(tag1_Button.bounds.height / 2.0)

    } else {

        //PORTRAIT

        cornerRadius_forButtons = Double(tag1_Button.bounds.height / 2.0)

    }

    tag1_Button.layer.cornerRadius = CGFloat(cornerRadius_forButtons)

     }

Programmatically Setting Corner Radius for UIButtons in Landscape and Portrait Mode for All iPhone and iPad Devices

2 Answers2