如何创建底部两个圆角的自定义 UINavigationBar？

Question

我已经让导航栏仅将底部两个角变圆，但是当我使用 clipsToBounds = true 时，它也会剪裁导航栏的顶部。在下图中，我希望整个条都是橙色的，但只有一部分是橙色的。

import UIKit

class MyNavBar: UINavigationBar {

override init(frame: CGRect) {
    super.init(frame: frame)
    setupNavBar()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupNavBar()
}

func setupNavBar() {
    tintColor = .white
    barTintColor = .orange
    layer.cornerRadius = 20
    layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
    clipsToBounds = true
    }
}

Answer 1

您不应修改 UINavigationBar 视图层次结构或更改图层属性。有一种专用方法 setBackgroundImage(_:for:barMetrics:) 可以自定义 UINavigationBar 外观。我建议在 Apple's UIKit Documentation here .

中检查 自定义导航栏的外观

To allow complete customization over the appearance of navigation bars, you can additionally provide custom background and shadow images. To provide a custom background image, use the setBackgroundImage(_:for:barMetrics:) method, providing a UIImage object for the appropriate bar position and metrics values.

Answer 2

您可以将此导航栏添加为控制器中的自定义视图以获得相同的外观

class CustomNavBar: UIView {

override init(frame: CGRect) {
    super.init(frame: frame)
    setupview()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupview()
}

func setupview() {
    tintColor = .white
    backgroundColor = .orange
    layer.cornerRadius = 20
    layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
    clipsToBounds = true
  }
}

我和你控制器baseClass

override func viewDidLoad() {
self.navigationController?.setNavigationBarHidden(true, animated: false)
    let nav = CustomNavBar()
    self.view.addSubview(nav)

   nav.translatesAutoresizingMaskIntoConstraints = false
    nav.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    nav.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    nav.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.maxX).isActive = true
    nav.heightAnchor.constraint(equalToConstant: 100).isActive = true
}

如何创建底部两个圆角的自定义 UINavigationBar？

How do I create a custom UINavigationBar with the bottom two corners rounded?

swift

uinavigationbar