TGP Controls

Slider with ticks & animated Label (Swift)

TGPControls are drop-in replacement of UISlider & UILabel, with visual preview in Interface Builder, single liner instrumentation, smooth animations, simple API, powerful customization.

What's DiscreteSlider?

TGPDiscreteSlider: A slider with discrete steps (i.e. ticks), discrete range, with customizable track, thumb and ticks. Ideal to select individual steps, star rating, integers, rainbow colors, slices and in general any value that is not a continuum. Just set the number of stops, TGPDiscreteSlider handles the selection and the animations for you.

What's CamelLabels?

TGPCamelLabels: A set of animated labels (dock effect) representing a selection. Can be used alone or in conjunction with a UIControl. Ideal to represent steps. The discrete slider and the camel labels can work in unison.

Compatibility

1. Written in Swift 4, can be integrated with Swift or Obj-C
2. TGPControls are AutoLayout, IB Designable and IB Inspectable ready
3. Version 5.0.1 and better comes with a Swift 4 demo application for iOS 8 and above.
   iOS 7 supported in versions 2.1.0 and earlier
4. Automatic support for both left-to-right and right-to-left languages

Fully Customizable

Control everything about the slider or its labels, starting with colors, images and fonts, including track and ticks shape, and thumb shadows. All computations regarding range and sizing and handled automatically. Use the two classes in tandem to create stunning new controls, which can be resized dynamically, to intergrate beautifully into your application.

Most customization can be done in Interface Builder and require zero coding.

How to integrate (iOS 8 and higher)

Using CocoaPods

platform :ios, '8.0'
use_frameworks!
target 'TGPControlsDemo' do
pod 'TGPControls'
end

Using Carthage

github "SwiftArchitect/TGPControls"

Besides customization, which you can do entirely under Interface Builder in iOS 8 and later, both TGPDiscreteSlider and TGPCamelLabels require surprisingly little code to integrate.

DiscreteSlider

For simplicity, TGPDiscreteSlider does not descend from UISlider but from UIControl. It uses a minimumValue, a tickCount and an incrementValue (instead of minimumValue and maximumValue). All graphic aspects, such as physical spacing of the ticks or physical width of the track are controlled internally. This makes TGPDiscreteSlider predictable. it is guaranteed to always fit snuggly inside its bounds.

Single step: To use DiscreteSlider + CamelLabels in tandem, you need exactly 1 line of code:

discreteSlider.ticksListener = camelLabels

That's all!
Through the TGPControlsTicksProtocol, the camelLabels listen to value and size changes. You may want to adopt this protocol to handle changes, or use the traditional UIControl notifications:

Advanced Steps (1a): register to notifications (just like any UIControl)

discreteSlider.addTarget(self,
action: #selector(valueChanged(_:event:)),
for: .valueChanged)

Advanced Steps (1b): respond to notification

func valueChanged(_ sender: TGPDiscreteSlider, event:UIEvent) {
self.stepper.value = Double(sender.value)
}

tickStyle, trackStyle, thumbStyle Properties:

Other Properties:

(†1) Introduced in 5.1.0. (†2) Introduced in 4.0.0. Former versions used a resource name as a string.

CamelLabels

Besides font customization, TGPCamelLabels only requires a set of labels (supplied as strings), and an active index selection.

Step 1: tell the TGPCamelLabels what to select (Refer to Single step section above to use DiscreteSlider + CamelLabels in tandem)

camelLabels.value = sender.value

There is no step 2. Most of the customization can be done inside Interface Builder.

Properties:

(*) You can tap on the UISwitch laid out either under or below the camel labels:

(‡) No camel animation will occur when emphasisLayout = regularLayout, i.e. .centerY.

Code example (Swift)

See TGPControlsDemo project: TGPControlsDemo (Modern Swift syntax + IBInspectable)

Running the demo using Carthage

1. cd TGPControlsDemo
2. carthage update
3. open TGPControlsDemo.xcodeproj
4. Select scheme TGPControlsDemo Cart
5. Build & run

Running the demo using Cocoapods

1. cd TGPControlsDemo
2. pod install
3. open TGPControlsDemo.xcworkspace
4. Select scheme TGPControlsDemo Pods
5. Build & run

import UIKit
import TGPControls

class ViewController: UIViewController {
@IBOutlet weak var oneTo10Labels: TGPCamelLabels!
@IBOutlet weak var oneTo10Slider: TGPDiscreteSlider!
@IBOutlet weak var alphabetLabels: TGPCamelLabels!
@IBOutlet weak var alphabetSlider: TGPDiscreteSlider!
@IBOutlet weak var switch1Camel: TGPCamelLabels!

override func viewDidLoad() {
super.viewDidLoad()

alphabetLabels.names = [
"A","B","C","D","E","F","G","H","I","J","K","L","M",
"N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
switch1Camel.names = ["OFF", "ON"]

// Automatically track tick spacing and value changes
alphabetSlider.ticksListener = alphabetLabels
oneTo10Slider.ticksListener = oneTo10Labels
}

// MARK: - UISwitch
@IBAction func switch1ValueChanged(_ sender: UISwitch) {
switch1Camel.value = (sender.isOn) ? 1 : 0
}
}

Customization examples