Added support to Multiple Tint Colors (#35)

* Added an array of tintColors for the layer's backgrounds on the BasePageControl * Added support of the TintColors on the different PageControls * Updated README to show the usage of multiple tint colors * Added an example of how to add the colored page control
ChiliLabs · Dec 29, 2017 · 6c19bf5 · 6c19bf5
1 parent fcb3cff
commit 6c19bf5
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 38 deletions.
diff --git a/CHIPageControl/CHIPageControlAji.swift b/CHIPageControl/CHIPageControlAji.swift
@@ -68,11 +68,11 @@ open class CHIPageControlAji: CHIBasePageControl {
         active.backgroundColor = (self.currentPageTintColor ?? self.tintColor)?.cgColor
         active.frame = frame
 
-        inactive.forEach() { layer in
-            layer.backgroundColor = self.tintColor.withAlphaComponent(self.inactiveTransparency).cgColor
+        inactive.enumerated().forEach() { index, layer in
+            layer.backgroundColor = self.tintColor(position: index).withAlphaComponent(self.inactiveTransparency).cgColor
             if self.borderWidth > 0 {
                 layer.borderWidth = self.borderWidth
-                layer.borderColor = self.tintColor.cgColor
+                layer.borderColor = self.tintColor(position: index).cgColor
             }
             layer.cornerRadius = self.radius
             layer.frame = frame

diff --git a/CHIPageControl/CHIPageControlAleppo.swift b/CHIPageControl/CHIPageControlAleppo.swift
@@ -87,11 +87,11 @@ open class CHIPageControlAleppo: CHIBasePageControl {
         active.backgroundColor = (self.currentPageTintColor ?? self.tintColor)?.cgColor
         active.frame = frame
 
-        inactive.forEach() { layer in
-            layer.backgroundColor = self.tintColor.withAlphaComponent(self.inactiveTransparency).cgColor
+        inactive.enumerated().forEach() { index, layer in
+            layer.backgroundColor = self.tintColor(position: index).withAlphaComponent(self.inactiveTransparency).cgColor
             if self.borderWidth > 0 {
                 layer.borderWidth = self.borderWidth
-                layer.borderColor = self.tintColor.cgColor
+                layer.borderColor = self.tintColor(position: index).cgColor
             }
             layer.cornerRadius = self.radius
             layer.frame = frame

diff --git a/CHIPageControl/CHIPageControlChimayo.swift b/CHIPageControl/CHIPageControlChimayo.swift
@@ -67,11 +67,11 @@ open class CHIPageControlChimayo: CHIBasePageControl {
         let y = (self.bounds.size.height - self.diameter)*0.5
         var frame = CGRect(x: x, y: y, width: self.diameter, height: self.diameter)
 
-        inactive.forEach() { layer in
+        inactive.enumerated().forEach() { index, layer in
             layer.cornerRadius = self.radius
             layer.frame = frame
             frame.origin.x += self.diameter + self.padding
-            layer.backgroundColor = self.tintColor.cgColor
+            layer.backgroundColor = self.tintColor(position: index).cgColor
         }
         update(for: progress)
     }

diff --git a/CHIPageControl/CHIPageControlFresno.swift b/CHIPageControl/CHIPageControlFresno.swift
@@ -66,11 +66,11 @@ open class CHIPageControlFresno: CHIBasePageControl {
         let y = (self.bounds.size.height - self.diameter)*0.5
         var frame = CGRect(x: x, y: y, width: self.diameter, height: self.diameter)
 
-        elements.forEach() { layer in
-            layer.backgroundColor = self.tintColor.withAlphaComponent(self.inactiveTransparency).cgColor
+        elements.enumerated().forEach() { index, layer in
+            layer.backgroundColor = self.tintColor(position: index).withAlphaComponent(self.inactiveTransparency).cgColor
             if self.borderWidth > 0 {
                 layer.borderWidth = self.borderWidth
-                layer.borderColor = self.tintColor.cgColor
+                layer.borderColor = self.tintColor(position: index).cgColor
             }
             layer.cornerRadius = self.radius
             layer.frame = frame
@@ -127,12 +127,14 @@ open class CHIPageControlFresno: CHIBasePageControl {
         guard frames.indices.contains(index - 1), frames.indices.contains(index) else { return }
 
         let prev = frames[index - 1]
+        let prevColor = tintColor(position: index - 1)
         let current = frames[index]
+        let currentColor = tintColor(position: index)
 
         let elementTotal: CGFloat = current.origin.x - prev.origin.x
         let elementProgress: CGFloat = current.origin.x - active.frame.origin.x
         let elementPercent = (elementTotal - elementProgress) / elementTotal
-
+        
         // x: input, a: input min, b: input max, c: output min, d: output max
         // returns mapped value x from (a,b) to (c, d)
         let linearTransform = { (x: CGFloat, a: CGFloat, b: CGFloat, c: CGFloat, d: CGFloat) -> CGFloat in
@@ -141,6 +143,7 @@ open class CHIPageControlFresno: CHIBasePageControl {
 
         element.frame = prev
         element.frame.origin.x = linearTransform(elementPercent, 1.0, 0.0, prev.origin.x, current.origin.x)
+        element.backgroundColor = blend(color1: currentColor, color2: prevColor, progress: elementPercent).withAlphaComponent(self.inactiveTransparency).cgColor
 
         if elementPercent <= 0.5 {
             let originY = linearTransform(elementPercent, 0.0, 0.5, 0, self.radius + self.padding)

diff --git a/CHIPageControl/CHIPageControlJalapeno.swift b/CHIPageControl/CHIPageControlJalapeno.swift
@@ -129,11 +129,11 @@ open class CHIPageControlJalapeno: CHIBasePageControl {
         let y = (self.bounds.size.height - self.diameter)*0.5
         var frame = CGRect(x: x, y: y, width: self.diameter, height: self.diameter)
 
-        inactive.forEach() { layer in
-            layer.backgroundColor = self.tintColor.withAlphaComponent(self.inactiveTransparency).cgColor
+        inactive.enumerated().forEach() { index, layer in
+            layer.backgroundColor = self.tintColor(position: index).withAlphaComponent(self.inactiveTransparency).cgColor
             if self.borderWidth > 0 {
                 layer.borderWidth = self.borderWidth
-                layer.borderColor = self.tintColor.cgColor
+                layer.borderColor = self.tintColor(position: index).cgColor
             }
             layer.cornerRadius = self.radius
             layer.frame = frame

diff --git a/CHIPageControl/CHIPageControlJaloro.swift b/CHIPageControl/CHIPageControlJaloro.swift
@@ -77,11 +77,11 @@ open class CHIPageControlJaloro: CHIBasePageControl {
         active.backgroundColor = (self.currentPageTintColor ?? self.tintColor)?.cgColor
         active.frame = frame
 
-        inactive.forEach() { layer in
-            layer.backgroundColor = self.tintColor.withAlphaComponent(self.inactiveTransparency).cgColor
+        inactive.enumerated().forEach() { index, layer in
+            layer.backgroundColor = self.tintColor(position: index).withAlphaComponent(self.inactiveTransparency).cgColor
             if self.borderWidth > 0 {
                 layer.borderWidth = self.borderWidth
-                layer.borderColor = self.tintColor.cgColor
+                layer.borderColor = self.tintColor(position: index).cgColor
             }
             layer.cornerRadius = self.radius
             layer.frame = frame

diff --git a/CHIPageControl/CHIPageControlPaprika.swift b/CHIPageControl/CHIPageControlPaprika.swift
@@ -68,11 +68,11 @@ open class CHIPageControlPaprika: CHIBasePageControl {
         let y = (self.bounds.size.height - self.diameter)*0.5
         var frame = CGRect(x: x, y: y, width: self.diameter, height: self.diameter)
 
-        elements.forEach() { layer in
-            layer.backgroundColor = self.tintColor.withAlphaComponent(self.inactiveTransparency).cgColor
+        elements.enumerated().forEach() { index, layer in
+            layer.backgroundColor = self.tintColor(position: index).withAlphaComponent(self.inactiveTransparency).cgColor
             if self.borderWidth > 0 {
                 layer.borderWidth = self.borderWidth
-                layer.borderColor = self.tintColor.cgColor
+                layer.borderColor = self.tintColor(position: index).cgColor
             }
             layer.cornerRadius = self.radius
             layer.frame = frame
@@ -139,9 +139,17 @@ open class CHIPageControlPaprika: CHIBasePageControl {
         guard frames.indices.contains(page), frames.indices.contains(page + 1) else { return }
 
         let prev = frames[page]
+        let prevColor = tintColor(position: page)
         let current = frames[page + 1]
+        let currentColor = tintColor(position: page + 1)
+
+        let elementTotal: CGFloat = current.origin.x - prev.origin.x
+        let elementProgress: CGFloat = current.origin.x - active.frame.origin.x
+        let elementPercent = (elementTotal - elementProgress) / elementTotal
+
+        element.borderColor = blend(color1: currentColor, color2: prevColor, progress: elementPercent).cgColor
         element.frame = prev
-        element.frame.origin.x += current.origin.x - active.frame.origin.x
+        element.frame.origin.x += elementProgress
         element.frame.origin.y = 2*min.origin.y - active.frame.origin.y
     }
 

diff --git a/CHIPageControl/CHIPageControlPuya.swift b/CHIPageControl/CHIPageControlPuya.swift
@@ -66,11 +66,11 @@ open class CHIPageControlPuya: CHIBasePageControl {
         let y = (self.bounds.size.height - self.diameter)*0.5
         var frame = CGRect(x: x, y: y, width: self.diameter, height: self.diameter)
 
-        elements.forEach() { layer in
-            layer.backgroundColor = self.tintColor.withAlphaComponent(self.inactiveTransparency).cgColor
+        elements.enumerated().forEach() { index, layer in
+            layer.backgroundColor = self.tintColor(position: index).withAlphaComponent(self.inactiveTransparency).cgColor
             if self.borderWidth > 0 {
                 layer.borderWidth = self.borderWidth
-                layer.borderColor = self.tintColor.cgColor
+                layer.borderColor = self.tintColor(position: index).cgColor
             }
             layer.cornerRadius = self.radius
             layer.frame = frame
@@ -121,9 +121,17 @@ open class CHIPageControlPuya: CHIBasePageControl {
         guard frames.indices.contains(page), frames.indices.contains(page + 1) else { return }
 
         let prev = frames[page]
+        let prevColor = tintColor(position: page)
         let current = frames[page + 1]
+        let currentColor = tintColor(position: page + 1)
+
+        let elementTotal: CGFloat = current.origin.x - prev.origin.x
+        let elementProgress: CGFloat = current.origin.x - active.frame.origin.x
+        let elementPercent = (elementTotal - elementProgress) / elementTotal
+
+        element.backgroundColor = blend(color1: currentColor, color2: prevColor, progress: elementPercent).withAlphaComponent(self.inactiveTransparency).cgColor
         element.frame = prev
-        element.frame.origin.x += current.origin.x - active.frame.origin.x
+        element.frame.origin.x += elementProgress
     }
 
     override open var intrinsicContentSize: CGSize {

diff --git a/CHIPageControl/Core/CHIBasePageControl.swift b/CHIPageControl/Core/CHIBasePageControl.swift
@@ -29,6 +29,7 @@ import UIKit
 
     @IBInspectable open var numberOfPages: Int = 0 {
         didSet {
+            populateTintColors()
             updateNumberOfPages(numberOfPages)
             self.isHidden = hidesForSinglePage && numberOfPages <= 1
         }
@@ -83,6 +84,15 @@ import UIKit
             setNeedsLayout()
         }
     }
+
+    open var tintColors: [UIColor] = [] {
+        didSet {
+            guard tintColors.count == numberOfPages else {
+                fatalError("The number of tint colors needs to be the same as the number of page")
+            }
+            setNeedsLayout()
+        }
+    }
 
     @IBInspectable open var currentPageTintColor: UIColor? {
         didSet {
@@ -122,6 +132,35 @@ import UIKit
         }
     }
 
+    func tintColor(position: Int) -> UIColor {
+        if tintColors.count < numberOfPages {
+            return tintColor
+        } else {
+            return tintColors[position]
+        }
+    }
+
+    open func insertTintColor(_ color: UIColor, position: Int) {
+        if tintColors.count < numberOfPages {
+            setupTintColors()
+        }
+        tintColors[position] = color
+    }
+
+    private func setupTintColors() {
+        tintColors = Array<UIColor>(repeating: tintColor, count: numberOfPages)
+    }
+
+    private func populateTintColors() {
+        guard tintColors.count > 0 else { return }
+
+        if tintColors.count > numberOfPages {
+            tintColors = Array(tintColors.prefix(numberOfPages))
+        } else if tintColors.count < numberOfPages {
+            tintColors.append(contentsOf: Array<UIColor>(repeating: tintColor, count: numberOfPages - tintColors.count))
+        }
+    }
+
     func animate() {
         guard let moveToProgress = self.moveToProgress else { return }
 
@@ -159,3 +198,17 @@ import UIKit
         fatalError("Should be implemented in child class")
     }
 }
+
+extension CHIBasePageControl {
+    internal func blend(color1: UIColor, color2: UIColor, progress: CGFloat) -> UIColor {
+        let l1 = 1 - progress
+        let l2 = progress
+        var (r1, g1, b1, a1): (CGFloat, CGFloat, CGFloat, CGFloat) = (0, 0, 0, 0)
+        var (r2, g2, b2, a2): (CGFloat, CGFloat, CGFloat, CGFloat) = (0, 0, 0, 0)
+
+        color1.getRed(&r1, green: &g1, blue: &b1, alpha: &a1)
+        color2.getRed(&r2, green: &g2, blue: &b2, alpha: &a2)
+
+        return UIColor(red: l1*r1 + l2*r2, green: l1*g1 + l2*g2, blue: l1*b1 + l2*b2, alpha: l1*a1 + l2*a2)
+    }
+}
diff --git a/Example/Example/Assets.xcassets/AppIcon.appiconset/Contents.json b/Example/Example/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -1,5 +1,15 @@
 {
   "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
     {
       "idiom" : "iphone",
       "size" : "29x29",
@@ -29,6 +39,11 @@
       "idiom" : "iphone",
       "size" : "60x60",
       "scale" : "3x"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "size" : "1024x1024",
+      "scale" : "1x"
     }
   ],
   "info" : {