CODEWITHSUNDEEP
iosswiftgradientuicolor
Sham Dhiman
Sham Dhiman

Reputation: 1556

Gradient Color Swift

Here is what I am trying to do:

original screen shot

The screenshot is taken from Iphone:

trying give result

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.

Upvotes: 0

Views: 3489

Answers (3)

Cesare
Cesare

Reputation: 9409

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

Upvotes: 1

Onkar Borse
Onkar Borse

Reputation: 70

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)
}

Upvotes: 0

Stany Miles
Stany Miles

Reputation: 212

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)
}

Upvotes: 0

Related Questions