Create gradients and blur gradients without a single line of code

Shashank Pali

Last update: Dec 6, 2022

Related tags

Graphics EZYGradientView

Overview

EZYGradientView is a different and unique take on creating gradients and gradients with blur on the iOS platform. The default CAGradientLayer implementation works just fine, but is confusing and gives different results than expected. From the documentation:

The start point corresponds to the first stop of the gradient. The point is defined in the unit coordinate space and is then mapped to the layer’s bounds rectangle when drawn.

It's not really clear what the mapped values for the start and end points will be. If we set the start x coordinate 0.2, it does not resolve to 0.2 of the view's width on the X-axis.

This library attempts to create gradients intuitively. When you use EZYGradientView, you don't need to worry about Apple's default API. What you do need to concern yourself with is:

What your colors are
The angle of the gradient
The ratio in which the two colors are distributed; and finally...
The intensity with which the colors are dispersed

EZYGradientView exposes five properties you can modify to customize your gradient. The view itself is IBDesignable and its properties IBInspectable which means you can customize your gradient in real time on an xib or storyboard.

Pod Installation

CocoaPods is the preferred way to install this library. Add this command to your Podfile:

pod 'EZYGradientView', :git => 'https://github.com/Niphery/EZYGradientView'

###For Objective C

Direct Installation

Download .zip file and extract it. There you will find the EZYGradientView folder, copy EZYGradientView.swift to your respective project.

Integration Methods

Storyboard/Xib

Just follow these simple steps and create a gradient inside your xib or storyboard!

Initial Step (Use this step if downloaded by pod)

while assigning EZYGradientView to UIView on StoryBoard/Xib don't forget to select module

Step	Description

	It will reflect warning if module is not selected.

Step 1 - Select colors

Step	Description

Step 2 - Set gradient angle

Step	Description
	Default is 0º.
	At 45º.
	At 135º.

Step 3 - Set color ratio

Step	Description
	Default is 0.5, that's why colors are equally divided. Valid range 0 to 1.
	At 0.1, the first color takes one-tenth of the view area. The rest is filled by the second.
	At 0.9, the first color takes nine-tenths of the view area. The rest is filled by the second.

Step 4 - Set fade intensity

Step	Description
	Default is 0, that's why there is a sharp boundary where the two colors meet. Valid range 0 to 1.
	At 0.5, there is a much smoother transition between the two colors.
	At 1, the maximum transition smoothness is achieved.

Step 5 - Set isBlur and blur opacity

######(This feature is available for ios 8 and above)

Step	Description
	Default is 0, where the blur transparency is minimmum. Valid range 0 to 1.
	At 1.0, where the blur transparency is maximum.(The black spot is a label behind gradient view)
Suggestion	Use this properties to design `navigationBar`, `tabBar`, `tableHeaderView` etc.

Programmatic way

let gradientView = EZYGradientView()
    gradientView.frame = view.bounds
    gradientView.firstColor = UIColor(red: 0.5, green: 0.0, blue: 1.0, alpha: 1.0)
    gradientView.secondColor = UIColor(red: 0.4, green: 1.0, blue: 0.8, alpha: 1.0)
    gradientView.angleº = 185.0
    gradientView.colorRatio = 0.5
    gradientView.fadeIntensity = 1
    gradientView.isBlur = true
    gradientView.blurOpacity = 0.5
    
    view.insertSubview(gradientView, at: 0)

To-do

Allow more than two colors to create gradients.
It may crash if blur properties used in lower version than ios 8.
Use CoreGraphics blur to replace UIVisualEffectView.

Thanks

To Sudeep Jaiswal for motivating and special thanks for the documentation and ideas.
To Angela Yu for the updated courses on iOS 13 & Swift 5.

License

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

Comments

Exposing gradientLayer property

Is it possible to expose gradientLayer property so we can customize it? For example, I need to add a corner radius on EZYGradientView, but I need to set it on gradientLayer which is not exposed.

opened by vburojevic 3
Doesn't update on changing properties

I added a gradient view on storyboard and made an outlet. I didn't use IBInspectable to customize it. I did it in viewDidLoad and it worked. Then I tried changing the firstColor property on a button tap and it didn't work.

opened by sdpjswl 2
Any similar library for Android?

Hi @shashankpali,

First I would like to appreciate for building such nice, cool library.

Have you come across any similar library for Android platform as well? I have searched a lot but could not found a similar one.

Thanks Pranav

opened by prscX 0
Gradient partially not working

I have a view with a gradient view inside, that looks like this:

However, I'm seeing this result only after opening the view controller twice.
When first opening the vc, I see this:

Any idea why this happens?
Also, is there any like redraw() method or something, so that I could refresh the gradient manually after the view appeared?

Update

So it seems the issue occurs when embedding the EZYGradientView inside another view and setting the constraints to leading, trailing, top, and bottom equal to superview.*.
I was able to resolve the issue by specifying a fixed with for the gradient view itself.

opened by LinusGeffarth 1
Added Support for React Native Projects

Hi @shashankpali

First of all I would like to appreciate for creating such a nice, cool library

I have created a React Native bridge plugin for using this library with React Native projects

I have added the same in README. Can you please merge this request so that if someone is looking to use this library for React Native projects can easily do the same

Please let me know in case any changes are required

react-native-gradient-blur-view

Thanks Pranav

opened by prscX 0

Create gradients and blur gradients without a single line of code

Related tags

Overview

Pod Installation

Direct Installation

Integration Methods

Storyboard/Xib

Initial Step (Use this step if downloaded by pod)

while assigning EZYGradientView to UIView on StoryBoard/Xib don't forget to select module

Step 1 - Select colors

Step 2 - Set gradient angle

Step 3 - Set color ratio

Step 4 - Set fade intensity

Step 5 - Set isBlur and blur opacity

Programmatic way

To-do

Thanks

License

Comments

Exposing gradientLayer property

Doesn't update on changing properties

Any similar library for Android?

Gradient partially not working

Update

Added Support for React Native Projects

Owner

Shashank Pali

The code for my CoreGraphics+CoreAnimation talk, held during the 2012 iOS Game Design Seminar at the Technical University Munich.

A super easy way to check if the installed app has an update available. It is built with simplicity and customisability in mind and comes with pre-written tests.

A simple, performant, and lightweight SVG parser

Drawing and Geometry made easy on iOS - now in Swift 3.0

iOS utility classes for asynchronous rendering and display.

NXDrawKit is a simple and easy but useful drawing kit for iPhone

An iOS framework for easily adding drawings and text to images.

Display and interact with SVG Images on iOS / OS X, using native rendering (CoreAnimation)

Powerful and easy-to-use vector graphics Swift library with SVG support

The application is develop in Objective IOS. kids can draw whatever they want and also kids can save the drawing as well as undo erase the drawing.

When you scan the clothing tag, a 3D character appears and informs you of the clothing information.

SVG parser and renderer written in SwiftUI

A lightweight XMLParser for assembling and parsing XML values written for iOS 8+ in Swift 2.

3D Touch Application for Weighing Plums (and other small fruit!)

Gradients 🌔 A curated collection of 180 splendid gradients made in swift

An auto-layout base UITextView subclass which automatically grows with user input and can be constrained by maximal and minimal height - all without a single line of code

A fully customisable subclass of the native UIControl which allows you to create beautiful buttons without writing any line of code.

A fully customisable swift subclass on UIButton which allows you to create beautiful buttons without writing any line of code.

Library that makes it easy to create multiple environments within a single app. You can switch environments without deleting the application.

Create complementary gradients generated from dominant and prominent colors in supplied image. Inspired by Grade.js