2

The targeted design i want to reach is the below image : enter image description here

I used the code below to create the gradient and set it to the navigation bar with the help of the function image from layer.

    func image(fromLayer layer: CALayer) -> UIImage {
    UIGraphicsBeginImageContext(layer.frame.size)

    layer.render(in: UIGraphicsGetCurrentContext()!)

    let outputImage = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    return outputImage!
}


    //navbar
    let gradient = CAGradientLayer()
    let cornerRadiusOfNavBar : CGFloat! = 0
    if #available(iOS 10.0, *) {
        gradient.colors = [Constants.Colors.violet.cgColor , Constants.Colors.green.cgColor ]
    }
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradient.frame = self.navigationController!.navigationBar.bounds
    gradient.cornerRadius = cornerRadiusOfNavBar

    navigationItem.title = NSLocalizedString("Register", comment: "")
    self.navigationController!.navigationBar.setBackgroundImage(self.image(fromLayer: gradient), for: .default)

and i have a stack view below the navigation bar , i used this code to set the gradient for it: 

      //stackview
    let gradientView = CAGradientLayer()
    let cornerRadiusOfStackView : CGFloat! = 0
    if #available(iOS 10.0, *) {
        gradientView.colors = [Constants.Colors.violet.cgColor , Constants.Colors.green.cgColor ]
    }
    gradientView.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientView.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradientView.frame = self.stackViewHoldingButtons.bounds
    gradientView.cornerRadius = cornerRadiusOfStackView
    self.stackViewHoldingButtons.layer.insertSublayer(gradientView, at: 0)

the result is this design below : enter image description here

then i added these two lines of code to remove the navigation bar bottom border : 

    self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.shadowImage = UIImage()

the result is as follows :

enter image description here

can any one help me to make the gradient homogeneous ??

P.S. : - I made sure that the navigationBar.isTranslucent property is set to false , that colors in both cases are set to sRGB , and i tried calling the lines that remove the border in both cases before and after setting the gradient.

thanks in advance.

MhmdRizk
  • 1,591
  • 2
  • 18
  • 34
  • 1
    The simplest way would be to just make all of the view elements backgrounds clear and then put a view behind them all with the gradient. – Nordeast Dec 20 '17 at 17:13
  • thanks @AllenR, I already implemented this way in all the scenes and it will cost me a lot of time to change it . – MhmdRizk Dec 20 '17 at 17:16

1 Answers1

0

Make the navigation bar fully transparent so the view's gradient layer will be shown there.

self.navigationController!.navigationBar.backgroundColor = UIColor.clear
self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isOpaque = false
self.navigationController?.navigationBar.isTranslucent = true

If you want it to be application-wise set these values in AppDelegate

UINavigationBar.appearance().backgroundColor = UIColor.clear
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().isOpaque = false
UINavigationBar.appearance().isTranslucent = true
Tomo Norbert
  • 770
  • 4
  • 13