CODEWITHSUNDEEP
swiftinstance-variablesuicolorpaintcode
cmii
cmii

Reputation: 3636

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)

Upvotes: 4

Views: 1366

Answers (2)

Will
Will

Reputation: 91

enter image description here

Just edit color in Colors section access level to Parameter.

Upvotes: 5

backslash-f
backslash-f

Reputation: 8193

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.

Upvotes: 6

Related Questions