5

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.

Suzanne Shansha
  • 85
  • 1
  • 6
  • 1
    You'll need to set the background image of the WKInterfaceButton to a round graphic. – Tim Apr 11 '16 at 08:15

3 Answers3

11

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)

Watch Screenshot

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.

Vanessa Forney
  • 436
  • 5
  • 7
  • Thank you for this solution. This is the cleanest and easiest one without needing any custom drawing or adding any static image to the project. And yes, I can confirm that this does indeed work with buttons, which is exactly what I was looking for. – Roboris Jan 09 '17 at 15:27
0

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

Community
  • 1
  • 1
Dash
  • 17,188
  • 6
  • 48
  • 49
0

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

  1. Go to Attributes inspector for the button, and select content type: Group WKInterfaceButton Attributes inspector. Content type selection
  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
    WKInterfaceGroup settings in the Attributes Inspector. Width and Height.

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

kelin
  • 11,323
  • 6
  • 67
  • 104