Shadow discoloring the navigation bar - ios

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)
}
}

Related

How to add shadow only to top and bottom to UIVIEW in swift

I am new in swift and I am trying to add shadow to UIView.
My code is like this
ViewPay.layer.masksToBounds = false
ViewPay.layer.shadowRadius = 2
ViewPay.layer.shadowOpacity = 1
ViewPay.layer.shadowColor = UIColor.red.cgColor
ViewPay.layer.shadowOffset = CGSize(width: 0 , height:2)
but it is adding shadow to all side
How can I add shadow like this
One solution is, put your ViewPay inside a container UIView.
Set your ViewPay to leading and trailing edges of container view, and for top and bottom add some padding to show shadow.
Also set container view clipsToBounds equals to true.
I hope to help with the solution of your question. In case you wanted something simple to understand, and also following the tips. You create a large container and add the required views. A vertical view of the purple color, another horizontal that would be gray color and in the middle put an image, as I did in the code:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//Big container
let container = UIView(frame: CGRect(x: self.view.bounds.width * 0.25, y: self.view.bounds.height * 0.5, width: 250, height: 290))
container.backgroundColor = .clear
self.view.addSubview(container)
//Purple view
let viewContainer = UIView(frame: CGRect(x: container.bounds.midX , y: 0, width: container.bounds.width * 0.89, height: container.bounds.height))
viewContainer.layer.anchorPoint.x = 1.0
viewContainer.backgroundColor = UIColor(displayP3Red: 158/255, green: 131/255, blue: 178/255, alpha: 1.0)
viewContainer.layer.cornerRadius = 8
viewContainer.clipsToBounds = true
container.addSubview(viewContainer)
//Gray view
let viewContainer2 = UIView(frame: CGRect(x: container.bounds.midX , y: container.bounds.midY, width: container.bounds.width * 0.93, height: container.bounds.height * 0.86))
viewContainer2.layer.anchorPoint.y = 1.0
viewContainer2.layer.anchorPoint.x = 1.0
viewContainer2.backgroundColor = UIColor(white: 0.5, alpha: 0.3)
viewContainer2.layer.cornerRadius = 5
viewContainer2.clipsToBounds = true
container.addSubview(viewContainer2)
//image
let imageView = UIImageView(frame: CGRect(x: container.bounds.midX, y: container.bounds.midY, width: container.bounds.width * 0.90, height: container.bounds.height * 0.90))
imageView.contentMode = .scaleToFill
imageView.layer.anchorPoint = CGPoint(x: 1.0, y: 1.0)
imageView.layer.cornerRadius = 10
imageView.clipsToBounds = true
imageView.image = UIImage(named: "image name")
container.addSubview(imageView)
}
}

How to load UIView .xib with corner radius and shadow into main viewcontroller using Swift

In my case, I am trying to creating custom UIView with some attributes like corner radius, shadow, and button action title label. This is I am maintaining in a common class. I need to call from multiple different viewcontroller. I can call this from viewcontroller but don’t know how to maintain shadow, corner radius into customview class. How to achieve this like a popup and call from multiple view controllers.
My CustomView Class
import UIKit
class ToastView: UIView {
}
My CustomView .Xib
ViewController To Calling CustomView
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let customView = Bundle.main.loadNibNamed("ToastView", owner: self, options: nil)?.first as! ToastView
view.addSubview(customView)
customView.frame = CGRect(x:0, y: 100, width: view.frame.width-50, height: 55.0)
customView.center = view.center
customView.layer.borderColor = colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
customView.layer.borderWidth = 1.5
customView.clipsToBounds = true
}
Take layer attributes like shadow and cornerRadius logic into the view's class itself:
override func awakeFromNib() {
super.awakeFromNib()
layer.borderColor = colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
layer.borderWidth = 1.5
layer.shadowOpacity = 1
}
So now it always have those.
Note that clipsToBounds kills shadow.
You can use this Extension to add shadow
import UIKit
class AnyViewController: UIViewController {
//Your necessary methods & properties
//call your xib here
}
extension UIView {
func addShadow(offset: CGSize, color: UIColor, radius: CGFloat, opacity: Float)
{
layer.masksToBounds = false
layer.shadowOffset = offset
layer.shadowColor = color.cgColor
layer.shadowRadius = radius
layer.shadowOpacity = opacity
let backgroundCGColor = backgroundColor?.cgColor
backgroundColor = nil
layer.backgroundColor = backgroundCGColor
}
}
you can call it like
your_Custom_View.layer.cornerRadius = 20 //to add corner radius
your_Custom_View.addShadow(offset: CGSize(width: 0, height: 1), color: UIColor.black, radius: 2.0, opacity: 1.0) //to add shadow

How to add gradients on custom class buttons?

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)
}

Setting gradient both on Navigation Bar and Status bar

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.

Make a UIView stick to bottom of the ViewController frame in Swift

I have created a UIView (it's just a blue rectangle) and I want it to stick to the bottom of the frame/view of the screen.
var nextBar = UIView()
nextBar.backgroundColor = UIColor(red: 7/255, green: 152/255, blue: 253/255, alpha: 0.5)
nextBar.frame = CGRect(x: 0, y: 600, width: self.view.frame.width, height: 50)
self.view.addSubview(nextBar)
I'm assuming i need to add something in after the 'y:' part in the CGRect, but i can't seem to make it work or find anywhere that shows me this in swift.
Thanks in advance
hmmm try this...
override func viewDidLoad() {
super.viewDidLoad()
let theHeight = view.frame.size.height //grabs the height of your view
var nextBar = UIView()
nextBar.backgroundColor = UIColor(red: 7/255, green: 152/255, blue: 253/255, alpha: 0.5)
nextBar.frame = CGRect(x: 0, y: theHeight - 50 , width: self.view.frame.width, height: 50)
self.view.addSubview(nextBar)
}
for the 'y:' in CRect, you're taking the size, in height, of the screen size and you're subtracting how many ever pixels you want. It will appear the same for what ever screen size.
You can do it programmatically using constraints
fileprivate func setupName(){
let height = CGFloat(50)
lblName.text = "Hello world"
lblName.backgroundColor = .lightGray
//Step 1
lblName.translatesAutoresizingMaskIntoConstraints = false
//Step 2
self.view.addSubview(lblName)
//Step 3
NSLayoutConstraint.activate([
lblName.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
lblName.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor),
lblName.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor,constant: -height),
lblName.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
])
}
Please refer link for more details
Like this:
view.addConstraintsWithFormat(format: "V:[v0(50)]|", views: nextBar)

Resources