Using Chameleon in your Swift App

Chameleon is a Flat Color Framework for iOS using either Obj-C or Swift. In this tutorial I am going to walk you through the process of installing the CocoaPod, adding a basic flat color and adding a gradient. According to their GitHub:

Chameleon is a lightweight, yet powerful, color framework for iOS (Objective-C & Swift). It is built on the idea that software applications should function effortlessly while simultaneously maintaining their beautiful interfaces.
With Chameleon, you can easily stop tinkering with RGB values, wasting hours figuring out the right color combinations to use in your app, and worrying about whether your text will be readable on the various background colors of your app.

https://github.com/ViccAlexander/Chameleon

Step 1: Installing the CocoaPod

The easiest way to add Chameleon to your app is to use CocoaPods. If you have not installed CocoaPods into your app please follow this link, https://cocoapods.org/.

Once your pod file is installed, add the following code to your pod file then run pod update in terminal.

# Uncomment this line to define a global platform for your project
inhibit_all_warnings!
use_frameworks!
target ‘APPName’ do
pod ‘ChameleonFramework/Swift’
end
target ‘APPName’ do
end

Now that we have the pod installed, we can start using it in our View Controller.

Step 2: Using Chameleon inside your View Controller

At the top of your View Controller you will need to import the Chameleon framework.

import ChameleonFramework
class ViewController: ViewController {

Using flat colors is as easy as using any UIColor option. To add a flat color to an object (in our case we will change the view background) all you need to do is type in the following code in:

override func viewDidLoad() {
super.viewDidLoad()
//Conventional
view.backgroundColor = UIColor.flatPurpleColor
   //Shorthand
view.backgroundColor = FlatPurple()
}

There are two ways to use the flat colors, Conventional or Shorthand. Both of these options will produce the same result so the choice is yours. You can also turn the stock colors into flat colors by:

view.backgroundColor = UIColor.purpleColor().flatten()

And thats it! You have just doubled your color options.

Step 3: Using Gradients

Now that you have the flat colors dialed in, we can now move to using Gradients. With just 2 lines of code, Gradients are just as easy.

let colors:[UIColor] = [
UIColor.flatPurpleColorDark(),
UIColor.flatWhiteColor()
]
view.backgroundColor = GradientColor(.TopToBottom, frame: view.frame, colors: colors)

In order to use the Gradients we will need at least 2 colors. In the first section we create an array of UIColors with the name “colors”. This is where we add the colors we would like to use for the gradient, in this case we used Dark Purple and White.

The next bit of code is where we set the gradient. Similar to the above code, we will change the background color of the view. We set the background color to the GradientColor function which includes the gradient style, frame, and colors used. The gradient style sets the way the colors blend such as TopToBottom, LeftToRight, and Radial. The frame is where we set the size of the gradient which in our case is the whole view. The colors option is where we set the colors that we want to use, this is where we add our array.

You did it! With just 2 bits of code you will be able to add a gradient to any object.

I hope you found this tutorial helpful. ViccAlexander did a great job of providing instructions on all of the different features. If you have any questions please leave a response.

Thanks and happy coding!
LP

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.