Fixed #47. Fixed #48

Author: Xavier Schott

README.md

@@ -22,10 +22,11 @@ Ideal to select individual steps, star rating, integers, rainbow colors, slices
 Ideal to represent steps. *The discrete slider and the camel labels can work in unison.*
 
 ## Compatibility
-1. Written in **Swift 3**, can be integrated with **Swift** or **Obj-C**
+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** comes with a **Swift 4** demo application for **iOS 8** and above.  
+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
 
 ![imagessliderdemo](https://cloud.githubusercontent.com/assets/4073988/6628373/183c7452-c8c2-11e4-9a63-107805bc0cc4.gif)
 
@@ -82,7 +83,9 @@ All graphic aspects, such as physical spacing of the ticks or physical width of
 ```
 discreteSlider.ticksListener = camelLabels
 ```
+
 ![complete](https://cloud.githubusercontent.com/assets/4073988/5912616/26cf1b0a-a58b-11e4-92f7-f9dbcd53c413.gif)
+
 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:
 
@@ -118,23 +121,27 @@ self.stepper.value = Double(sender.value)
 
 | Tick |       |
 |:-----| ----- |
+| `tickStyle` | See style property |
 | `tickSize` | absolute dimension |
-| `tickImage` | a `UIImage`, fits in `tickSize` (†) |
 | `tickCount` | discrete steps, must be 2 or greater |
+| `tickTintColor` | takes precedence over the control `tintColor` |
+| `tickImage` | a `UIImage`, fits in `tickSize` (†) |
 | `ticksDistance` | horizontal spacing _(calculated)_ |
 
 | Track |       |
 |:------| ----- |
+| `trackStyle` | See style property |
 | `trackThickness` | height |
 | `trackImage` | a `UIImage`, ignores `trackThickness` (†) |
 | `minimumTrackTintColor` | track lower side |
 | `maximumTrackTintColor` | track higher side |
 
 | Thumb |       |
 |:------| ----- |
+| `thumbStyle` | See style property |
 | `thumbSize` | absolute size |
-| `thumbImage` | a`UIImage`, dictates `thumbSize` (†) |
 | `thumbTintColor` | background |
+| `thumbImage` | a`UIImage`, dictates `thumbSize` (†) |
 | `thumbShadowRadius` | breaking the _flat design concept_ |
 | `thumbShadowOffset` | applied to `thumbShadowRadius`, may affect control bounds |
 
@@ -159,8 +166,9 @@ Most of the customization can be done inside **Interface Builder**.
 
 | Property |       |
 |:---------| ----- |
-| `ticksListener` | ties a discrete slider to its camel labels. This is your most robust method to not only ensure that the layout of both controls match exactly, but also adjust this spacing when orientation changes. A typical use may be `discreteSlider.ticksListener = camelLabels` |
+| `tickCount` | **design only** (_preferrably not to be used_): the number of ticks is driven by the number of elements in the `names` array |
 | `names` | supplies a new set of labels ; supersedes the `tickCount` property, which will return the number of labels. A typical use may be `camelLabels.names = ["OFF", "ON"]` |
+| `ticksListener` | ties a discrete slider to its camel labels. This is your most robust method to not only ensure that the layout of both controls match exactly, but also adjust this spacing when orientation changes. A typical use may be `discreteSlider.ticksListener = camelLabels` |
 | `ticksDistance` | _override_ the labels spacing entirely ; **prefer** the `ticksListener` mechanism if it is available to you. A typical use may be `camelLabels.ticksDistance = 15` |
 | `value` | which label is emphasized (_selected_) |
 | `backgroundColor` | labels become  *tap-through* (**click-through**) when set to `UIColor.clear` ; use TGPCamelLabels *on top of* other UI elements, **even native iOS objects**!(*) |
@@ -170,6 +178,7 @@ Most of the customization can be done inside **Interface Builder**.
 
 | Edges & Animation |       |
 |:------------------| ----- |
+| `numberOfLiness` | Support for multiple lines labels |
 | `offCenter` | **leftmost and righmost labels only**: relative inset expressed as a proportion of individual label width: 0: none, +0.5: nudge in by a half width (fully fit) or -0.5: draw completely outside |
 | `insets` | **leftmost and righmost labels only**: absolute inset expressed in pixels |
 | `emphasisLayout` | emphasized (_selected_) labels vertical alignment ; `.top`, `.centerY` or `.bottom`. Default is `.top` (‡) |

TGPControls.podspec

@@ -2,7 +2,7 @@ Pod::Spec.new do |spec|
 
   # ―――  Spec Metadata  ―――――――――――――――――――――――――――――――――――――――――――――――――――――――――― #
   spec.name         = "TGPControls"
-  spec.version      = "5.0.2"
+  spec.version      = "5.0.3"
   spec.summary      = "Custom animated iOS controls: Animated discrete slider, animated labels"
 
   spec.description  = <<-DESC
@@ -26,7 +26,7 @@ Pod::Spec.new do |spec|
   spec.swift_version = '4.0'
 
   # ――― Source Location ―――――――――――――――――――――――――――――――――――――――――――――――――――――――――― #
-  spec.source       = { :git => "https://github.com/SwiftArchitect/TGPControls.git", :tag => "v5.0.2" }
+  spec.source       = { :git => "https://github.com/SwiftArchitect/TGPControls.git", :tag => "v5.0.3" }
   spec.source_files = "TGPControls/**/*.{swift}"
   spec.exclude_files = "TGPControlsDemo/*"
 

TGPControls/TGPCamelLabels.swift

@@ -78,11 +78,11 @@ public class TGPCamelLabels: TGPCamelLabels_INTERFACE_BUILDER {
         }
     }
 
-	@IBInspectable public var numberOfLinesInLabel:Int = 1 {
-		didSet {
-			layoutTrack()
-		}
-	}
+    @IBInspectable public var numberOfLinesInLabel:Int = 1 {
+        didSet {
+            layoutTrack()
+        }
+    }
 
     // Label off-center to the left and right of the slider
     // expressed in label width. 0: none, -1/2: half outside, 1/2; half inside
@@ -166,6 +166,7 @@ public class TGPCamelLabels: TGPCamelLabels_INTERFACE_BUILDER {
     var lastValue = NSNotFound
     var emphasizedLabels:[UILabel] = []
     var regularLabels:[UILabel] = []
+    var localeCharacterDirection = CFLocaleLanguageDirection.leftToRight
 
     // MARK: UIView
 
@@ -195,6 +196,11 @@ public class TGPCamelLabels: TGPCamelLabels_INTERFACE_BUILDER {
     // MARK: TGPCamelLabels
 
     func initProperties() {
+        if let systemLocale = CFLocaleCopyCurrent(),
+            let localeIdentifier = CFLocaleGetIdentifier(systemLocale) {
+            localeCharacterDirection = CFLocaleGetLanguageCharacterDirection(localeIdentifier.rawValue)
+        }
+
         debugNames(count: 10)
         layoutTrack()
     }
@@ -234,10 +240,16 @@ public class TGPCamelLabels: TGPCamelLabels_INTERFACE_BUILDER {
         let count = names.count
         if count > 0 {
             var centerX = (bounds.width - (CGFloat(count - 1) * ticksDistance))/2.0
+            if .rightToLeft == localeCharacterDirection {
+                centerX = bounds.width - centerX
+            }
+            let tickSpacing = (.rightToLeft == localeCharacterDirection)
+                ? -ticksDistance
+                : ticksDistance
             let centerY = bounds.height / 2.0
             for name in names {
                 let upLabel = UILabel.init()
-                upLabel.numberOfLines = self.numberOfLinesInLabel
+                upLabel.numberOfLines = numberOfLinesInLabel
                 emphasizedLabels.append(upLabel)
                 upLabel.text = name
                 if let upFontName = upFontName {
@@ -261,7 +273,7 @@ public class TGPCamelLabels: TGPCamelLabels_INTERFACE_BUILDER {
                 addSubview(upLabel)
 
                 let dnLabel = UILabel.init()
-                dnLabel.numberOfLines = self.numberOfLinesInLabel
+                dnLabel.numberOfLines = numberOfLinesInLabel
                 regularLabels.append(dnLabel)
                 dnLabel.text = name
                 if let downFontName = downFontName {
@@ -279,15 +291,21 @@ public class TGPCamelLabels: TGPCamelLabels_INTERFACE_BUILDER {
                 }()
                 addSubview(dnLabel)
 
-                centerX += ticksDistance
+                centerX += tickSpacing
             }
 
             // Fix left and right label, if there are at least 2 labels
             if names.count > 1 {
-                insetLabel(emphasizedLabels.first, withInset: insets, andMultiplier: offCenter)
-                insetLabel(emphasizedLabels.last, withInset: -insets, andMultiplier: -offCenter)
-                insetLabel(regularLabels.first, withInset: insets, andMultiplier: offCenter)
-                insetLabel(regularLabels.last, withInset: -insets, andMultiplier: -offCenter)
+                let localeInsets = (.rightToLeft == localeCharacterDirection)
+                    ? -insets
+                    : insets
+                let localeOffCenter = (.rightToLeft == localeCharacterDirection)
+                    ? -offCenter
+                    : offCenter
+                insetLabel(emphasizedLabels.first, withInset: localeInsets, andMultiplier: localeOffCenter)
+                insetLabel(emphasizedLabels.last, withInset: -localeInsets, andMultiplier: -localeOffCenter)
+                insetLabel(regularLabels.first, withInset: localeInsets, andMultiplier: localeOffCenter)
+                insetLabel(regularLabels.last, withInset: -localeInsets, andMultiplier: -localeOffCenter)
             }
 
             dockEffect(duration:0.0)

TGPControls/TGPDiscreteSlider.swift

@@ -208,7 +208,6 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
             let segments = CGFloat(max(1, tickCount - 1))
             return trackRectangle.width / segments
         }
-        set {}
     }
 
     @objc public var ticksListener:TGPControlsTicksProtocol? = nil {
@@ -221,15 +220,18 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
     var intValue:Int = 0
     var intMinimumValue = -5
 
-    var ticksAbscisses:[CGPoint] = []
-    var thumbAbscisse:CGFloat = 0
+    var ticksAbscissae:[CGPoint] = []
+    var thumbAbscissa:CGFloat = 0
     var thumbLayer = CALayer()
     var leftTrackLayer = CALayer()
     var rightTrackLayer = CALayer()
     var trackLayer = CALayer()
+    var leadingTrackLayer: CALayer!
+    var trailingTrackLayer: CALayer!
     var ticksLayer = CALayer()
     var trackRectangle = CGRect.zero
     var touchedInside = false
+    var localeCharacterDirection = CFLocaleLanguageDirection.leftToRight
 
     let iOSThumbShadowRadius:CGFloat = 4
     let iOSThumbShadowOffset = CGSize(width:0, height:3)
@@ -262,16 +264,29 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
     // MARK: TGPDiscreteSlider
 
     func initProperties() {
+        if let systemLocale = CFLocaleCopyCurrent(),
+            let localeIdentifier = CFLocaleGetIdentifier(systemLocale) {
+            localeCharacterDirection = CFLocaleGetLanguageCharacterDirection(localeIdentifier.rawValue)
+        }
+
+        leadingTrackLayer = (.rightToLeft == localeCharacterDirection)
+            ? rightTrackLayer
+            : leftTrackLayer
+        trailingTrackLayer = (.rightToLeft == localeCharacterDirection)
+            ? leftTrackLayer
+            : rightTrackLayer
+
         // Track is a clear clipping layer, and left + right sublayers, which brings in free animation
         trackLayer.masksToBounds = true
         trackLayer.backgroundColor = UIColor.clear.cgColor
         layer.addSublayer(trackLayer)
+        trackLayer.addSublayer(leftTrackLayer)
+        trackLayer.addSublayer(rightTrackLayer)
+
         if let backgroundColor = tintColor {
-            leftTrackLayer.backgroundColor = backgroundColor.cgColor
+            leadingTrackLayer.backgroundColor = backgroundColor.cgColor
         }
-        trackLayer.addSublayer(leftTrackLayer)
         rightTrackLayer.backgroundColor = maximumTrackTintColor.cgColor
-        trackLayer.addSublayer(rightTrackLayer)
 
         // Ticks in between track and thumb
         layer.addSublayer(ticksLayer)
@@ -300,7 +315,7 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
             fallthrough
 
         case .image:
-            for originPoint in ticksAbscisses {
+            for originPoint in ticksAbscissae {
                 let rectangle = CGRect(x: originPoint.x-(tickSize.width/2),
                                        y: originPoint.y-(tickSize.height/2),
                                        width: tickSize.width,
@@ -391,21 +406,21 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
 
         leftTrackLayer.frame = {
             var frame = trackLayer.bounds
-            frame.size.width = thumbAbscisse - trackRectangle.minX
+            frame.size.width = thumbAbscissa - trackRectangle.minX
             return frame
         }()
 
-        if let backgroundColor = minimumTrackTintColor ?? tintColor {
-            leftTrackLayer.backgroundColor = backgroundColor.cgColor
-        }
-
         rightTrackLayer.frame = {
             var frame = trackLayer.bounds
             frame.size.width = trackRectangle.width - leftTrackLayer.frame.width
             frame.origin.x = leftTrackLayer.frame.maxX
             return frame
         }()
-        rightTrackLayer.backgroundColor = maximumTrackTintColor.cgColor
+
+        if let backgroundColor = minimumTrackTintColor ?? tintColor {
+            leadingTrackLayer.backgroundColor = backgroundColor.cgColor
+        }
+        trailingTrackLayer.backgroundColor = maximumTrackTintColor.cgColor
     }
 
     func drawThumb() {
@@ -414,7 +429,7 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
             let thumbSizeForStyle = thumbSizeIncludingShadow()
             let thumbWidth = thumbSizeForStyle.width
             let thumbHeight = thumbSizeForStyle.height
-            let rectangle = CGRect(x:thumbAbscisse - (thumbWidth / 2),
+            let rectangle = CGRect(x:thumbAbscissa - (thumbWidth / 2),
                                    y: (frame.height - thumbHeight)/2,
                                    width: thumbWidth,
                                    height: thumbHeight)
@@ -515,11 +530,11 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
                                 width: trackSize.width,
                                 height: trackSize.height)
         let trackY = frame.height / 2
-        ticksAbscisses = []
+        ticksAbscissae = []
         for iterate in 0 ... segments {
             let ratio = Double(iterate) / Double(segments)
             let originX = trackRectangle.origin.x + (CGFloat)(trackSize.width * CGFloat(ratio))
-            ticksAbscisses.append(CGPoint(x: originX, y: trackY))
+            ticksAbscissae.append(CGPoint(x: originX, y: trackY))
         }
         layoutThumb()
 
@@ -536,7 +551,10 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
         let nonZeroIncrement = ((0 == incrementValue) ? 1 : incrementValue)
         var thumbRatio = Double(value - minimumValue) / Double(segments * nonZeroIncrement)
         thumbRatio = max(0.0, min(thumbRatio, 1.0)) // Normalized
-        thumbAbscisse = trackRectangle.origin.x + (CGFloat)(trackRectangle.width * CGFloat(thumbRatio))
+        thumbRatio = (.rightToLeft == localeCharacterDirection)
+            ? 1.0 - thumbRatio
+            : thumbRatio
+        thumbAbscissa = trackRectangle.origin.x + (CGFloat)(trackRectangle.width * CGFloat(thumbRatio))
     }
 
     func thumbSizeIncludingShadow() -> CGSize {
@@ -628,14 +646,14 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
     func touchDown(_ touches: Set<UITouch>, animationDuration duration:TimeInterval) {
         if let touch = touches.first {
             let location = touch.location(in: touch.view)
-            moveThumbTo(abscisse: location.x, animationDuration: duration)
+            moveThumbTo(abscissa: location.x, animationDuration: duration)
         }
     }
 
     func touchUp(_ touches: Set<UITouch>) {
         if let touch = touches.first {
             let location = touch.location(in: touch.view)
-            let tick = pickTickFromSliderPosition(abscisse: location.x)
+            let tick = pickTickFromSliderPosition(abscissa: location.x)
             moveThumbToTick(tick: tick)
         }
     }
@@ -665,14 +683,14 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
         setNeedsDisplay()
     }
 
-    func moveThumbTo(abscisse:CGFloat, animationDuration duration:TimeInterval) {
+    func moveThumbTo(abscissa:CGFloat, animationDuration duration:TimeInterval) {
         let leftMost = trackRectangle.minX
         let rightMost = trackRectangle.maxX
 
-        thumbAbscisse = max(leftMost, min(abscisse, rightMost))
+        thumbAbscissa = max(leftMost, min(abscissa, rightMost))
         CATransaction.setAnimationDuration(duration)
 
-        let tick = pickTickFromSliderPosition(abscisse: thumbAbscisse)
+        let tick = pickTickFromSliderPosition(abscissa: thumbAbscissa)
         let nonZeroIncrement = ((0 == incrementValue) ? 1 : incrementValue)
         let intValue = Int(minimumValue) + (Int(tick) * nonZeroIncrement)
         if intValue != self.intValue {
@@ -683,11 +701,14 @@ public class TGPDiscreteSlider:TGPSlider_INTERFACE_BUILDER {
         setNeedsDisplay()
     }
 
-    func pickTickFromSliderPosition(abscisse: CGFloat) -> UInt {
+    func pickTickFromSliderPosition(abscissa: CGFloat) -> UInt {
         let leftMost = trackRectangle.minX
         let rightMost = trackRectangle.maxX
-        let clampedAbscisse = max(leftMost, min(abscisse, rightMost))
-        let ratio = Double(clampedAbscisse - leftMost) / Double(rightMost - leftMost)
+        let clampedAbscissa = max(leftMost, min(abscissa, rightMost))
+        var ratio = Double(clampedAbscissa - leftMost) / Double(rightMost - leftMost)
+        ratio = (.rightToLeft == localeCharacterDirection)
+            ? 1.0 - ratio
+            : ratio
         let segments = max(1, tickCount - 1)
         return UInt(round( Double(segments) * ratio))
     }