I tried to make a gradiant using playground then make it into a subclass of uiview to use it in my codebase.
The playground code is like this:
let view = UIView(frame: CGRect(x: 0, y: 0, width: 640, height: 41
))
let gradient: CAGradientLayer = CAGradientLayer(layer: view.layer)
gradient.frame = view.frame
let lightColor = UIColor(red: 157/256, green: 157/256, blue: 154/256, alpha: 1)
let darkColor = UIColor(red: 108/256, green: 104/256, blue: 104/256, alpha: 1)
gradient.colors = [lightColor.CGColor, darkColor.CGColor]
gradient.locations = [0.6 , 0.4]
gradient.startPoint = CGPoint(x: 1, y: 0.55)
gradient.endPoint = CGPoint(x: 0, y: 0.45)
view.layer.insertSublayer(gradient, atIndex: 0)
view //displayed
And display like this:
I tried to make it into my codebase with:
class GradiantView : UIView {
override var frame: CGRect {
didSet {
let gradient: CAGradientLayer = CAGradientLayer(layer: layer)
gradient.frame = bounds
let lightColor = UIColor(red: 157/256, green: 157/256, blue: 154/256, alpha: 1)
let darkColor = UIColor(red: 108/256, green: 104/256, blue: 104/256, alpha: 1)
gradient.colors = [lightColor.CGColor, darkColor.CGColor]
gradient.locations = [0.6 , 0.4]
gradient.startPoint = CGPoint(x: 1, y: 0.55)
gradient.endPoint = CGPoint(x: 0, y: 0.45)
layer.insertSublayer(gradient, atIndex: 0)
}
}
}
However, the result is like this: (no gradiant applied)
What happened and how to fix it ?
I inverted the locations and it seems to work.
I welcome any explanation on the difference between simulator and playground.
gradientLayer.locations = [0.4 , 0.6]
Related
I would like to add gradient layer to my navbar, but after I add it, layer hides my title, like its behind that new sublayer.
override func viewDidLoad() {
super.viewDidLoad()
self.title = "My Trips"
self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white]
//self.navigationController?.navigationBar.layer.addSublayer(gradientLayer)
self.navigationController?.navigationBar.layer.insertSublayer(gradientLayer, at: 1)
setupGradient()
}
let gradientLayer = CAGradientLayer()
func setupGradient() {
gradientLayer.colors = [
UIColor(red: 0.259, green: 0.188, blue: 0.475, alpha: 1).cgColor,
UIColor(red: 0.11, green: 0.024, blue: 0.369, alpha: 1).cgColor
]
gradientLayer.locations = [0, 1]
gradientLayer.startPoint = CGPoint(x: 0.25, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
gradientLayer.transform = CATransform3DMakeAffineTransform(CGAffineTransform(a: 0, b: 0.58, c: -0.58, d: 0, tx: 0.5, ty: 0))
gradientLayer.bounds = (self.navigationController?.navigationBar.bounds.insetBy(dx: -0.01*view.bounds.size.width, dy: -1*view.bounds.size.height))!
}
Use this line for inserting layer.
self.navigationController?.navigationBar.subviews.first?.layer.insertSublayer(gradientLayer, at: 0)
I'm trying to implement a underlined UITextField with a gradient. Therefore I created a extension with a function underlined().
To get a gradient, I created a CAGradientLayer and made these customizations:
func underlined(){
let color = UIColor(red: 11/255, green: 95/255, blue: 244/255, alpha: 1).cgColor
let sndColor = UIColor(red: 106/255, green: 178/255, blue: 255/255, alpha: 1).cgColor
let gradient: CAGradientLayer = CAGradientLayer()
gradient.colors = [color, sndColor]
gradient.locations = [0.0, 1.0]
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 0)
let width = CGFloat(2.0)
gradient.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width, height: self.frame.size.height)
gradient.borderWidth = width
self.layer.insertSublayer(gradient, at: 0)
self.layer.masksToBounds = true
}
A underline is being displayed, but it solely solid black - I've tried to change the colors, but it remains black (Issue outdated - see edit).
Does anybody see the issue?
Edit:
Adding gradient.borderColor = UIColor.blue.cgColor let me change the color of the line - but how can I apply the gradient on the border color?
Remove the below line from your code:
gradient.borderWidth = width
Screenshot:
Your code was not working because, the borderWidth is covering whole of the gradient frame.Try setting the borderColor, then you'll see the difference.
gradient.borderColor = UIColor.red.cgColor
Let me know if you still face any issues.
I created a custom UI Button class in swift for a follow button, however it is not showing the button title
My code
#IBDesignable
public class GradientButton: UIButton {
override public func layoutSubviews() {
super.layoutSubviews()
layoutGradientButtonLayer()
}
// MARK: Private
private func layoutGradientButtonLayer() {
let layer = UIView()
layer.frame = CGRect(x: 191, y: 257, width: 66.6, height: 24)
let gradient = CAGradientLayer()
gradient.frame = CGRect(x: 0, y: 0, width: 66.6, height: 24)
gradient.colors = [
UIColor(red: 0.09, green: 0.85, blue: 0.88, alpha: 1).cgColor,
UIColor(red: 0, green: 0.87, blue: 0.68, alpha: 1).cgColor
]
gradient.locations = [0, 1]
gradient.startPoint = CGPoint(x: 0.78, y: 1)
gradient.endPoint = CGPoint(x: 0.15, y: 1)
self.layer.cornerRadius = 10
self.layer.addSublayer(gradient)
self.clipsToBounds = true
self.setTitle("Follow", for: UIControlState.normal)
}
}
The button appears small width and doesn't have any "Follow" text in it
Change below code you will see title:
self.layer.addSublayer(gradient)
change to
self.layer.insertSublayer(gradient, at: 0)
I have filled the circle boundary with CAShapeLayer.Now i am giving my CAShape color as red but i want to give it as a gradient color.Please tell me how can i do this?
circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(1.5 * M_PI), endAngle: CGFloat(-0.5 * M_PI), clockwise: false)
//add gradient to the below
progressCircle = CAShapeLayer ()
progressCircle.path = circlePath?.cgPath
progressCircle.strokeColor = UIColor.red.cgColor
progressCircle.fillColor = UIColor.clear.cgColor
progressCircle.lineWidth = 4.0
progressCircle.strokeStart = 0
progressCircle.strokeEnd = 0.7
let gradient: CAGradientLayer = CAGradientLayer()
let startingColorOfGradient = UIColor(colorLiteralRed: 50/255, green: 189/255, blue: 170/255, alpha: 1.0).cgColor
let endingColorOFGradient = UIColor(colorLiteralRed: 133/255, green: 210/255, blue: 230/255, alpha: 1.0).cgColor
gradient.startPoint = CGPoint(x: 1.0, y: 0.5)
gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
gradient.colors = [startingColorOfGradient , endingColorOFGradient]
circle.layer.addSublayer(progressCircle)
circle.layer.addSublayer(gradient)
I think you're missing the gradient frame, the gradient locations and you should add it to the layer's mask. The following example works for me:
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 1, y: 0.5)
gradient.endPoint = CGPoint(x: 0, y: 0.5)
gradient.frame = CGRect(x: 0, y: 0, width: yourWidth, height: yourHeight)
gradient.colors = [
UIColor(white: 1, alpha: 0.1).cgColor,
UIColor(white: 1, alpha: 0.5).cgColor,
UIColor(white: 1, alpha: 0.9).cgColor
]
gradient.locations = [
0.0,
0.5,
1.0
]
circle.layer.mask = gradient
Hope this helps!
The following code seems to work using Objective-C however its Swift version doesn't work.
I have tried the following:
Add the gradient inside the collection view cell
Add the gradient in the viewController
Use UIColor & CGColor
Use insertSubLayer
var mGradient = CAGradientLayer()
mGradient.frame = favoriteCell.mImageView.bounds
var colors = [CGColor]()
colors.append(UIColor(red: 0, green: 0, blue: 0, alpha: 1).CGColor)
colors.append(UIColor(red: 0, green: 0, blue: 0, alpha: 0).CGColor)
mGradient.startPoint = CGPointMake(0.1, 0.5)
mGradient.endPoint = CGPointMake(0.9, 0.5)
favoriteCell.mImageView.layer.addSublayer(mGradient)
Swift 3
let mGradient = CAGradientLayer()
mGradient.frame = favoriteCell.mImageView.bounds
var colors = [CGColor]()
colors.append(UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor)
colors.append(UIColor(red: 0, green: 0, blue: 0, alpha: 0).cgColor)
mGradient.startPoint = CGPoint(x: 0.1, y: 0.5)
mGradient.endPoint = CGPoint(x: 0.9, y: 0.5)
mGradient.colors = colors
favoriteCell.mImageView.layer.addSublayer(mGradient)
You need to set set the colors of the gradient
mGradient.colors = colors
Try this one:
var mGradient : CAGradientLayer = CAGradientLayer()
mGradient.frame = favoriteCell.mImageView.bounds
mGradient.frame.origin = CGPointMake(0.0,0.0)
var colors = [CGColor]()
colors.append(UIColor(red: 0, green: 0, blue: 0, alpha: 1).CGColor)
colors.append(UIColor(red: 0, green: 0, blue: 0, alpha: 0).CGColor)
mGradient.locations = [0.0 , 1.0]
mGradient.startPoint = CGPointMake(0.1, 0.5)
mGradient.endPoint = CGPointMake(0.9, 0.5)
mGradient.frame = CGRect(x: 0.0, y: 0.0, width: favoriteCell.mImageView.frame.size.width, height: favoriteCell.mImageView.frame.size.height)
favoriteCell.mImageView.layer.insertSublayer(mGradient, atIndex: 0)