HSBColorWheelPicker

Requirements

iOS 8.0

Installation

The easiest way to use HSBColorWheelPicker is with CocoaPods. Add the following line to your Podfile.

pod "HSBColorWheelPicker"

Otherwise you need to include the following files into your project:

• ColorWheel.swift
• ColorView.swift

Usage

HSBColorWheelPicker is optimized for Interface Builder and AutoLayout.

1. On the storyboard drag an UIView into a View Controller.
2. Set HSBColorWheel as class of UIView.
3. On the ViewController implmentation import the HSBColorWheelPicker framework.
4. Make a connection between HSBColorWheel view and View Controller.
5. Implement the HSBColorWheelDelegate protocol on the View Controller. Just only one method: colorWheel(_ colorWheel:HSBColorWheel, didSelectColor color:UIColor)
6. Set View Controller as delegate of HSBColorWheel view
7. Ready to use it.

Changing the UI components

You can customize the user interface changing the following values

- @IBInspectable public var colorSize:CGFloat
- @IBInspectable public var wheelDivisions:Int
- @IBInspectable public var colorSeparation:CGFloat
- @IBInspectable public var showWheelEdge:Bool
- @IBInspectable public var wheelEdgeColor:UIColor
- @IBInspectable public var wheelEdgeWidth:CGFloat
- @IBInspectable public var showDivisions:Bool
- @IBInspectable public var divisionsColor:UIColor
- @IBInspectable public var divisionsWidth:CGFloat
- @IBInspectable public var showColorEdge:UIColor
- @IBInspectable public var colorEdgeWidth:CGFloat
- @IBInspectable public var colorEdgeColor:UIColor
- @IBInspectable public var showSelectedColor:Bool

Without Interface Builder

As shown below, you can also programmatically customize HSBColorWheelPicker

let frame = CGRect(x: 0, y: 0, width: 320, height: 320)
let colorWheel = HSBColorWheel(frame: frame)
colorWheel.colorSize = 33
colorWheel.wheelDivisions = 11
colorWheel.colorSeparation = 2
colorWheel.showWheelEdge = true
colorWheel.showDivisions = true
colorWheel.showColorEdge = true

view.addSubview(colorWheel)

Default values

- colorSize = 20
- wheelDivisions = 4
- colorSeparation = 1
- showWheelEdge = false
- wheelEdgeColor = black
- wheelEdgeWidth = 1.0
- showDivisions = false
- divisionsColor = black
- divisionsWidth = 1.0
- showColorEdge = true
- colorEdgeWidth = 0.5
- colorEdgeColor = black
- showSelectedColor = true

Screenshots

Change values using Interface Builder

Color wheel with edge and division lines

Color wheel without edge and division lines

• Separation lines width: 20dp
• Separation lines color: black with 0.5 alpha

• Separation lines width: 35dp
• Separation lines color: black with 0.75 alpha

Author

Patricio Aguirre - me@patoman007.com - @patoman007

License

HSBColorWheelPicker is available under the MIT license. See the LICENSE file for more info.