https://github.com/cjcoax/ccgradientview
Lightweight, easy to use Gradient view for iOS
https://github.com/cjcoax/ccgradientview
calayer cocoapods color color-wheel dribbble gradient ios swift uikit uiview xcode
Last synced: 29 days ago
JSON representation
Lightweight, easy to use Gradient view for iOS
- Host: GitHub
- URL: https://github.com/cjcoax/ccgradientview
- Owner: cjcoax
- License: mit
- Created: 2019-06-01T02:50:40.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-05T17:39:45.000Z (almost 7 years ago)
- Last Synced: 2025-11-12T00:21:32.619Z (4 months ago)
- Topics: calayer, cocoapods, color, color-wheel, dribbble, gradient, ios, swift, uikit, uiview, xcode
- Language: Swift
- Homepage:
- Size: 110 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Lightweight, easy to use Gradient view backed by GPU powered CoreAnimation's Layer, with [380+ built-in gradient colors, mostly ported from uigradients.](https://uigradients.com/)
## 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
```swift
let configWithColors = CCGradientConfiguration(colors: [UIColors])
```
2. Same as above, it also takes CCGradient type which coule be "axial","radial", or "conic"
```swift
let configWithColorsAndType = CCGradientConfiguration(colors: [UIColors],
type: CCGradientType)
```
3. 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%.
```swift
let configWithColorsAndTypeAndLocations = CCGradientConfiguration(colors: [UIColor],
type: CCGradientType,
locations: [CGFloat])
```
4. 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).
```swift
let configWithColorsAndTypeAndLocationsAndPoints = CCGradientConfiguration(colors: [UIColor],
type: CCGradientType ,
locations: [CGFloat],
points: [CGPoint])
```
5. Uses array of colors, plus `CCGradientDirection` which is one of the followings:
```swift
public enum CCGradientDirection {
case topToBottom
case leftToRight
case rightToLeft
case bottomToTop
case growFromCenter
case shrinkToCenter
}
```
and intialize CCGradientConfiguration using it.
```swift
let configWithColorsAndDirection = CCGradientConfiguration(colors: [UIColors],
direction: CCGradientDirection)
```
6. Same as above, it takes locations array too.
```swift
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 `CCGradientView`s `init(frame: CGRect)`.
2. Set `CCGradientView`'s configuration and implement the only configuration's method.
```swift
func configurationForGradientView(_ gradientView: CCGradientView) -> CCGradientConfiguration
```
Here is a complete example.
```swift
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](https://github.com/Ghosh/uiGradients).
You can see most of the colors in here: [https://uigradients.com](https://uigradients.com)
Credit to [Ghosh](https://github.com/Ghosh)
To use one of the ready gradient colors, you only need to [create a configuration](#create-configuration). For the color array you need to pass in one of the ready colors from `CCGradientColors`
```swift
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.
```swift
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.
```swift
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
```ruby
target 'MyApp' do
pod 'CCGradient', '~> 1.0'
end
```
and import `CCGradient` when you want to use CCGradientView.
```swift
import CCGradient
```
## In Progress
* Ability to animate gradient locations and colors.
* More ready to use colors to come.
## License
[MIT License](http://opensource.org/licenses/mit-license.php).