Circular UI Slider with Image and Color

Question

I am working on an app, with UISlider and need to make it circular. Is it possible via some native code, or does a 3rd party library have to be integrated?

I want to fil

Answer 1

You can find 3rd party libraries for circular slider.

Take a look into these:

https://www.cocoacontrols.com/controls/uicircularslider

https://github.com/thomasfinch/Circular-UISlider

https://github.com/milianoo/CurvySlider

Answer 2

I came across this question in a seperate thread with multiple links and didn't like any of the answers offered so I thought I would add my own in what seemed to be the most relevant thread, on the off chance someone else finds their way here and likes the option I provide.

it is not elegant or simple but it is easy and I thought it would be a nice starting point for others to develop their own.

in this example the circular uiScroller is placed on a view (or HUD) that is presented over the top of an SKView. I then use a hitTest to transfer any touches from the gameScene to the UIView and use _touchesBegan and _touchesMoved to update a series of buttons that are hidden like so:

the arrows are all hidden but we use the frames of each box to register where the touch is

I made the arrows UIButtons so it was easier to use the storyboard but I think an imageView works fine as we are only checking the frame of the arrow inside _touchesBegan and then sending it to the function rather than collection a touch event from the arrow itself.

if upBtn.frame.contains(touch) {
            upBtnPress() //if you made this a touch func like me a call to (self) as the sender may be required
        }

the black circle itself remains visible so it looks like this is where your taps are going.

then finally you create multiple images like this:

any circular pattern for each location possible is appropriate

(I had a total of 16 points for mine)

and then under any press function you just change the image of the black circle to show the correct image based on where the touch location is and you're done!

circleDpad.image = UIImage(named: "up")

calculating the angle:

is quite very simple, there are 16 points on my dial so I need to convert this into a possible direction in 1...360

func angleChanged(angle: CGFloat) {
    let valueReached = (angle / 16) * 360 // this gives you the angle in degrees, converting any point that's x/16 into x/360
    let turret = checkBaseSelect() //this is my personal code
    turret?.tAngle = CGFloat(valueReached) * (CGFloat.pi / 180) //this converts degrees to radians and applies it where I want it.
}

despite only having 16 points I found that even without applying animation it looks quite smooth. thanks for reading.

this is a gif of my circular slider in action

This is my first ever guide, if it needs more information (or should be somewhere else) please let me know.