Gradient background color with UIScrollView - ios

I know this question might look like a duplicate, however most answers disregard the fact of scrolling in the view.
When I scroll the gradient color stays constant through the whole scroll , and not entirely for the background. For example the height of the view is 1500, and the current view where i'm looking is (example) 450, then in this 450 the gradient is constant throughout the other 1050 instead of while scrolling it should get darker and darker (to the other color). Here is an image for better understanding
https://ibb.co/euKcLd
https://ibb.co/bHNxLd
https://ibb.co/eZgA6J
And this is the code I am using:
func setGradientColour() {
let colorTop = UIColor(red: 255.0/255.0, green: 149.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
let colorBottom = UIColor(red: 255.0/255.0, green: 0/255.0, blue: 0/255.0, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [colorTop, colorBottom]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.frame = self.view.bounds
self.view.layer.insertSublayer(gradientLayer, at: 0)
}
Which is being called in the viewDidLoad method.

Turns out the code was wrong and must be changed to:
func setGradientColour() {
let colorTop = UIColor(red: 255.0/255.0, green: 149.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
let colorBottom = UIColor(red: 255.0/255.0, green: 0/255.0, blue: 0/255.0, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [colorTop, colorBottom]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.frame = scrollViewTest.bounds
scrollViewTest.layer.insertSublayer(gradientLayer, at: 0)
}
Where scrollViewTest is the outlet for the scrollView. The mistake was that I was calling the normal view layer instead of the scrollview which reduced the length of view.

Related

Gradient colors based on values for a bar graph

I need to define colors for graph based on the values(example : green for values between 0-50 and red for values between 50-100).I tried with gradient colors but it is not as expected. Could anyone help me out in this please? I'm using Swift 3.
I need the bottom of the graph to be green and upper part as red
Declare out of class for this code
class Colors {
var gl:CAGradientLayer!
init() {
let colorTop = UIColor(red: 135.0/255.0, green: 155.0/255.0, blue: 36.0/255.0, alpha: 1.0).cgColor
let colorcenter = UIColor(red: 186.0/255.0, green: 213.0/255.0, blue: 49.0/255.0, alpha: 1.0).cgColor
let colorBottom = UIColor(red: 224.0/255.0, green: 241.0/255.0, blue: 142.0/255.0, alpha: 1.0).cgColor
self.gl = CAGradientLayer()
self.gl.colors = [colorTop, colorcenter, colorBottom]
self.gl.locations = [0.5,0.8, 1.0]
}
}
declate in viewDidLoad Method.
let colors = Colors()
view.backgroundColor = UIColor.clear
let backgroundLayer = colors.gl
backgroundLayer?.frame = Yourview.frame
Yourview.layer.insertSublayer(backgroundLayer!, at: 0)

How do I center and aspect fit an image in Swift 3?

I have a project in Swift 3 that I am using a gradient on the view. I placed a image on the view, but it is under the gradient layer so I was going to draw the image programmatically instead of with the storyboard. I can't seem to figure out how to get the image to be centered and to aspect fit inside the bounds of the view.
What I have...
//Gradient Background
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.frame
gradientLayer.colors = [UIColor(red: 0/255, green: 147/255, blue: 255/255, alpha: 1.0).cgColor, UIColor(red: 162/255, green: 134/255, blue: 255/255, alpha: 1.0).cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
self.view.layer.addSublayer(gradientLayer)
//Image
let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
self.view.addSubview(mainImageView)
You can try it
let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
mainImageView.contentMode = .ScaleAspectFit
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.frame
gradientLayer.colors = [UIColor(red: 0/255, green: 147/255, blue: 255/255, alpha: 1.0).cgColor, UIColor(red: 162/255, green: 134/255, blue: 255/255, alpha: 1.0).cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
self.view.layer.addSublayer(gradientLayer)
//Image
let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
mainImageView.center = self.view.cente
mainImageView.contentMode = .ScaleAspectFit
self.view.addSubview(mainImageView)
Try this one

How to change the color of status bar when gradient is applied to navigation bar?

I want to apply gradient color on navigation bar. I applied that but the status bar color is not changing. Can anyone help me with this?
Here is the code for implementing the gradient color:
let colorTop = UIColor(red: 69/255, green: 90/255, blue: 195/255, alpha: 1.0).CGColor
let colorBottom = UIColor(red: 230/255, green: 44/255, blue: 75/255, alpha: 1.0).CGColor
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [ colorTop, colorBottom]
gradientLayer.locations = [ 0.0, 1.0]
gradientLayer.frame = CGRectMake(0, 0, 375, 64)
self.navigationController?.navigationBar.layer.addSublayer(gradientLayer)
Use this:
gradientLayer.frame = CGRect(x:0, y:-20, width:375, height:64)
output:
In Swift3:
let colorTop = UIColor(red: 69/255, green: 90/255, blue: 195/255, alpha: 1.0).cgColor
let colorBottom = UIColor(red: 230/255, green: 44/255, blue: 75/255, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [ colorTop, colorBottom]
gradientLayer.locations = [ 0.0, 1.0]
gradientLayer.frame = CGRect(x:0, y:-20, width:375, height:64)
self.navigationController?.navigationBar.layer.addSublayer(gradientLayer)
Replace
self.navigationController?.navigationBar.layer.addSublayer(gradientLayer) with
self.navigationController?.navigationBar.layer.sublayers?.insert(gradientLayer, at: 0)
Added image after building with above code

Changing gradient background like in Instagram Log In

How to make changing gradient background like in Instagram Log In?
In Android you do it like this:
Is there a similar way to do it in Swift?
If you want to change continuously change view's background color with animation you can set it something like this.
var colors: [UIColor] = [.red, .blue, .green]
func startAnimation(index: Int) {
UIView.animate(withDuration: 2.5, delay: 0, options: UIViewAnimationOptions.curveEaseInOut, animations: {
self.view.backgroundColor = self.colors[index]
}) { (finished) in
var currentIndex = index + 1
if currentIndex == self.colors.count { currentIndex = 0 }
self.startAnimation(index: currentIndex)
}
}
And call this function with index 0.
self.startAnimation(index: 0)
In Swift3
Use CAGradientLayer with Using CABasicAnimation
I create PastelView Library to make alike instgram background animation effect
repo https://github.com/cruisediary/Pastel
Colors
var colors: [UIColor] = [UIColor(red: 156/255, green: 39/255, blue: 176/255, alpha: 1.0),
UIColor(red: 255/255, green: 64/255, blue: 129/255, alpha: 1.0),
UIColor(red: 123/255, green: 31/255, blue: 162/255, alpha: 1.0),
UIColor(red: 32/255, green: 76/255, blue: 255/255, alpha: 1.0),
UIColor(red: 32/255, green: 158/255, blue: 255/255, alpha: 1.0),
UIColor(red: 90/255, green: 120/255, blue: 127/255, alpha: 1.0),
UIColor(red: 58/255, green: 255/255, blue: 217/255, alpha: 1.0)]
Set Gradient
let gradient = CAGradientLayer()
gradient.frame = bounds
gradient.colors = currentGradientSet()
gradient.startPoint = CGPoint(x:0, y:1)
gradient.endPoint = CGPoint(x:1, y:0)
gradient.drawsAsynchronously = true
layer.insertSublayer(gradient, at: 0)
Add Animation to gradient
let animation = CABasicAnimation(keyPath: Animation.keyPath)
animation.duration = animationDuration
animation.toValue = currentGradientSet()
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
animation.delegate = self //this is important
gradient.add(animation, forKey: Animation.key)
After end animation loop another color set looping
extension PastelView: CAAnimationDelegate {
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
if flag {
gradient.colors = currentGradientSet()
animateGradient()
}
}
}
Pastel should help you :)
You can do it pretty easily using CAGradientLayer:
let grad = CAGradientLayer()
grad.colors = [
UIColor.red.cgColor, // top color
UIColor.blue.cgColor // bottom color
]
grad.locations = [
0.0, // start gradating at top of view
1.0 // end gradating at bottom of view
]
grad.frame = view.bounds
view.layer.addSublayer(grad)
You could increase the first item in locations (0.0) to start the gradating further down, or you could decrease 1.0 to complete gradation higher up. It's a bit tough to explain, drop this into a playground and mess around a bit until you get your desired effect.
Example gradient and playground from the code above:
You can do like this in SWIFT 3. You can give more colors in it.
let gradient1 = CAGradientLayer()
gradient1.frame = CGRect(origin: CGPoint.zero , size: CGSize (width: self.view.frame.size.width,height: self.view.frame.size.height))
gradient1.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
print(gradient1.frame)
view_gradient.layer.masksToBounds = true
view_gradient.layer.addSublayer(gradient1)
Hope this works for you.

Background gradient not see correctly in mode landscape

When I put the device in mode landscape, the background is set wrong. How do I fix it? I also could use to know how to put the entire application in landscape mode.
override func viewDidLoad() {
super.viewDidLoad()
//BACKGROUND FONDO
//A linear Gradient Consists of two colours: top colour and bottom colour
let topColor = UIColor(red: 15.0/255.0, green: 118.0/255.0, blue: 128.0/255.0, alpha: 1.0)
let bottomColor = UIColor(red: 84.0/255.0, green: 187.0/255.0, blue: 187.0/255.0, alpha: 1.0) 
//Add the top and bottom colours to an array and setup the location of those two.
let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor]
let gradientLocations: [CGFloat] = [0.0, 1.0]
//Create a Gradient CA layer
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.frame = self.view.bounds
self.view.layer.insertSublayer(gradientLayer, atIndex: 0)
} //FIN BACKGROUND GRADIENT
In your case gradient is a Layer, not View. It means that it will not resize or change position while the containing layer changes (e.g. during rotation). You have to change the frame of the sublayer manually during rotation.
var gradientLayer = CAGradientLayer()
override func viewDidLoad() {
super.viewDidLoad()
createGredientBackground()
}
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
gradientLayer.frame = view.layer.bounds
}
func createGredientBackground() {
let colorTop = UIColor(red: 255.0/255.0, green: 149.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
let colorBottom = UIColor(red: 255.0/255.0, green: 94.0/255.0, blue: 58.0/255.0, alpha: 1.0).cgColor
gradientLayer.colors = [colorTop, colorBottom]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.frame = self.view.bounds
self.view.layer.insertSublayer(gradientLayer, at:0)
}

Resources