I'm trying to change the background of a navigation bar by creating a layer and adding it as a sublayer to the navigation bar. However, this is only affecting the navigation bar.
I wan't it to affect the whole top of the screen. Code included:
let navBarLayer = StyleUtils.createGradientLayerWithColors(color: StyleUtils.Colors.SKY_BLUE, frame: (self.navigationController?.navigationBar.bounds)!)
self.navigationController?.navigationBar.layer.addSublayer(navBarLayer)
The createGradientLayerWithColors function returns a CAGradientLayer for the given frame.
What am I missing? Thank you in advance.
EDIT:
I tried Nathaniel answer, but got this:
It's worth mentioning that this is also a TableView.
SOLUTION:
I found this question that helped me solve the problem.
The final correct code is:
func setNavBarColor() {
let navBar = self.navigationController?.navigationBar
//Make navigation bar transparent
navBar?.setBackgroundImage(UIImage(), for: .default)
navBar?.shadowImage = UIImage()
navBar?.isTranslucent = true
//Create View behind navigation bar and add gradient
let behindView = UIView(frame: CGRect(x: 0, y:0, width: UIApplication.shared.statusBarFrame.width, height: UIApplication.shared.statusBarFrame.height + (navBar?.frame.height)!))
let layerTop = StyleUtils.createGradientLayerWithColors(color: StyleUtils.Colors.SKY_BLUE, frame: behindView.bounds)
behindView.layer.insertSublayer(layerTop, at: 0)
self.navigationController?.view.insertSubview(behindView, belowSubview: navBar!)
}
This is how I manage it.
First I set the NavigationBar to transparent:
self.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true
self.navigationBar.backgroundColor = UIColor.clear
Then I add the gradient to the view behind the status bar and the navigation bar:
let gradient = CAGradientLayer()
gradient.frame = CGRect(x: 0, y: 0, width: UIApplication.sharedApplication().statusBarFrame.width, height: UIApplication.sharedApplication().statusBarFrame.height + self.navigationController!.navigationBar.frame.height)
gradient.locations = [0.0,1.0]
gradient.colors = [UIColor.anyColor().colorWithAlphaComponent(0.4).CGColor, UIColor.clearColor().CGColor]
self.view.layer.addSublayer(gradient)
self.view.backgroundColor = UIColor.clear
My option:
let gradientLayer = CAGradientLayer()
let layerY = -UIApplication.shared.statusBarFrame.size.height as CGFloat
let layerHeight = (self.navigationController?.navigationBar.frame.size.height)! + UIApplication.shared.statusBarFrame.size.height as CGFloat
gradientLayer.frame = CGRect(x: 0, y: layerY, width: 1366, height: layerHeight)
gradientLayer.colors = [UIColor(red: 16/255.0, green: 57/255.0, blue: 82/255.0, alpha: 1.0).cgColor, UIColor(red: 17/255.0, green: 132/255.0, blue: 157/255.0, alpha: 1.0).cgColor]
self.navigationController?.navigationBar.layer.addSublayer(gradientLayer)
It is not better, simply just another way to do the same.
Related
I am beginner in Swift/Xcode. I made a custom class in my Xcode project to handle buttons appearance (color, shape etc) that works find.
However, I can't succeed to add gradients to these buttons.
I tried the below code, but it adds a new squared gradient onto my rounded buttons instead of applying the intended gradients to those buttons. Here is what I already gave many tries:
- add this code to my custom button class (inheriting from UIButton)
- add this code to my custom button class (inheriting from UIView)
- above 2 approaches and removing the backgroungColor settings
- Using a separate function called from viewController
func ConfigMenuButtons() {
// Set button shape color
layer.cornerRadius = 37
// Set button size
translatesAutoresizingMaskIntoConstraints = false
widthAnchor.constraint(equalToConstant: 74).isActive = true
heightAnchor.constraint(equalToConstant: 74).isActive = true
// Set button text
setTitleColor(.white, for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)
// Set button shadow
layer.shadowRadius = 2
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowOpacity = 0.8
// Set button gradient colors
let lightBlue = UIColor(red: 122/255, green: 127/255, blue: 249/255, alpha: 1)
let darkBlue = UIColor(red: 74/255, green: 88/255, blue: 205/255, alpha: 1)
// Set gradients
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
gradientLayer.locations = [0.0,1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
clipsToBounds = true
// insert gradients to button
layer.insertSublayer(gradientLayer, at: 0)
}
But I always end up with this "square shaped gradient layer" appearing onto the targeted buttons, instead of having these gradients applied directly to these buttons.
If someone had any piece of advice, it would be fantastic.
Thank you!
Here is the screen shot of the button with its partial expected effect
Here is a screenshot of fixed issue
I finally fixed the issue as below adding a CGRect size.
func ConfigMenuButtons() {
// Set button shape
layer.cornerRadius = 37
// Set button size
translatesAutoresizingMaskIntoConstraints = false
widthAnchor.constraint(equalToConstant: 74).isActive = true
heightAnchor.constraint(equalToConstant: 74).isActive = true
// Set button text
setTitleColor(.white, for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)
// Set button shadow
layer.shadowRadius = 2
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowOpacity = 0.8
// Set button gradient colors
let lightBlue = UIColor(red: 112/255, green: 117/255, blue: 239/255, alpha: 1)
let darkBlue = UIColor(red: 70/255, green: 84/255, blue: 201/255, alpha: 1)
// Set gradients
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
gradientLayer.locations = [0.0,1.0]
gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
// THAT IS THE LINE THAT COULD FIX THE ISSUE
gradientLayer.frame = CGRect(x: 0, y: 0, width: 74, height: 74)
// Set rounded shape
gradientLayer.cornerRadius = 37
// insert gradients to button
layer.insertSublayer(gradientLayer, at: 0)
}
Here is what I am trying to do:
The screenshot is taken from Iphone:
This is my code:
#IBOutlet weak var viewBottomBorder: UIView!
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
let whiteColor = UIColor.black
gradient.colors = [whiteColor.withAlphaComponent(0.0).cgColor, whiteColor.withAlphaComponent(1.0), whiteColor.withAlphaComponent(1.0).cgColor]
gradient.locations = [NSNumber(value: 0.0),NSNumber(value: 0.2),NSNumber(value: 1.0)]
gradient.frame = viewBottomBorder.bounds
viewBottomBorder.layer.mask = gradient
Question: How to show same text in white color with gradient?
Can someone please explain to me how to solve this , i've tried to solve this issue but no results yet.
Any help would be greatly appreciated.
Thanks in advance.
You need to start your gradient at the top, because it's darker at the top. So x should be have max alpha. Then as y increases reduce the alpha.
Try this:
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 1.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
let whiteColor = UIColor.black
gradient.colors = [whiteColor.withAlphaComponent(1.0).cgColor, whiteColor.withAlphaComponent(1.0), whiteColor.withAlphaComponent(0.0).cgColor]
gradient.locations = [NSNumber(value: 1.0),NSNumber(value: 0.7),NSNumber(value: 0.0)]
gradient.frame = viewBottomBorder.bounds
viewBottomBorder.layer.mask = gradient
A little alternative:
func setupGradient(on view: UIView, withHeight height: CGFloat) {
// this is view that holds gradient
let gradientHolderView = UIView()
gradientHolderView.backgroundColor = .clear
gradientHolderView.translatesAutoresizingMaskIntoConstraints = false
// here you set layout programmatically (you can create this view in storyoard as well and attach gradient to it)
// make sure to position this view under your text
view.addSubview(gradientHolderView) // alternative: view.insertSubview(gradientHolderView, belowSubview: YourTextLaber)
gradientHolderView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
gradientHolderView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
gradientHolderView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
gradientHolderView.heightAnchor.constraint(equalToConstant: height).isActive = true
// this is needed to kinda refresh layout a little so later we can get bounds from view. I'm not sure exactly why but without this if you create view programmatically it is needed
gradientHolderView.setNeedsLayout()
gradientHolderView.layoutIfNeeded()
// here you create gradient as layer and add it as a sublayer on your view (modify colors as you like)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = gradientHolderView.bounds
gradientLayer.colors = [UIColor.clear.cgColor, UIColor(white: 0, alpha: 0.6).cgColor]
gradientHolderView.layer.addSublayer(gradientLayer)
}
Use above code to apply Gradient to your view
var gradientBackground : CAGradientLayer?
func applyGradientToBackground() {
if self.gradientBackground != nil {
self.gradientBackground?.removeFromSuperlayer()
}
self.gradientBackground = CAGradientLayer()
self.gradientBackground?.frame = self.your_view_name.bounds
let cor1 = UIColor.black.withAlphaComponent(1).cgColor
let cor2 = UIColor.white.cgColor
let arrayColors = [cor1, cor2]
self.gradientBackground?.colors = arrayColors
self.your_view_name.layer.insertSublayer(self.gradientBackground!, at: 0)
}
Following this question, I am able to make a background gradient for a UINavigationBar, however when I try to set it through UIAppearance, the app crashes in the didFinishLaunching because there is no current CGContext. How can I get around this and still have all my UIAppearance code in the app delegate?
The code being called just before return true in the didFinishLaunching:
private func setNavBarAppearance() {
let titleAttributes: [NSAttributedStringKey: Any] = [.foregroundColor: UIColor.white]
UINavigationBar.appearance().titleTextAttributes = titleAttributes
UINavigationBar.appearance().barTintColor = .white
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().makeTransparent()
// Set gradient
let colors = [UIColor.lavender.cgColor, UIColor.mint.cgColor]
let gradientLayer = CAGradientLayer()
gradientLayer.frame = UINavigationBar.appearance().bounds
gradientLayer.colors = colors
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.5)
let image = UIImage(layer: gradientLayer)
UINavigationBar.appearance().setBackgroundImage(image, for: .default)
}
When calling UIGraphicsBeginImageContext, you must provide a non-zero CGRect. In my case I was setting the frame to UINavigationBar.appearance().bounds which is a zero rect in the app delegate. To get around this I simply set the gradient frame to CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 1)
The shadow is appearing on top of the navigation bar. Is there anyway to move the shadow underneath the bar or add some code so it doesn't discolor the bar?
This is the code I use in my navigation controller:
import UIKit
class navigationController:UINavigationController, UIViewControllerTransitioningDelegate{
override func viewDidLoad()
{
var appblue = UIColor(red: 109/255, green: 208/255, blue:247/255, alpha: 1.0)
self.navigationBar.barTintColor = appblue
self.navigationBar.layer.masksToBounds = false
self.navigationBar.layer.shadowColor = UIColor.black.cgColor
self.navigationBar.layer.shadowOpacity = 0.7
self.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 2.0)
self.navigationBar.layer.shadowRadius = 4
}
}
and this is what it looks like:
When it should be this color:
Any suggestions?
This is what im trying to make it look like(photo shopped picture):
(the top bar bottom shadow while retaining the second bars color)
Added a image view with a gradient to the bottom of the bar to accomplish what I was going for, Thanks to #Anbu.Karthik for linking another question that I was able to adapt. This is my current code:
import UIKit
class navigationController:UINavigationController, UIViewControllerTransitioningDelegate{
override func viewDidLoad()
{
var appblue = UIColor(red: 109/255, green: 208/255, blue:247/255, alpha: 1.0)
self.navigationBar.barTintColor = appblue
self.navigationBar.layer.masksToBounds = false
var yPosition = self.navigationBar.layer.frame.height
var rectWidth = self.navigationBar.layer.frame.width
let gradient = CAGradientLayer()
let bottomShadow: UIImageView = UIImageView()
bottomShadow.frame = CGRect(x: 0, y: yPosition, width: rectWidth, height: 8)
gradient.frame = bottomShadow.bounds
gradient.colors = [UIColor.lightGray.cgColor, UIColor(white: 1, alpha: 0).cgColor]
navigationBar.addSubview(bottomShadow)
bottomShadow.layer.insertSublayer(gradient, at: 0)
}
}
I'm able to add a custom status bar (with gradient) to the UIView like this:
override func viewDidLoad() {
super.viewDidLoad()
var statusBar : UIView = UIView(frame: CGRect(x: 0, y: 0, width: 375, height: 20))
let statusBarGradient : CAGradientLayer = CAGradientLayer()
statusBarGradient.frame = statusBar.bounds
let cor1 = UIColor(red: 0.416, green: 0.604, blue: 0.796, alpha: 1.0)
let cor2 = UIColor.whiteColor()
let arrayColors = [cor1.CGColor, cor2.CGColor]
statusBarGradient.colors = arrayColors
view.layer.insertSublayer(statusBarGradient, atIndex:0)
}
I would also like to add the same gradient to the footer but I'm not having much luck.
Your code works if you add the statusBar as a subview of the view, but I would make it dynamically size the width to fit the width of the superview, so just do the same thing for the footer, but dynamically set the height to be whatever the height of your view is minus the desired height of your footer bar.
let statusBar = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 20))
let footer = UIView(frame: CGRect(x: 0, y: view.frame.height - 20.0, width: view.frame.width, height: 20))
let statusBarGradient = CAGradientLayer()
let footerGradient = CAGradientLayer()
statusBarGradient.frame = statusBar.bounds
let cor1 = UIColor(red: 0.416, green: 0.604, blue: 0.796, alpha: 1.0)
let cor2 = UIColor.blackColor()
let arrayColors = [cor1.CGColor, cor2.CGColor]
footerGradient.frame = footer.bounds
let arrayColorsFooter = [cor2.CGColor, cor1.CGColor]
statusBarGradient.colors = arrayColors
footerGradient.colors = arrayColorsFooter
statusBar.layer.insertSublayer(statusBarGradient, atIndex:0)
footer.layer.insertSublayer(footerGradient, atIndex:0)
view.addSubview(statusBar)
view.addSubview(footer)