I created a custom UIButton with a gradient layer. When I test the app on my iPhone, the button is filled with the gradient layer vertically, however the gradient layer only fills the button 3/4 of the way horizontally. It still triggers input events on the uncolored part of the button, so I know that the size of the button is correct, however I can't seem to figure out how to get the GradientLayer to fill the button completely.
Here's the source to my custom UIButton:
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
let topColor = UIColor(red: (40/255.0), green: (168/255.0), blue: (94/255.0), alpha: 1)
let bottomColor = UIColor(red: 0, green: (134/255.0), blue: (55/255.0), alpha: 1)
let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor]
let gradientLocations: [Float] = [0.0, 1.0]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.frame = self.bounds
gradientLayer.cornerRadius = 5.0
self.layer.addSublayer(gradientLayer)
}
Here's an image of the button when I run the app on my iPhone 6:
Thanks for any help in advance!
Are you using Auto Layout? The button is probably being resized after you set the gradient layer frame to a larger frame.
You can try to set the layer frame again in viewDidLayoutSubviews.
Setting the layer frame in viewDidLayoutSubviews works, but here he is inside the view, so it should go in
func layout()
(after the call to super).
Thanks for the answers guys. Helped me get on the right track. I resize the layer in layoutSubviews(), here's the code
let gradientLayer: CAGradientLayer = CAGradientLayer()
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
let topColor = UIColor(red: (40/255.0), green: (168/255.0), blue: (94/255.0), alpha: 1)
let bottomColor = UIColor(red: 0, green: (134/255.0), blue: (55/255.0), alpha: 1)
let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor]
let gradientLocations: [Float] = [0.0, 1.0]
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.cornerRadius = 5.0
self.layer.addSublayer(gradientLayer)
}
override func layoutSubviews() {
super.layoutSubviews();
gradientLayer.frame = self.bounds
}
Related
What you will see in the first image, if you scroll down a little bit, is the initial screen of a fin app. Basically, every section you see on the screen is placed within a vertical Stack View. Then every Label and Cell Is placed in a horizontal Stack View and so on, so the app auto-resizes for any screen size. I was using Story Board to create the elements.
The last section has two blue UITextFields that have a gradient layer behind it. I created an extension UITextField Class in a separate file that has the gradient function constructor in it and then another Class that placed the gradient behind any UITextField that have that class attached like this:
extension UITextField {
func gradientBackground(firstColor: UIColor, secondColor: UIColor){
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x:0.0, y:0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
layer.addSublayer(gradientLayer)
}
}
class gradientToTextField: UITextField {
var once = true
override func layoutSubviews() {
super.layoutSubviews()
if once {
self.gradientBackground(firstColor: UIColor(red: 0.30, green: 0.55, blue: 1.00, alpha: 1), secondColor: UIColor(red: 0.00, green: 0.36, blue: 1.00, alpha: 1))
once = false
}
}
}
Now if you take a look at the second image on the right, the last section expands on tapping the Plus sign button. As a result, the third section(starting with Total) is hidden and a new stack view appears below within the same section. Everything resizes perfectly except the gradient layer. I have set a red background behind it which is the UITextField's Background, so the problem is highlighted. It appears that the Gradient Layer is shorter in height than the UITextField, which is its parent element.
Here's the full project on GitHub: https://github.com/silviuisidor/layerResizeProblem
How can I fix this?
tl:dr — Instead of gradient layer that is a sublayer of the text field, you use a gradient view with the text field as its subview.
More details
Instead of a gradient layer, use a gradient view. The view exists purely to host a gradient layer as its underlying layer; you arrange this by subclassing UIView and implementing layerClass to return CAGradientLayer.self.
class MyGradientView : UIView {
override class var layerClass : AnyClass { return CAGradientLayer.self }
private func config() {
let gradientLayer = self.layer as! CAGradientLayer
let firstColor = UIColor(red: 0.30, green: 0.55, blue: 1.00, alpha: 1)
let secondColor = UIColor(red: 0.00, green: 0.36, blue: 1.00, alpha: 1)
gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x:0.0, y:0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
}
override init(frame: CGRect) {
super.init(frame:frame)
self.config()
}
required init?(coder: NSCoder) {
super.init(coder:coder)
self.config()
}
}
Now make the text field the subview of our gradient view. Pin it using autolayout to the center of the gradient view. The gradient view, with its text field subview, is what goes into the interface. When the animation takes place, it is the gradient view that is resized! And when that happens, the text field is automatically repositioned along with it.
Resizing the layer frame in layoutSubviews should solve your problem
extension UITextField {
func gradientBackground(firstColor: UIColor, secondColor: UIColor) -> CAGradientLayer{
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x:0.0, y:0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
layer.addSublayer(gradientLayer)
return gradientLayer
}
}
class gradientToTextField: UITextField {
var coloredLayer : CAGradientLayer! = nil
var once = true
override func layoutSubviews() {
super.layoutSubviews()
if once {
coloredLayer = self.gradientBackground(firstColor: UIColor(red: 0.30, green: 0.55, blue: 1.00, alpha: 1), secondColor: UIColor(red: 0.00, green: 0.36, blue: 1.00, alpha: 1))
once = false
}
coloredLayer.frame = self.bounds
}
}
This question already has an answer here:
Constraints not updating with device orientation change
(1 answer)
Closed 5 years ago.
I am building a sample login page. Everything is working fine but when I run the project on the device in landscape mode, the background color is covering only half part of the screen. I searched Google. I found 1 matching answer but it's not working.
Here is my code for background color:
let topColor = UIColor(red: 254/255.0, green: 81/255.0, blue: 150/255.0, alpha: 1)
let bottomColor = UIColor(red: 247/255.0, green: 112/255.0, blue: 98/255.0, alpha: 1.0)
let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]
let gradientLocations: [Float] = [0.0, 1.0]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations as [NSNumber]
gradientLayer.frame = self.view.bounds
self.view.layer.insertSublayer(gradientLayer, at: 0)
And the result I'm getting:
This is a common mistake. The frame of the gradientLayer does not get updated when the view is laid out for the landscape mode. You have to do it manually.
SOLUTION
Be sure that you create gradientLayer and insert it as sublayer only once (e.g., in viewDidLoad). Keep gradientLayer as a instance property of the viewController so that you have access to it.
Then override layoutSubviews and there refresh the frame of the gradientLayer:
override func layoutSubviews() {
super.layoutSubviews()
// at this self.view has updated its layout, so now you can update gradientLayer's frame
gradientLayer.frame = self.view.bounds
}
I have laid out my app in Xcode using iPhone SE view. The buttons etc all appear under testing how they should.
However when I test in a large screen, i.e iPhone 7 a couple of weird things happen.
1) Buttons hug the right hand side even though I have the constraints set to be 20px from margins
And secondly, a the gradient that I have applied to my buttons seems to stop 3/4 across the button in this instance:
It is the same code being called in each instance of the buttons:
let orangeGradient = CAGradientLayer().orangeButtonColor()
orangeGradient.frame = self.joinCommunityButton.bounds
self.joinCommunityButton.layer.insertSublayer(orangeGradient, at: 0)
extension CAGradientLayer {
func bespokeColor() -> CAGradientLayer {
let topColor = UIColor(red: (46/255.0), green: (63/255.0),blue: (81/255.0), alpha: 1)
let bottomColor = UIColor(red: (22/255.0), green: (31/255.0),blue: (41/255.0), alpha: 1)
let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]
let gradientLocations: [Float] = [0.0, 1.0]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations as [NSNumber]?
return gradientLayer
}
func orangeButtonColor() -> CAGradientLayer {
let topColor = UIColor(red: (211/255.0), green: (115/255.0),blue: (28/255.0), alpha: 1)
let bottomColor = UIColor(red: (171/255.0), green: (80/255.0),blue: (14/255.0), alpha: 1)
let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]
let gradientLocations: [Float] = [0.0, 1.0]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations as [NSNumber]?
return gradientLayer
}
func purpleButtonColor() -> CAGradientLayer {
let topColor = UIColor(red: (112/255.0), green: (41/255.0),blue: (183/255.0), alpha: 1)
let bottomColor = UIColor(red: (85/255.0), green: (19/255.0),blue: (159/255.0), alpha: 1)
let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]
let gradientLocations: [Float] = [0.0, 1.0]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations as [NSNumber]?
return gradientLayer
}
func greenButtonColor() -> CAGradientLayer {
let topColor = UIColor(red: (35/255.0), green: (193/255.0),blue: (67/255.0), alpha: 1)
let bottomColor = UIColor(red: (31/255.0), green: (148/255.0),blue: (53/255.0), alpha: 1)
let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]
let gradientLocations: [Float] = [0.0, 1.0]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations as [NSNumber]?
return gradientLayer
}
}
Here is an screenshot of what I believe are the auto layout settings:
In viewDidLoad, autoLayout hasn't taken effect yet so your button bounds are not device specific.
Put
orangeGradient.frame = self.joinCommunityButton.bounds in viewDidLayoutSubviews or viewDidAppear
Make sure to add gradients or perform tasks related to UIView frame or bounds after viewDidLayoutSubviews has been called if you are using autoLayout.
Also,
Don't put the initialization of the CAGradientLayer() inside the viewDidAppear or viewDidLayoutSubviews functions as they are called multiple times and will keep adding layers to your UIView, you should just change the bounds inside the two methods.
Please make sure you are using AutoLayout in interface builder.If you are using then make sure they have left margin too.
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)
}
Is there a preferred method to add an auto-resizing gradient layer to a UIView or UILabel that will conform to the autolayout constraints set in IB (Xcode 6) and a wAny hAny canvass, using Swift?
For example, I can start with two labels that span universal widths using constraints using an wAny and hAny canvass, but when running the app on an iPad2 simulator, the labels size correctly but not the gradient layer.
I've looked into willAnimateRotationToInterfaceOrientation and adding a notification based on UIDeviceOrientationDidChangeNotification, but this is not helpful when the app is loaded in landscape (although once rotated the layers are redrawn and do match).
The only solution I have found is to manally adjust the width of each button to conform to the maximum view width of each (iPad2 in landscape) in the Utilities side panel in Xcode, but that creates "misplaced view" warnings and a messy canvass.
Any other ideas?
Here is what I have:
In viewDidLoad, I send each button through this:
Example:
//viewDidLoad --
self.configButton(self.button1!)
self.configButton(self.button2!)
self.configButton(self.button3!)
//
func configButton(theButton: UIButton){
let gradient: CAGradientLayer = CAGradientLayer()
gradient.frame.size = theButton.frame.size
theButton.layer.insertSublayer(gradient, atIndex: 0)
let topR = CGFloat(13.0)
let topG = CGFloat(55.0)
let topB = CGFloat(112.0)
let bottomR = CGFloat(90.0)
let bottomG = CGFloat(126.0)
let bottomB = CGFloat(167.0)
let colorTop = UIColor(red: CGFloat(topR/255.0), green: CGFloat(topG/255.0), blue: CGFloat(topB/255.0), alpha: 1.0).CGColor
let colorBottom = UIColor(red: CGFloat(bottomR/255.0), green: CGFloat(bottomR/255.0), blue: CGFloat(bottomR/255.0), alpha: 1.0).CGColor
let gradientColors: [AnyObject] = [colorTop, colorBottom]
gradient.colors = gradientColors
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
let theCornerRadius: CGFloat = 5.0
theButton.layer.cornerRadius = theCornerRadius
theButton.layer.masksToBounds = true
theButton.layer.borderWidth = 0.1
theButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
}
I would do this by subclassing UIButton, and putting the configureButton method, minus the layer sizing line, in that class. You can then set the frame of the gradient layer equal to the bounds of its super layer (the button's default layer) in layoutSublayersOfLayer because that layer automatically resizes to keep it the same size as the button. You don't need any code in the controller with this approach.
class RDButton: UIButton {
let gradient = CAGradientLayer()
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
configureButton()
}
func configureButton() {
self.layer.insertSublayer(gradient, atIndex: 0)
let topR = CGFloat(13.0)
let topG = CGFloat(55.0)
let topB = CGFloat(112.0)
let bottomR = CGFloat(90.0)
let bottomG = CGFloat(126.0)
let bottomB = CGFloat(167.0)
let colorTop = UIColor(red: CGFloat(topR/255.0), green: CGFloat(topG/255.0), blue: CGFloat(topB/255.0), alpha: 1.0).CGColor
let colorBottom = UIColor(red: CGFloat(bottomR/255.0), green: CGFloat(bottomR/255.0), blue: CGFloat(bottomR/255.0), alpha: 1.0).CGColor
let gradientColors: [AnyObject] = [colorTop, colorBottom]
gradient.colors = gradientColors
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
let theCornerRadius: CGFloat = 5.0
self.layer.cornerRadius = theCornerRadius
self.layer.masksToBounds = true
self.layer.borderWidth = 0.1
self.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
}
override func layoutSublayersOfLayer(layer: CALayer!) {
super.layoutSublayersOfLayer(layer)
gradient.frame = layer.bounds
}
}
Here is what I came up with to pass gradient colors to this new button class:
import Foundation
import UIKit
import QuartzCore
class RDButton: UIButton{
let gradient = CAGradientLayer()
var gradientColors: [Int] = []
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
func configureButton(thecolors: [Int]) {
println("thecolors: \(thecolors)")
self.layer.insertSublayer(gradient, atIndex: 0)
let topR = CGFloat(thecolors[0])
let topG = CGFloat(thecolors[1])
let topB = CGFloat(thecolors[2])
let bottomR = CGFloat(thecolors[3])
let bottomG = CGFloat(thecolors[4])
let bottomB = CGFloat(thecolors[5])
let colorTop = UIColor(red: CGFloat(topR/255.0), green: CGFloat(topG/255.0), blue: CGFloat(topB/255.0), alpha: 1.0).CGColor
let colorBottom = UIColor(red: CGFloat(bottomR/255.0), green: CGFloat(bottomR/255.0), blue: CGFloat(bottomR/255.0), alpha: 1.0).CGColor
let gradientColors: [AnyObject] = [colorTop, colorBottom]
gradient.colors = gradientColors
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
let theCornerRadius: CGFloat = 5.0
self.layer.cornerRadius = theCornerRadius
self.layer.masksToBounds = true
self.layer.borderWidth = 0.1
self.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
}
override func layoutSublayersOfLayer(layer: CALayer!) {
super.layoutSublayersOfLayer(layer)
gradient.frame = layer.bounds
}
}
In the View Controller, I did this:
#IBOutlet weak var mySweetButton: RDButton?
// etc for each button
let buttonsgradient = [13,55,112,90,126,167]
override func viewDidLoad(){
super.viewDidLoad()
//...
mySweetButton?.configureButton(buttonsgradient)
/// etc for each button
// ...
}
Probably not the optimal way of doing this ...