Gradient Color Swift - ios

Question

Here is what I am trying to do:
The screenshot is taken from Iphone:
This is my code:
#IBOutlet weak var viewBottomBorder: UIView!
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
let whiteColor = UIColor.black
gradient.colors = [whiteColor.withAlphaComponent(0.0).cgColor, whiteColor.withAlphaComponent(1.0), whiteColor.withAlphaComponent(1.0).cgColor]
gradient.locations = [NSNumber(value: 0.0),NSNumber(value: 0.2),NSNumber(value: 1.0)]
gradient.frame = viewBottomBorder.bounds
viewBottomBorder.layer.mask = gradient
Question: How to show same text in white color with gradient?
Can someone please explain to me how to solve this , i've tried to solve this issue but no results yet.
Any help would be greatly appreciated.
Thanks in advance.

Answer 1

You need to start your gradient at the top, because it's darker at the top. So x should be have max alpha. Then as y increases reduce the alpha.
Try this:
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 1.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
let whiteColor = UIColor.black
gradient.colors = [whiteColor.withAlphaComponent(1.0).cgColor, whiteColor.withAlphaComponent(1.0), whiteColor.withAlphaComponent(0.0).cgColor]
gradient.locations = [NSNumber(value: 1.0),NSNumber(value: 0.7),NSNumber(value: 0.0)]
gradient.frame = viewBottomBorder.bounds
viewBottomBorder.layer.mask = gradient

Answer 2

A little alternative:
func setupGradient(on view: UIView, withHeight height: CGFloat) {
// this is view that holds gradient
let gradientHolderView = UIView()
gradientHolderView.backgroundColor = .clear
gradientHolderView.translatesAutoresizingMaskIntoConstraints = false
// here you set layout programmatically (you can create this view in storyoard as well and attach gradient to it)
// make sure to position this view under your text
view.addSubview(gradientHolderView) // alternative: view.insertSubview(gradientHolderView, belowSubview: YourTextLaber)
gradientHolderView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
gradientHolderView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
gradientHolderView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
gradientHolderView.heightAnchor.constraint(equalToConstant: height).isActive = true
// this is needed to kinda refresh layout a little so later we can get bounds from view. I'm not sure exactly why but without this if you create view programmatically it is needed
gradientHolderView.setNeedsLayout()
gradientHolderView.layoutIfNeeded()
// here you create gradient as layer and add it as a sublayer on your view (modify colors as you like)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = gradientHolderView.bounds
gradientLayer.colors = [UIColor.clear.cgColor, UIColor(white: 0, alpha: 0.6).cgColor]
gradientHolderView.layer.addSublayer(gradientLayer)
}

Answer 3

Use above code to apply Gradient to your view
var gradientBackground : CAGradientLayer?
func applyGradientToBackground() {
if self.gradientBackground != nil {
self.gradientBackground?.removeFromSuperlayer()
}
self.gradientBackground = CAGradientLayer()
self.gradientBackground?.frame = self.your_view_name.bounds
let cor1 = UIColor.black.withAlphaComponent(1).cgColor
let cor2 = UIColor.white.cgColor
let arrayColors = [cor1, cor2]
self.gradientBackground?.colors = arrayColors
self.your_view_name.layer.insertSublayer(self.gradientBackground!, at: 0)
}