Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fade a UIView in ios using Gradient (Swift Extension)
///
/// With this extension you can call .fadeView(style: ) on any view to create a fading effect.
/// Very useful when trying to fade a UIScrollView, UITableView or UICollectionView
/// This way also takes care of the "white or black" transparent gradient that happens as described here: https://stackoverflow.com/questions/24882361/ios-white-to-transparent-gradient-layer-is-gray
/// This solution is a swift implementation of the following stackoverflow question in Swift, adding more styles: https://stackoverflow.com/questions/17774761/how-to-create-a-top-fade-effect-using-uiscrollview/25408833#25408833
///
extension UIView {
enum UIViewFadeStyle {
case bottom
case top
case left
case right
case vertical
case horizontal
}
func fadeView(style: UIViewFadeStyle = .bottom, percentage: Double = 0.07) {
let gradient = CAGradientLayer()
gradient.frame = bounds
gradient.colors = [UIColor.white.cgColor, UIColor.clear.cgColor]
let startLocation = percentage
let endLocation = 1 - percentage
switch style {
case .bottom:
gradient.startPoint = CGPoint(x: 0.5, y: endLocation)
gradient.endPoint = CGPoint(x: 0.5, y: 1)
case .top:
gradient.startPoint = CGPoint(x: 0.5, y: startLocation)
gradient.endPoint = CGPoint(x: 0.5, y: 0.0)
case .vertical:
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor, UIColor.clear.cgColor]
gradient.locations = [0.0, startLocation, endLocation, 1.0] as [NSNumber]
case .left:
gradient.startPoint = CGPoint(x: startLocation, y: 0.5)
gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
case .right:
gradient.startPoint = CGPoint(x: endLocation, y: 0.5)
gradient.endPoint = CGPoint(x: 1, y: 0.5)
case .horizontal:
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor, UIColor.clear.cgColor]
gradient.locations = [0.0, startLocation, endLocation, 1.0] as [NSNumber]
}
layer.mask = gradient
}
}
@ChristianSteffens

This comment has been minimized.

Copy link

@ChristianSteffens ChristianSteffens commented Oct 19, 2019

Great stuff - thanks a lot for sharing.

@bytepai

This comment has been minimized.

Copy link

@bytepai bytepai commented Nov 7, 2019

Thank you for sharing, it helped me too much, I used it to simulate the effect in Figma.

@MuhammadAhmedBaig

This comment has been minimized.

Copy link

@MuhammadAhmedBaig MuhammadAhmedBaig commented Jun 5, 2020

Great stuff, you have done a great job.

@SilviaIenciu

This comment has been minimized.

Copy link

@SilviaIenciu SilviaIenciu commented May 5, 2021

Thank you for sharing, it really helps.
Can you please also license this code of yours? Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment