Search code examples
swiftinstance-variablesuicolorpaintcode

How to use color variable with PaintCode & Xcode


I have an Icon drawn via PaintCode. I need to change his color in XCode, programmatically.

On PaintCode, I set a Variable "ChevronColor" to the Stroke Color.

enter image description here

enter image description here

For now I have:

@IBDesignable

class IconClass: UIView {

    override func draw(_ rect: CGRect) {
        StyleKit.drawIcon(frame: self.bounds, resizing: .aspectFit)
    }
}

But I would like to add kind of this, to be able to set the color of the icon.

 @IBInspectable
     var ChevronColor : UIColor {
         didSet (newColor) {
             setNeedsDisplay()
    }
}

I don't know how to do.

After exporting the StyleKit file, I excepted to have this method available in the stylekit file, but it's not the case:

StyleKit.drawIcon(frame:  self.bounds, resizing: .aspectFit, chevronColor: self.ChevronColor)

Solution

  • TL/DR

    Create an expression that takes red, green, blue, alpha (external parameters in PaintCode) and generates a color (makeColor function in PaintCode). The generated color is then assigned to the Stroke, Fill, whatever, via that expression.

    PaintCode

    PaintCode

    Custom View

    import Foundation
    import UIKit
    
    @IBDesignable class TreeView: UIView {
    
        /*
         *
         * Notice - supported range for colors and alpha: 0 to 1.
         * Color 0.808, 0.808, 0.808 = gray (starting color in this example).
         *
        */
    
        @IBInspectable var redColor: CGFloat = 0.808 {
            didSet {
                setNeedsDisplay()
            }
        }
    
        @IBInspectable var greenColor: CGFloat = 0.808 {
            didSet {
                setNeedsDisplay()
            }
        }
    
        @IBInspectable var blueColor: CGFloat = 0.808 {
            didSet {
                setNeedsDisplay()
            }
        }
    
        @IBInspectable var alphaColor: CGFloat = 1 {
            didSet {
                setNeedsDisplay()
            }
        }
    
        override func draw(_ rect: CGRect) {
            StyleKit.drawTreeIcon(frame: rect,
                                  resizing: .aspectFit,
                                  red: redColor,
                                  green: greenColor,
                                  blue: blueColor,
                                  alpha: alphaColor)
        }
    }
    

    Changing color example

    @IBAction func colorButtonPressed(_ sender: UIButton) {
        // Get color references.
        let red = CIColor(color: sender.backgroundColor!).red
        let green = CIColor(color: sender.backgroundColor!).green
        let blue = CIColor(color: sender.backgroundColor!).blue
        let alpha = CIColor(color: sender.backgroundColor!).alpha
    
        // Update the PaintCode generated icon.
        treeView.redColor = red
        treeView.greenColor = green
        treeView.blueColor = blue
        treeView.alpha = alpha
    }
    

    Demo

    Example

    Reference

    The project can be cloned from my GitHub repo.

    Also take a look at the PaintCode Expression Language guide.