Kodeco Forums

How To Make a Custom Control Tutorial: A Reusable Knob

🎓 Courses & Articles
1

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
2

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!

3

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.

4

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.

5

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.

MYOUTPUT.png420×796 31.2 KB

6

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?

Thanks.

7

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

8

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! :]