iOS & Swift – Making a Custom Dial Menu

iPhone custom slider

TOKYO (MacHouse) – These days, I’ve been looking for a design challenge for an iOS application as I have plenty of free time. And I went to yesterday again to see if there is anything interesting. What caught my eyes is this design. Whoa… Quite amazing… I don’t know how they make that kind of control. So I launched Xcode 8 and started writing code in Swift last night.

iOS Swift

Screenshot 1
  iOS Swift

Screenshot 2

Well, my work (See Screenshot 1.) isn’t terribly bad although they’ve done a way better job. I wasn’t sure if I could rotate a view (UIView). When I first touched this dial control, the blue segment was jumpy.

In order to create this dial control, I have gathered nine images. You certainly need to use the touchesMoved method. I’ve actually created a subclass of UIView and embedded touchesBegan, touchesMoved and touchesEnded methods in it. (See Screenshot 2.) The user is able to touch and move the small blue segment, which is not an image, actually. It’s the result of an arc with UIBezierPath.

Click here to watch a quick iPhone Simulator QuickTime movie.

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.