How to make a round WKInterfaceButton in watchkit?

Question

iOS can use layer.cornerRadius to make a round UIButton.

Does WKInterfaceButton have this property?

If not, how can I make a round WKInterfaceButton in WatchKit.

Answer 1

You don't need an image to make WKInterfaceButton rounded. Instead:

1. Go to Attributes inspector for the button, and select content type: Group
2. Inside the button find the group and set its corner radius to whatever you need.
3. Scroll down the inspector and set both fixed Width and Height to the value equal to the radius doubled. Here you go
   

You can put whatever you want inside the button, for example a text label. This way you also can make oval buttons.

Answer 2

WKInterfaceButton does not have a corner radius property. You can make a circular button by setting a circular image as the button's background image. You can generate the image in code doing something like this: Draw a simple circle uiimage

Answer 3

If you put an image inside a group, you can then set the radius of the group. This crops the image into a circle. In the picture below, I have:

• Group (radius 56)
  • Group (radius 52)
    • Image (a square image)

While this example is with an image, you can use the same technique for a button. Previously the dog was clickable as a button so this is doable.