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:
- 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])
- Same as above, it also takes CCGradient type which coule be "axial","radial", or "conic"
let configWithColorsAndType = CCGradientConfiguration(colors: [UIColors],
type: CCGradientType)
- 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])
- 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])
- 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)
- Same as above, it takes locations array too.
let configWithColorsAndDirectionAndLocations = CCGradientConfiguration(colors: [UIColor],
direction: CCGradientDirection,
locations: [CGFloat])
Adding the view
- 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 changeModule
to beCCGradient
. You can add the view from the code too. Just callCCGradientView
sinit(frame: CGRect)
. - 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.
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.
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 inCCGradientColors.swift
, so if you useCCGradientColors.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.