Code Monkey home page Code Monkey logo

pikko's Introduction

Pikko - iOS color picker made with ❤️

CI Status Version License Platform

Demo of pikko color picker

Pikko is a simple and beautiful color picker for iOS. It's inspired by conventional color pickers from popular graphics tools such as Photoshop, Paint Tool Sai, Procreate and many others. Pikko allows the selection of hue, saturation and brightness in a more pleasant way than boring sliders.

Feel free to use, modify and improve. ✌️

Quickstart

To run the example project, clone the repo, and run pod install from the Example directory first.

Initializing Pikko programmatically, without autoconstraints

You can intialize a new color picker in the following way:

// Initialize a new Pikko instance with width and height set to 300, and initialized to blue.
let pikko = Pikko(dimension: 300, setToColor: .blue)

Make sure to set the Pikko delegate to get updates on color changes:

// Set the PikkoDelegate to get notified on new color changes.
pikko.delegate = self

Positioning Pikko:

// Set Pikko center and add it to the main view.
pikko.center = self.view.center
self.view.addSubview(pikko)

Manually getting a color from Pikko and setting a color:

// Getting Pikko color.
let color = pikko.getColor()

// Setting Pikko to a specific color.
pikko.setColor(.blue)

Initializing Pikko programmatically, with autoconstraints

// Initialize a new Pikko instance.
let pikko = Pikko(dimension: 300, setToColor: .purple)

// Set the PikkoDelegate to get notified on new color changes.
pikko.delegate = self

// Set Pikko center and add it to the main view.
self.view.addSubview(pikko)

// Get the current color.
_ = pikko.getColor()

// Set autoconstraints.
pikko.translatesAutoresizingMaskIntoConstraints = false
pikko.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
pikko.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: -200).isActive = true

Initializing Pikko via Storyboard

Add a UIView to your Storyboard, then simply select Pikko as the class. You can add autoconstraints in the interface builder normally as you would with any other view.

NOTE: If you're using Pikko in the storyboard, you have to set the delegate and color in the viewDidAppear or viewWillAppear methods.

@IBOutlet weak var PikkoView: Pikko!

/// If you add Pikko via interface builder and you want to set
/// a color on your picker or set the delegate, make sure to 
/// call it from this method, NOT the viewDidLoad.
override func viewDidAppear(_ animated: Bool) {
    PikkoView.delegate = self
    PikkoView.setColor(.purple)
}

Note

Regardless how you are initializing Pikko, you will have to implement the PikkoDelegate protocol accordingly, which will look like something along these lines:

class ViewController: UIViewController, PikkoDelegate {
...

// Delegate method that lets you get updates on the currently
// selected color.
func writeBackColor(color: UIColor) {
    // TODO: Handle received color. 
}

Installation

CocoaPods

Pikko is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'Pikko'

Swift Package Manager

You can also install Pikko via the Swift Package Manager. For this, follow the Apple tutorial on how to add custom packages, with this repository link as the package Git URL:

https://github.com/melloskitten/pikko

Authors

Sandra, [email protected]

Johannes, [email protected]

License

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

pikko's People

Contributors

alinradut avatar gbuela avatar johannesrohwer avatar melloskitten avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.