kodeco.com Forums

How To Make a Custom Control Tutorial: A Reusable Knob

Build a reusable rotating knob control from scratch in this custom control tutorial. Featuring Core Animation layers, good API design, and more!

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/2092-how-to-make-a-custom-control-tutorial-a-reusable-knob

First off, This is great! I learned so much about what is going on behind the scenes. I was wondering if we wanted to make adjustments on the fly in Interface Builder, could we bring the drawing code in from the renderer and make it @IBInspectable? My guess is the CALayer does not appear in the preview? Would I lose any performance? Thanks!

I’m happy to see you liked the tutorial!

You should be able to easily make the view @IBDesignable and the relevant properties @IBInspectable. CALayer does indeed appear in the previews in Interface Builder.

The feature is sadly still a bit buggy at times though. So expect a few hiccups here an there while Interface Builder is trying to show a live preview.

You shouldn’t lose any performance. @IBDesignable and @IBInspectable shouldn’t have any effect on the final app.

Thanks for this great tutorial.Can i get some solution for the following problems which i am facing.

  1. Ensure that a user can only interact with the control if their first touch is on the pointer.
    I am using image view in place of image layer.In that image view i am using my custom image of Pin.So i just want to move pointer layer only when tap on pin.

  2. I just want to move the layer in one direction either clockwise or anticlockwise.

Thanks in advance.

Sir i need little Help.
My output is kinda different where you have mentioned that “Build and run your app, and your control should look like the one below:”
I am getting different output. I have attached my output screenshot. As if you can see there is only a tiny little dot instead of a knob.

Great tutorial!
I have some questions:

  • How can i prevent the jump over zero at the round slider? I would like to use as a volume control, so go from silent to max. volume isnt a good idea :slight_smile:
  • How to paint the line only until the current value?


Can you explain the handleRotation: method its like many parameters ? Any ways to simplify it.?

This tutorial is more than six months old so questions are no longer supported at the moment for it. We will update it as soon as possible. Thank you! :]