OGeek|极客世界-中国程序员成长平台

标题: ios - 导航栏中的渐变与其下方的 View 不同。 [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-11 19:29
标题: ios - 导航栏中的渐变与其下方的 View 不同。

我想要达到的目标设计如下图: enter image description here

我使用下面的代码创建了渐变,并借助图层中的功能图像将其设置到导航栏。

    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)

并且我在导航栏下方有一个堆栈 View ,我使用此代码为其设置渐变:

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

结果是下面的这个设计: enter image description here

然后我添加了这两行代码来删除导航栏底部边框:

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

结果如下:

enter image description here

谁能帮我使梯度均匀??

附: : - 我确保 navigationBar.isTranslucent 属性设置为 false ,两种情况下的颜色都设置为 sRGB ,并且我尝试在设置渐变之前和之后调用删除边框的线条。

提前致谢。



Best Answer-推荐答案


使导航栏完全透明,以便在此处显示 View 的渐变层。

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

如果您希望它是应用程序方面的,请在 AppDelegate 中设置这些值

UINavigationBar.appearance().backgroundColor = UIColor.clear
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().isOpaque = false
UINavigationBar.appearance().isTranslucent = true

关于ios - 导航栏中的渐变与其下方的 View 不同。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47911078/






欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/) Powered by Discuz! X3.4