How To Make a Custom Control Tutorial: A Reusable Slider | raywenderlich.com

🎓 Courses & Articles
1

Controls are the bread and butter of iOS apps. UIKit provides many but this tutorial shows you how to make an iOS custom control in Swift.

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

Really cool! I like it.

1 Like
3

Excellent. Great content. Emphasises how little I know about Core Animation though :]

4

Really glad you like it! Cheers! :]

5

Hello and thank you for the tutorial.

I wonder the following, maybe you can help:

What if in that custom control, I would want to add the following additional behavior: if I touchDown on one of the two thumbsliders, I want to trigger some action.

How do I build that trigger?

Writing “sendActions(for: .touchDown)” into the “beginTracking” function does not seem to be the solution. What is the solution?

Independently from this question, and starting from your final App, if I add the line “sendActions(for: .valueChanged)” into the beginTracking function (and I do not change anything else), then when I click somewhere in the control, it triggers the action. I do not drag, just click. Why is that? What value changed that would have caused a .valueChanged event? Thank you for your thoughts!

6

@leamars Can you please help with this when you get a chance? Thank you - much appreciated! :]

7

Hey!

When you add sendActions(for: .valueChanged) into the beginTracking function, it will begin get triggered when a touch happens, regardless whether it’s a drag or just a touch down. Apple Developer Documentation

For just touching down on either of the two thumbnails you could do something really simple like just add a .touchUpInside target to the rangeSlider in the ViewController like so:

rangeSlider.addTarget(self, action: #selector(touchThumbnail(_:)), for: .touchUpInside)

And the appropriate function to call like this:
@objc func touchThumbnail(_ rangeSlider: RangeSlider) { print("A thumbnail was clicked!") }

Then to know which one was clicked you could add a property to the rangeSlider that would track that.

8

Thank you very much, this helps!

1 Like
9

Hello, how can I put a gradient on the selected track?

10

@leamars Can you please help with this when you get a chance? Thank you - much appreciated! :]

11

Hey! I recommend you check out this tutorial on glossy buttons that covers the topic more in depth. https://www.raywenderlich.com/216251-core-graphics-how-to-make-a-glossy-button, in particular the “Adding a Gradient” section.

But, here’s a snippet you can use by adding it to the RangeSliderTrackLayer:

ctx.saveGState()
ctx.addRect(rect)
ctx.clip()

let colorSpace = CGColorSpaceCreateDeviceRGB()

// 2
let colorLocations: [CGFloat] = [0.0, 1.0]

// 3
let startColor = UIColor.red.cgColor
let endColor = UIColor.orange.cgColor
let colors: CFArray = [startColor, endColor] as CFArray

// 4
guard let gradient = CGGradient(
    colorsSpace: colorSpace, colors: colors, locations: colorLocations) else {
        return
}

let startPoint = CGPoint(x: rect.midX, y: rect.minY)
let endPoint = CGPoint(x: rect.midX, y: rect.maxY)

ctx.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: [])

ctx.restoreGState()
12

hello how do i change the position of the slider

13

@leamars Do you have any feedback about this? Thank you - much appreciated! :]

14

This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!