• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ios - 导航栏中的渐变与其下方的 View 不同。

[复制链接]
菜鸟教程小白 发表于 2022-12-11 19:29:30 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

我想要达到的目标设计如下图: 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/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap