Gradient color effect on UIView in iOS 10 Swift 2.3 Xcode 8 - ios10

I am trying to achieve a gradient color on a UIView or button with two color black which fades out to clear color or white color (please see image).
I have tried using different combinations of white color, clear color; experimenting with alpha as well. I have also set the locations property as can be seen in below code but I am not able to achieve desired results.
Can anyone tell me where I am wrong. :)
let colorClear = UIColor.clearColor().CGColor
let colorLeft = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 0.9).CGColor
let colorRight = UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0).CGColor
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [colorLeft, colorRight]
gradientLayer.locations = [ 0.1, 0.9]
gradientLayer.frame = self.createAccountView.bounds
gradientLayer.startPoint = CGPoint(x:0.0, y:0.5)
gradientLayer.endPoint = CGPoint(x:1.0, y:0.5)
createAccountView.layer.addSublayer(gradientLayer)
createAccountView.layer.masksToBounds = true
The desired result is the one in which black color transitions to a faded one.
I have already tried setting both colors as black and the color1 with an alpha.
I have already tried commenting locations property.

you should set gradientLayer.frame in viewDidLayoutSubviews().
Like this:
class ViewController: UIViewController {
let gradientLayer = CAGradientLayer()
override func viewDidLoad() {
let colorClear = UIColor.clearColor().CGColor
let colorLeft = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 0.9).CGColor
let colorRight = UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0).CGColor
self.gradientLayer.colors = [colorLeft, colorRight]
self.gradientLayer.locations = [ 0.1, 0.9]
self.gradientLayer.startPoint = CGPoint(x:0.0, y:0.5)
self.gradientLayer.endPoint = CGPoint(x:1.0, y:0.5)
createAccountView.layer.addSublayer(self.gradientLayer)
createAccountView.layer.masksToBounds = true
}
override viewDidLayoutSubviews() {
super.viewDidLayoutSubViews()
self.gradientLayer.frame = self.createAccountView.bounds
}

Related

How to fix: gradient background at landscaping?

I have this code which creates a gradient background.
When I rotate the deviace to landscape mode, the gradient background doesnt fill up to the whole size of the screen, some parts are white.
My goal is the whenever the orrientation changes, the gradient should fill the whole screen.
let gradient: CAGradientLayer = CAGradientLayer()
let color1 = UIColor(red: 198.0/255.0 , green: 255.0/255.0, blue: 221.0/255.0, alpha: 1.0).cgColor
let color2 = UIColor(red: 251.0/255.0, green: 215.0/255.0, blue: 134.0/255.0, alpha: 1.0).cgColor
let color3 = UIColor(red: 247.0/255.0, green: 121.0/255.0, blue: 125.0/255.0, alpha: 1.0).cgColor
gradient.name="asd"
gradient.colors = [color1,color2,color3]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
gradient.frame = CGRect(x: 0.0, y: 0.0, width: wid, height: heu)
self.view.layer.insertSublayer(gradient, at: 0)
}
Hold the gradient layer as a property and update its frame in layoutSubview()
var gradientLayer: CAGradientLayer?
override func viewDidLoad() {
super.viewDidLoad()
///
/// YOUR CODE
///
gradientLayer = gradient
}
override func layoutSubviews() {
super.layoutSubviews()
gradientLayer?.frame = self.view.bounds
}

UIView.animate not Animating

I am trying to animate UILabel textColor changes using UIView.animate. However, nothing is changing when I attempt to use UIView. Here is my code:
titleLabel.textColor = UIColor(red: 104/250, green: 155/250, blue: 121/250, alpha: 1)
UIView.animate(withDuration: 1.0, animations: {
self.titleLabel.textColor = UIColor(red:206/255, green: 206/255, blue: 206/255, alpha: 1.0)
I expect the color of the label to change to a greenish color and then change back to the gray-ish color it was before. Thanks in advance for helping!
The textColor property is not specified as being animatable in Apple developer docs, so I don't think you can do it with a simple UIView animations block.
You can use UIView transition instead.
Code:
UIView.transition(with: self.titleLabel, duration: 1.0, options: .transitionCrossDissolve, animations: {
self.titleLabel.textColor = UIColor(red: 104/250, green: 155/250, blue: 121/250, alpha: 1)
}, completion: { _ in
self.titleLabel.textColor = UIColor(red:206/255, green: 206/255, blue: 206/255, alpha: 1.0)
})
I hope it will help you. Let me know if you are still having any issue.
try
UIView.animate(withDuration: 1.0, animations: {
self.titleLabel.textColor = UIColor(red:206/255, green: 206/255, blue: 206/255, alpha: 1.0)
self.view.layoutIfNeeded()
}
TextColor is not supposed to be animatable in the documentation so you have to perform below animation code.
Reason:
The reason that textColor is not animatable is that UILabel uses a regular CALayer instead of a CATextLayer. so you have two options
perform animation on CATextLayer
Add custom animation layer as given below in the code.
let changeColor = CATransition()
changeColor.duration = 1
CATransaction.begin()
CATransaction.setCompletionBlock {
self.titleLabel.layer.add(changeColor, forKey: nil)
self.titleLabel.textColor = UIColor(red:206/255, green: 206/255, blue: 206/255, alpha: 1.0) }
titleLabel.textColor = UIColor(red: 104.0/255.0, green: 155.0/255.0, blue: 121.0/255.0, alpha: 1.0)
CATransaction.commit()

Swift - Working With Gradients

I have encountered a problem involving setting gradients for labels and buttons. I know this question has been asked a lot, but no answer has seemed to solve my problem. Here is the screen as I want it to look:
This is my code:
#IBOutlet weak var loginButton: UIButton!
#IBOutlet weak var signUpButton: UIButton!
#IBOutlet weak var logoLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
loginButton.backgroundColor = UIColor.clear
let loginButtonGradient = createBlueGreenGradient(from: loginButton.bounds)
self.view.layer.insertSublayer(loginButtonGradient, at: 0)
signUpButton.backgroundColor = UIColor.clear
let signUpButtonGradient = createBlueGreenGradient(from: signUpButton.bounds)
self.view.layer.insertSublayer(signUpButtonGradient, at: 0)
logoLabel.backgroundColor = UIColor.clear
let logoLabelGradient = createBlueGreenGradient(from: logoLabel.bounds)
self.view.layer.insertSublayer(logoLabelGradient, at: 0)
loginButton.layer.cornerRadius = 100
signUpButton.layer.cornerRadius = 100
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{
let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1)
let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1)
let gradientColors: [UIColor] = [topColor, bottomColor]
let gradientLocations: [NSNumber] = [0.0, 1.0]
let gradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.frame = bounds
return gradientLayer
}
And this is the wrong result:
Somebody please help me. I'm not sure what I'm doing wrong.
There are lots of issue with your code.
Divide the color with Float number instead of Int means it should be 255.0 not 255.
Now for colors property of CAGradientLayer you need to set array of CGColor not array of UIColor.
Also set startPoint and endPoint property of CAGradientLayer to make horizontal gradient color.
Currently you are adding this GradientLayer in your self.view instead of its specific button.
Set the cornerRadius of your button on basis of its height not with some constant 100 also after setting cornerRadius you need to also set masksToBounds property of layer to true.
Now for your logo label, you cannot set textColor as Gradient color directly what you need to do is draw the desired gradient on a UIImage and then use that UIImage to set the color pattern for your Label check this SO reference for that.
After making all this changes your code should be like.
func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{
let topColor = UIColor(red: 84/255.0, green: 183/255.0, blue: 211/255.0, alpha: 1).cgColor
let bottomColor = UIColor(red: 119/255.0, green: 202/255.0, blue: 151/255.0, alpha: 1).cgColor
let gradientColors = [topColor, bottomColor]
let gradientLocations: [NSNumber] = [0.0, 1.0]
let gradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
//Set startPoint and endPoint property also
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)
gradientLayer.frame = bounds
return gradientLayer
}
Now set gradientLayer in viewDidLoad this way.
override func viewDidLoad() {
super.viewDidLoad()
let loginButtonGradient = createBlueGreenGradient(from: loginButton.bounds)
self.loginButton.layer.insertSublayer(loginButtonGradient, at: 0)
let signUpButtonGradient = createBlueGreenGradient(from: signUpButton.bounds)
self.signUpButton.layer.insertSublayer(signUpButtonGradient, at: 0)
loginButton.layer.cornerRadius = loginButton.frame.size.height / 2
loginButton.layer.masksToBounds = true
signUpButton.layer.cornerRadius = signUpButton.frame.size.height / 2
signUpButton.layer.masksToBounds = true
}
Your method like this:
func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{
let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1).cgColor
let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1).cgColor
let gradientColors = [topColor, bottomColor]
let gradientLocations: [NSNumber] = [0.0, 1.0]
let gradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.frame = bounds
return gradientLayer
}
Oh my goodness I had the same problem, but played around with it. This is caused because you didnt add .cgcolor. For example :
let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1).cgColor
let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1).cgColor
let gradientColors = [topColor, bottomColor]
Let me know if it works.

Can i use 'for' loop on this?

I'm wondering if i may use 'for' loop for this code. Please forgive me, I know that is kind of a lame question, but I'm new to swift. Hope that you can help me here, guys!
Thanks a lot everyone!
Code:
override func viewDidLoad() {
super.viewDidLoad()
// Background color
let kolorTla = UIColor(red: 0/255.0, green: 66/255.0, blue: 132/255.0, alpha: 1.0)
view.backgroundColor = kolorTla
// Icons border
ramka.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
ramka.layer.cornerRadius = 5.0
ramka.layer.borderWidth = 3
// Image
skill1.image = UIImage(named: "english")
// Image border
skill1.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
skill1.layer.cornerRadius = 5.0
skill1.layer.borderWidth = 3
skill1.contentMode = .scaleAspectFit
// Image
skill2.image = UIImage(named: "literature")
// Image border
skill2.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
skill2.layer.cornerRadius = 5.0
skill2.layer.borderWidth = 3
skill2.contentMode = .scaleAspectFit
// Image
skill3.image = UIImage(named: "idea1")
// Image border
skill3.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
skill3.layer.cornerRadius = 5.0
skill3.layer.borderWidth = 3
skill3.contentMode = .scaleAspectFit
You can to some extent. You would just need to define an array of your items and loop over them. Not sure if it saves you much code wise but does make it a little more understandable.
override func viewDidLoad() {
super.viewDidLoad()
// Background color
let kolorTla = UIColor(red: 0/255.0, green: 66/255.0, blue: 132/255.0, alpha: 1.0)
view.backgroundColor = kolorTla
// Icons border
ramka.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
ramka.layer.cornerRadius = 5.0
ramka.layer.borderWidth = 3
// Set Image
skill1.image = UIImage(named: "english")
skill2.image = UIImage(named: "literature")
skill3.image = UIImage(named: "idea1")
// Set Image border
for skill in [skill1, skill2, skill3] {
skill.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
skill.layer.cornerRadius = 5.0
skill.layer.borderWidth = 3
skill.contentMode = .scaleAspectFit
}
}
Better approach at least in my opinion would be to create a simple function to handle this instead.
override func viewDidLoad() {
super.viewDidLoad()
// Background color
let kolorTla = UIColor(red: 0/255.0, green: 66/255.0, blue: 132/255.0, alpha: 1.0)
view.backgroundColor = kolorTla
// Icons border
ramka.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
ramka.layer.cornerRadius = 5.0
ramka.layer.borderWidth = 3
// Set Images
setupImageView(imageView: skill1, imageName: "english")
setupImageView(imageView: skill2, imageName: "literature")
setupImageView(imageView: skill3, imageName: "idea1")
}
func setupImageView(imageView: UIImageView, imageName: String) {
// Set Image
imageView.image = UIImage(named: imageName)
// Set Image border
imageView.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
imageView.layer.cornerRadius = 5.0
imageView.layer.borderWidth = 3
imageView.contentMode = .scaleAspectFit
}
While you're not able to use a for loop to modify the variable names and loop through them, you could put your skill instances in an array and loop through them that way.
...
skill1.image = UIImage(named: "english")
skill2.image = UIImage(named: "literature")
skill3.image = UIImage(named: "idea1")
let skills = [skill1, skill2, skill3]
for skill in skills {
skill.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
skill.layer.cornerRadius = 5.0
skill.layer.borderWidth = 3
skill.contentMode = .scaleAspectFit
}
Yes, you can. Place skill1,skill2, and skill3 in an array and iterate over it like this:
var objectArray = [skill1,skill2,skill3]
for object in objectArray
{
object.layer = ....
}
You could just extend your ImageView
extension UIImageView {
func addCustomLayer() { // add arguments to function if you wish to change the value assigned
self.layer.borderColor = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0).cgColor
self.layer.cornerRadius = 5.0
self.layer.borderWidth = 3
self.contentMode = .scaleAspectFit
}
}
}
Then you call that method on each UIImageView
for each in [skill1, skill2, skill3] {
each.addCustomLayer()
}

Cannot change color of SCNCone - Scenekit

I have an 'attach node' that has 2 child nodes that are Blender models. I have added a third node to this attach node that is a SCNCone. For some reason, I can't change the color of the cone node, only the transparency. I can't seem to see anything wrong with the code, but during runtime the cone is always a black color no matter what color I set it to.
let coneGeo = SCNCone(topRadius: 0.1, bottomRadius: 0.7, height: 4)
let coneMaterial = SCNMaterial()
coneMaterial.diffuse.contents = UIColor(red: 255.0/255.0, green: 108.0/255.0, blue: 91.0/255.0, alpha: 0.2)
coneGeo.materials = [coneMaterial]
let coneNode = SCNNode(geometry: coneGeo)
coneNode.position = SCNVector3(0, -1.5, 0)
coneNode.name = "coneNode"
AttachNode.addChildNode(coneNode)
Replace coneMaterial.diffuse.contents = UIColor(red: 255.0/255.0, green: 108.0/255.0, blue: 91.0/255.0, alpha: 0.2) with coneGeo.geometry?.firstMaterial?.diffuse.contents.diffuse.contents = UIColor(red: 255.0/255.0, green: 108.0/255.0, blue: 91.0/255.0, alpha: 0.2). Instead of changing the cone's material color without geometry, you have to access it's material color through it's geometry parameter.
coneGeo.materials = [coneMaterial]
This will also work. I tested your code by adding the cone node to an empty scene.
I just get a black screen.
But if I change the alpha value to say 0.5, this is what I get.
The code.
override func viewDidLoad()
{
super.viewDidLoad()
// create a new scene
let scene = SCNScene()
let coneGeo = SCNCone(topRadius: 0.1, bottomRadius: 0.7, height: 4)
let coneMaterial = SCNMaterial()
coneMaterial.diffuse.contents = UIColor(red: 255.0 / 255.0,
green: 108.0 / 255.0,
blue: 91.0 / 255.0, alpha: 0.5)
coneGeo.materials = [coneMaterial]
let coneNode = SCNNode(geometry
: coneGeo)
coneNode.position = SCNVector3(0, -1.5, 0)
coneNode.name = "coneNode"
scene.rootNode.addChildNode(coneNode)
// retrieve the SCNView
let scnView = self.view as! SCNView
// set the scene to the view
scnView.scene = scene
// allows the user to manipulate the camera
scnView.allowsCameraControl = true
// show statistics such as fps and timing information
scnView.showsStatistics = true
// configure the view
scnView.backgroundColor = UIColor.black
}
So I would say, check your alpha value in UIColor(red: 255.0/255.0, green: 108.0/255.0, blue: 91.0/255.0, alpha: 0.2)