In a UICollectionViewCell i'm adding a gradient to a UIImageView like this:
override func layoutSubviews() {
super.layoutSubviews()
if thumbnailImageView.layer.sublayers?.first == nil {
thumbnailImageView.addGradient(firstColor: .clear, secondColor: .black)
}
}
I want to do the same but in a UIViewController, so far I could only make it work on viewDidAppear
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
if thumbnailImageView.layer.sublayers?.first == nil {
thumbnailImageView.addGradient(firstColor: .clear, secondColor: .black)
}
}
I want to the UIImageView to have the gradient as soon as it appears like I did in UICollectionView. Do you know how can I do this?
extension UIView{
func addGradient(firstColor: UIColor, secondColor: UIColor){
clipsToBounds = true
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
gradientLayer.frame = self.bounds
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 0, y: 1)
self.layer.insertSublayer(gradientLayer, at: 0)
}
}
You can call it in viewDidLayoutSubviews
Related
When a user clicks on a button, it randomizes the colors used to create a gradient in a large circle. Beneath it are two small circles that display the solid colors used for the gradient. They all display correctly at the start (main circle is a gradient of the randomized smaller circles' color) but when I click on the button, only the smaller circles change color; the large circle stays at the same gradient colors.
Extensions and View Controller:
extension UIView {
func setupGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = [colorOne.cgColor, colorTwo.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)
gradientLayer.frame = self.bounds
self.layer.insertSublayer(gradientLayer, at: 0)
}
}
extension UIColor {
static var random: UIColor {
return UIColor(red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1), alpha: 1.0)
}
}
class GradientController: UIViewController {
let gradientView = GradientView()
let leftGradientColor: UIColor = .random
let rightGradientColor: UIColor = .random
}
override func viewDidLoad() {
super.viewDidLoad()
view = gradientView
newGradient()
}
func newGradient() {
gradientView.mainCircleView.setupGradientBackground(colorOne: leftGradientColor, colorTwo: rightGradientColor)
gradientView.colorCircleLeftView.backgroundColor = leftGradientColor
gradientView.colorCircleRightView.backgroundColor = rightGradientColor
gradientView.gradientGenerateButton.addTarget(self, action: #selector(randomGradient(sender:)), for: .touchUpInside)
}
#objc func randomGradient(sender: UIButton)
{
let leftGradient = UIColor.random
let rightGradient = UIColor.random
gradientView.colorCircleLeftView.backgroundColor = leftGradient
gradientView.colorCircleRightView.backgroundColor = rightGradient
//Here is where it's not changing colors. Doesn't seem like the VC recognizes it in this function
gradientView.mainCircleView.setupGradientBackground(colorOne: leftGradient, colorTwo: rightGradient)
}
View:
class GradientView: UIView {
//circle's UIView code in Extensions
let mainCircleView = UIView().circleView(width: 380, height: 380)
let colorCircleLeftView = UIView().circleView(width: 40, height: 40)
let colorCircleRightView = UIView().circleView(width: 40, height: 40)
...
func setupLayout() {
...
}
}
What I've tried is changing the mainCircleView color to solid UIColors, like gradientView.mainCircleView.setupGradientBackground(colorOne: .red, colorTwo: .orange) to see if the main Circle changes to those colors in both func newGradient() and #objc func randomGradient(sender: UIButton). It only changes in func newGradient() what I've set manually, so that means the VC isn't recognizing the main Circle in the #objc func but I'm lost on how to fix it...
Any help is appreciated!
What it looks like when I click the "Generate" button (large circle should be showing brown and purple):
Update your function with this, You have to remove old layer and then insert new Sublayer.
Solution 1 :
func setupGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
if let gradientLayer = (self.layer.sublayers?.compactMap { $0 as? CAGradientLayer })?.first {
gradientLayer.removeFromSuperlayer()
}
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = [colorOne.cgColor, colorTwo.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)
gradientLayer.frame = self.bounds
self.layer.insertSublayer(gradientLayer, at: 0)
}
Solution 2 :
func setupGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
let gradientLayer = layer.sublayers?.first as? CAGradientLayer ?? CAGradientLayer()
gradientLayer.colors = [colorOne.cgColor, colorTwo.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)
gradientLayer.frame = self.bounds
guard gradientLayer.superlayer != self else {
return
}
layer.insertSublayer(gradientLayer, at: 0)
}
Solution 3 :
you can set name to your CAGradientLayer, This will help you for removing that particular layer.
func setupGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
for layer in layer.sublayers ?? [] {
if layer.name == "GradientLayer" {
layer.removeFromSuperlayer()
}
}
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = [colorOne.cgColor, colorTwo.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)
gradientLayer.name = "GradientLayer"
gradientLayer.frame = self.bounds
self.layer.insertSublayer(gradientLayer, at: 0)
}
The gradient does not change because you add a new gradient below the existing one
extension UIView {
func setupGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
let gradientLayer: CAGradientLayer = CAGradientLayer()
...
// ⬇ There is a mistake.
self.layer.insertSublayer(gradientLayer, at: 0)
}
}
You should change the current gradient with this new one. Or insert a new one above the old one.
Changing the gradient layer colors after setting it
extension CALayer {
func updateGradientColors(_ colors:CGColor...) {
if let layer = sublayers?.first as? CAGradientLayer {
let frame = CGRect(origin: self.bounds.origin, size: CGSize(width: self.bounds.size.width, height: self.bounds.size.height))
layer.frame = frame
layer.colors = colors
}
}
}
I I am trying to give the Gradient color for Button Baground, I am trying with following code
func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
layer.insertSublayer(gradientLayer, at: 0)
}
#IBOutlet weak var loginbtn: UIButton!
loginbtn.setGradientBackground(colorOne: UIColor.red, colorTwo: UIColor.blue)
I am trying to access this method it will show the output like this How to we fix this,
If I add following code
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
loginbtn.setGradientBackground(colorOne: UIColor.red, colorTwo: UIColor.green)
}
it will show the following error.
Make sure you are setting the gradient frame after auto-layout has set the size of the button.
If you subclass the button, you can do so in layoutSubviews().
Otherwise, A good place to do this in your view controller is in viewDidLayoutSubviews():
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
loginbtn.setGradientBackground(colorOne: UIColor.red, colorTwo: UIColor.blue)
}
Edit
Based on the second image you posted - getting over-lapping gradients when called from viewDidLayoutSubviews()... As auto-layout "does its thing," that can be called more than once, and you are adding a new layer each time that is called.
I don't know what else you might be doing in your custom class, but give it a try like this:
class GradButton: UIButton {
let gradientLayer = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
gradientLayer.locations = [0.0, 1.0]
// top-right to bottom-left
gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
// we only add the layer once, here when called from init
layer.addSublayer(gradientLayer)
}
func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
}
override func layoutSubviews() {
super.layoutSubviews()
gradientLayer.frame = bounds
}
}
class MyTest: UIViewController {
#IBOutlet var loginbtn: GradButton!
override func viewDidLoad() {
super.viewDidLoad()
loginbtn.setGradientBackground(colorOne: .red, colorTwo: .yellow)
}
}
Result:
I built the tab bar through the storyboard, and to customise the colour I change it in the app delegate, with UITabBar.appearance().barTintColor = Color,
I have a gradient method which is this:
func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
let gradientlayer = CAGradientLayer()
gradientlayer.frame = bounds
gradientlayer.colors = [colorOne.cgColor, colorTwo.cgColor]
gradientlayer.locations = [0, 1]
gradientlayer.startPoint = CGPoint(x: 1.0, y: 0.0)
gradientlayer.endPoint = CGPoint(x: 0.0, y: 0.0)
layer.insertSublayer(gradientlayer, at: 0)
}
How do I apply this to the background of my tab bar?
Just create a subclass of UITabBarController
class GradientTabBarController: UITabBarController {
let gradientlayer = CAGradientLayer()
override func viewDidLoad() {
super.viewDidLoad()
setGradientBackground(colorOne: .yellow, colorTwo: .red)
}
func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
gradientlayer.frame = tabBar.bounds
gradientlayer.colors = [colorOne.cgColor, colorTwo.cgColor]
gradientlayer.locations = [0, 1]
gradientlayer.startPoint = CGPoint(x: 1.0, y: 0.0)
gradientlayer.endPoint = CGPoint(x: 0.0, y: 0.0)
self.tabBar.layer.insertSublayer(gradientlayer, at: 0)
}
}
Assign GradientTabBarController class in the storyboard instead of UITabBarController
Main pros of this methodology are below.
No need to define delegate methods of UITabBar
No need to write code in each UIViewController
Step 1
Assuming that you have built a tab bar that way, make sure it's the delegate to your ViewController.
Step 2
In your ViewController.swift use the following code:
import UIKit
class ViewController: UIViewController, UITabBarDelegate {
#IBOutlet weak var tabBar: UITabBar!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
setGradientBackground(colorOne: .blue, colorTwo: .red)
}
func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
let gradientlayer = CAGradientLayer()
gradientlayer.frame = tabBar.bounds
gradientlayer.colors = [colorOne.cgColor, colorTwo.cgColor]
gradientlayer.locations = [0, 1]
gradientlayer.startPoint = CGPoint(x: 1.0, y: 0.0)
gradientlayer.endPoint = CGPoint(x: 0.0, y: 0.0)
self.tabBar.layer.insertSublayer(gradientlayer, at: 0)
}
}
Result
I have a UINavigationController with prefersLargeTitles = true I'd like to apply a background colour to my nav bar, with a gradient mask so the colour essentially fades to a darker version.
I have tried to create a UIView apply the mask and render this. This however involves rendering the UIView as a UIImage and then as a UIColor so I can set the barTintColor.
This works when just rendering a UIView but when setting it on the navigation bar, the behaviour is not as I would like.
I would like that gradient to fill the entire green area.
class BaseViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
configureNavigationBar()
}
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
func hideNavigationBar() {
navigationController?.setNavigationBarHidden(true, animated: false)
}
func showNavigationBar() {
navigationController?.setNavigationBarHidden(false, animated: false)
}
private func configureNavigationBar() {
navigationController?.navigationBar.prefersLargeTitles = true
navigationController?.navigationBar.isTranslucent = false
navigationItem.title = "Home"
let v = BrandedHeader(frame: .zero)
v.frame = navigationController?.navigationBar.frame ?? .zero
navigationController?.navigationBar.barTintColor = UIColor(patternImage: v.asImage()!)
}
}
extension UIImage {
static func usingHex(_ hex: String) -> UIImage {
let color = UIColor.usingHex(hex)
let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
context!.setFillColor(color.cgColor)
context!.fill(rect)
let img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return img!
}
}
extension UIView {
func asImage() -> UIImage? {
if #available(iOS 10.0, *) {
let renderer = UIGraphicsImageRenderer(bounds: bounds)
return renderer.image { rendererContext in
layer.render(in: rendererContext.cgContext)
}
} else {
UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.isOpaque, 0.0)
defer { UIGraphicsEndImageContext() }
guard let currentContext = UIGraphicsGetCurrentContext() else {
return nil
}
self.layer.render(in: currentContext)
return UIGraphicsGetImageFromCurrentImageContext()
}
}
}
class BrandedHeader: UIView {
let gradient: CAGradientLayer = CAGradientLayer()
override init (frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.green
gradient.frame = frame
gradient.colors = [UIColor.clear, UIColor.black.withAlphaComponent(0.3)].map { $0.cgColor }
gradient.locations = [0.0, 0.7]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 1.0, y: 0.0)
layer.insertSublayer(gradient, at: 0)
}
required init?(coder aDecoder: NSCoder) {
return nil
}
override func layoutSubviews() {
super.layoutSubviews()
gradient.frame = frame
gradient.removeAllAnimations()
}
}
To answer your question, I don't think gradient.frame = frame in your BrandedHeader init is doing anything. I believe you explicitly need to set the height prop in layoutSubviews.
Something like gradient.frame = CGRect(x: 0, y: 0, width: frame.width, height: 500) - although I haven't tried that so please consider adjusting the values
I'm not sure if this approach is the best approach for what you are trying to achieve, I will comeback and update this answer once I have tried another way to achieve this.
The following code shows how to make a navigation bar with gradient colors. It's tested under Swift 5.
// ViewController.swift //
import UIKit
class ViewController: UIViewController {
// MARK: - Variables
// MARK: - IBOutlet
// MARK: - IBAction
// MARK: - Life cycle
override func viewDidLoad() {
super.viewDidLoad()
let titleString = "Home"
let navBar = navigationController!.navigationBar
let atext = NSMutableAttributedString(string: titleString)
let range = NSMakeRange(0, titleString.count)
atext.addAttributes([NSAttributedString.Key.foregroundColor: UIColor.white], range: range)
atext.addAttributes([NSAttributedString.Key.strokeColor: UIColor.yellow], range: range)
atext.addAttributes([NSAttributedString.Key.strokeWidth: NSNumber.init(value: -1.0)], range: range)
let titleLabel: UILabel = UILabel.init(frame: CGRect(x: 50, y: 3, width: 220-100, height: 44))
titleLabel.attributedText = atext
titleLabel.textAlignment = NSTextAlignment.center
titleLabel.font = UIFont(name: "Helvetica", size: 24.0)
self.navigationItem.titleView = titleLabel
let rect = CGRect(x: 0, y: -20, width: (self.navigationController?.navigationBar.bounds.width)!, height: (self.navigationController?.navigationBar.bounds.height)! + 20)
let colors = [UIColor.blue, UIColor.purple, UIColor.red]
let points: [CGFloat] = [0.1, 0.5, 0.9]
let gradientView = GradientView(frame: rect, backColor: UIColor.white, gradientColors: colors, points: points, isVertical: true)
gradientView.backgroundColor = UIColor.white
navBar.insertSubview(gradientView, at: 1)
navBar.layer.shadowColor = UIColor.black.cgColor
navBar.layer.shadowRadius = 4.0
navBar.layer.shadowOpacity = 0.6
navBar.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
}
}
// GradientView.swift (subclass of UIView) //
import UIKit
class GradientView: UIView {
var backColor: UIColor
var gradientColors: [UIColor]
var points: [CGFloat]
var isVertical: Bool
init(frame: CGRect, backColor: UIColor, gradientColors: [UIColor], points: [CGFloat], isVertical: Bool) {
self.backColor = backColor
self.gradientColors = gradientColors
self.points = points
self.isVertical = isVertical
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
super.draw(rect)
backColor.set()
UIRectFill(rect)
let gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = self.bounds
var colors = [CGColor]()
for i in 0..<gradientColors.count {
let color = gradientColors[i]
colors.append(color.cgColor)
}
gradient.colors = colors
var locations = [CGFloat]()
for i in 0..<points.count {
let point = points[i]
locations.append(point)
}
gradient.locations = locations as [NSNumber]
if !isVertical {
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 1.0, y: 0.0)
}
layer.addSublayer(gradient)
}
}
If you want to run the colors horizontally (left to right), set the isVertical switch to false.
I have recently upgraded to Xcode 9 with Swift 4 which has in turn updated all the iOS emulators.
Since the update, I have found that after I apply a gradient to the UINavigationBar; the title and buttons do not appear, yet still have functionality.
Here is the code to applying my gradient -
extension UIView {
func applyNavGradient(colours: [UIColor]) -> Void {
self.applyNavGradient(colours: colours, locations: nil)
}
func applyNavGradient(colours: [UIColor], locations: [NSNumber]?) -> Void {
let gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = colours.map { $0.cgColor }
gradient.locations = locations
self.layer.addSublayer(gradient)
self.backgroundColor = UIColor.clear
}
}
class ViewController {
override func viewDidLoad() {
UINavigationBar.applyNavGradient(colours: redFade)
}
This used to work in Xcode 8 with iOS10 -
Now all I get is this;
Can anyone give me some clue as to why this has changed??
Thank you in advance!
Chris.
You can use UIColor.init(patternImage image: UIImage) method to assign barTintColor of navigationBar
Here is the sample code
func applyNavGradient(colours: [UIColor]) -> UIImage? {
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: navigationController!.navigationBar.frame.size.height + navigationController!.navigationBar.frame.origin.y)
gradientLayer.colors = colours.map { $0.cgColor }
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
UIGraphicsBeginImageContext(gradientLayer.bounds.size)
gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
After that you can call like this to set gradient
if let img = applyNavGradient(colours: [UIColor.red, UIColor.yellow]) {
navigationController?.navigationBar.barTintColor = UIColor(patternImage: img)
}