FlexColorPicker

For more flexibility than the DefaultColorPickerViewController, you can build a custom picker by manually selecting and arranging ColorControls.

Core Components

• Color Controls: UIViews (usually subclassing UIControl) that allow users to pick colors (e.g., sliders, palettes).
• Color Picker Controllers: Objects that manage and synchronize multiple color controls so they all reflect the same selected color.

Implementation Approaches

1. Custom Layout: Choose specific controls (like RadialPaletteControl or RedSliderControl) and arrange them in your own view hierarchy.
2. Custom Look/Behavior: Implement the ColorControl protocol or subclass existing controls to change how they appear or react to input.
3. Combined: Use custom controls within a custom layout.

Add the following line to your Podfile:

pod 'FlexColorPicker'

To test the library using the included Demo project, run:

pod try FlexColorPicker

1. In your Storyboard, set the Class of your view controller to DefaultColorPickerViewController using the Identity Inspector under Custom Class.
2. Customize the controller using properties available in the Attributes Inspector.
3. Set the delegate in code (e.g., in prepare(for:sender:)) because the delegate cannot be set directly in Storyboard:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if let destinationColorPicker = segue.destination as? ColorPickerControllerProtocol {
        destinationColorPicker.delegate = self
    }
}

To make multiple controls work together, they must be connected to a ColorPickerController (or its convenience wrapper CustomColorPickerViewController). When connected, selecting a color in one control automatically updates all other controls managed by that same controller.

Using Storyboard

1. Lay out your controls in the storyboard.
2. Set the class of each control in the Identity Inspector (e.g., set to RadialPaletteControl).
3. Set the controller's class to CustomColorPickerViewController.
4. Open the Connection Inspector and connect the control outlets to your laid-out views.

Using Code

If you cannot subclass CustomColorPickerViewController (e.g., due to existing inheritance), use ColorPickerController directly. You can add controls programmatically using:

colorPickerController.addControl(yourCustomControl)

To add FlexColorPicker to your Xcode project using SPM:

1. In Xcode 11+, go to File → Swift Packages → Add Package Dependency....
2. Enter the repository URL: https://github.com/RastislavMirek/FlexColorPicker.
3. Set your version preference and confirm.

If you are using a Package.swift file, add the following dependency:

dependencies: [
    .package(url: "https://github.com/RastislavMirek/FlexColorPicker.git", from: "1.3.1")
]

If you are not using SPM or Cocoapods:

1. Clone the repository:

   git clone https://github.com/RastislavMirek/FlexColorPicker

   Or download the latest release ZIP from GitHub releases.
2. Open the project in Xcode and compile the FlexColorPicker target.
3. Locate the FlexColorPicker.framework in the Products directory.
4. In your own project, select your application target, go to the General tab, and add FlexColorPicker.framework under the Embedded Binaries section.

You can instantiate and present the color picker programmatically.

To push onto a Navigation Controller:

let colorPickerController = DefaultColorPickerViewController()
colorPickerController.delegate = self
navigationController?.pushViewController(colorPickerController, animated: true)

To present Modally:

let colorPickerController = DefaultColorPickerViewController()
colorPickerController.delegate = self
let navigationController = UINavigationController(rootViewController: colorPickerController)
present(navigationController, animated: true, completion: nil)

The ColorPreviewWithHex control can be tapped to trigger a selection event. When tapped, the ColorPickerController calls ColorPickerDelegate.colorPicker(_:selectedColor:usingControl:) on its delegate.

To disable this behavior, set the tapToConfirm property to false:

colorPreviewControl.tapToConfirm = false

By default, the picker uses a radial hue-saturation palette. You can switch to a rectangular palette by setting useRadialPalette to false on the DefaultColorPickerViewController instance.

When using a rectangular palette, you can also configure:

• rectangularPaletteBorderOn
• rectangularPaletteHueHorizontalInPortrait
• rectangularPaletteHueHorizontalInLandscape

Refer to the in-code documentation for specific property details.

colorPickerController.useRadialPalette = false

You can extend the library's functionality by implementing the ColorControl protocol or subclassing specific base classes:

Recommended Subclasses

• AbstractColorControl: The base class for all controls. Always subclass this if possible.
• AdjustedHitBoxColorControl: Provides an extended hit box margin around the control.
• ColorSliderControl: Use this if you need sliders for color models other than HSB or RGB.
• ColorPaletteControl: Use this to create entirely new types of color palettes.

Using Delegates for Customization

Instead of subclassing ColorSliderControl or ColorPaletteControl, you can often achieve the desired look and behavior by implementing their respective delegates:

• ColorSliderDelegate
• ColorPaletteDelegate