苹果手表圆形按钮

Question

How to design circular buttons in Apple watch? What would be the approach to design a screen like the contacts application of the watch.

Answer 1

I don't know if this is what you want, but you could try this:

-open your Graphic/Design-Application (Photoshop, Gimp or whatever)

-create a circle-button and save the image

-in Xcode, drag a button into your interface

-go to the attributes inspector of the button and set your image at background > image

Answer 2

Please, find my answer for your query. I hope that it will help you more.

If you want to design a screen like favorite contact app on apple-watch, then the WWDC video link given in my answer will definitely guide you.

I have designed app with a circular menu which is not exactly same as the apple's favorite app, But it has almost have a circular view with statically. For that, I have used Groups in horizontal layout for each horizontal item with proper alignment of inside groups.

Answer 3

You can achieve this using group,

1. Drag group object and drop it in interface builder
2. set equal height and width to the group
3. In attribute inspector, set custom radius to half of the height value set.For Eg: if height and width is set as 30, then the radius will be 15. This will give you round shape.
4. Add color or image based on the need
5. Add tap gesture to the group and add action to the gesture. Handle stuffs here that are needed to be handled on clicking it