CCGradient 1.0.2

CCGradient 1.0.2

×

Maintained by Amir Rezvani.

CCGradient 1.0.2

  • By
  • Amir Rezvani

CCGradient

Lightweight, easy to use Gradient view backed by GPU powered CoreAnimation's Layer, with 380+ built-in gradient colors, mostly ported from uigradients.

Usage

Create configuration

CCGradientView uses CCGradientViewConfiguration to configure

  • Colors.
  • Type (axial, conic, radial).
  • Locations: location of each color in gradient.
  • Points: starting and ending point at which each color starts and ends.

You can create configuration object using one the following ways:

  1. Only uses colors, it'll automatically adjust "Locations" and "Points" based on number of colors. Default type will be axial
let configWithColors = CCGradientConfiguration(colors: [UIColors])

  1. Same as above, it also takes CCGradient type which coule be "axial","radial", or "conic"
let configWithColorsAndType = CCGradientConfiguration(colors: [UIColors],
                                                      type: CCGradientType)

  1. Same as above, it also takes locations which indicates area covered by each color. Each number on the array could be between 0 to 1, e.g. a gradient with two colors and locations = [0.25, 0.75] renders a gradient that has two colors, one of them covers 25% of view, the other 75%.
let configWithColorsAndTypeAndLocations = CCGradientConfiguration(colors: [UIColor],
                                                                  type: CCGradientType,
                                                                  locations: [CGFloat])

  1. Same as above, it takes points array in addition to other parameters. This array needs to have two CGPoints and defined in a unit coordinate space (between [0,0] bottom left, [1,1] top right).
let configWithColorsAndTypeAndLocationsAndPoints = CCGradientConfiguration(colors: [UIColor],
                                                                           type: CCGradientType ,
                                                                           locations: [CGFloat],
                                                                           points: [CGPoint])

  1. Uses array of colors, plus CCGradientDirection which is one of the followings:
public enum CCGradientDirection {
    case topToBottom
    case leftToRight
    case rightToLeft
    case bottomToTop
    case growFromCenter
    case shrinkToCenter
}

and intialize CCGradientConfiguration using it.

let configWithColorsAndDirection = CCGradientConfiguration(colors: [UIColors], 
                                                           direction: CCGradientDirection)

  1. Same as above, it takes locations array too.
let configWithColorsAndDirectionAndLocations = CCGradientConfiguration(colors: [UIColor],
                                                                       direction: CCGradientDirection,
                                                                       locations: [CGFloat])

Adding the view

  1. Add a UIView to your scene in storyboard, change its class to be CCGradientView. Depending on how you've integrated it, you might need to change Module to be CCGradient. You can add the view from the code too. Just call CCGradientViews init(frame: CGRect).
  2. Set CCGradientView's configuration and implement the only configuration's method.

func configurationForGradientView(_ gradientView: CCGradientView) -> CCGradientConfiguration

Here is a complete example.

class ViewController: UIViewController {
    @IBOutlet weak var gradientView: CCGradientView!

    override func viewDidLoad() {
        super.viewDidLoad()
        //set configuration to be self
        gradientView.configuration = self
    }
}
extension ViewController: CCGradientViewConfiguration {    
    func configurationForGradientView(_ gradientView: CCGradientView) -> CCGradientConfiguration {
        return CCGradientConfiguration(colors: CCGradientColors.Instagram,
                                       direction: .rightToLeft)
    }
}

Ready to use Gradient colors

CCGradient has 380+ ready to use gradients built in. They are ported from https://github.com/Ghosh/uiGradients. You can see most of the colors in here: https://uigradients.com Credit to Ghosh

To use one of the ready gradient colors, you only need to create a configuration. For the color array you need to pass in one of the ready colors from CCGradientColors

let configuration = CCGradientConfiguration(colors: CCGradientColors.MoonPurple)

Again, you can see most of the gradient colors in here: https://uigradients.com

Getting creative

You can play with configuration and get things like color wheel.

color-wheel 

CCGradientConfiguration(colors: CCGradientColors.ColorWheel,
                        type: CCGradientType.conic,
                        points: [CGPoint(x: 0.5, y: 0.5),
                        CGPoint(x: 1, y: 1)])

Or you can mask gradient views to get effects like following.

pride 

class ViewController: UIViewController {
    @IBOutlet weak var gradientView: CCGradientView!
    @IBOutlet weak var label: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        gradientView.mask = label
        gradientView.configuration = self
    }
}

extension ViewController: CCGradientViewConfiguration {
    func configurationForGradientView(_ gradientView: CCGradientView) -> CCGradientConfiguration {
        return CCGradientConfiguration(colors: CCGradientColors.LGBT)
    }
}

Installation

Manual

You can drag and drop necessary files under Sources folder into your project.

  • CCGradientView.swift - Mandatory

  • CCGradientConfiguration.swift - Mandatory

  • CCGradientColors.swift - Optional, it contains all builtin gradient colors

  • CCColors.swift - Optional, it contains CSS color names and is used in CCGradientColors.swift, so if you use CCGradientColors.swift you need this file too.

Cocoapods

target 'MyApp' do
pod 'CCGradient', '~> 1.0'
end

and import CCGradient when you want to use CCGradientView.

import CCGradient

In Progress

  • Ability to animate gradient locations and colors.
  • More ready to use colors to come.

License

MIT License.