顶部栏在不安全区域重叠

Posted 2023-03-22

【中文标题】顶部栏在不安全区域重叠

【英文标题】：top bar overlapping in unsafe area

【发布时间】：2017-11-15 09:36:40

【问题描述】：

由于安全区域的引入，我的顶部栏在除 iPhoneX 之外的所有其他 iPhone 上都可以正常工作。顶部栏从不安全区域本身开始。顶部栏是自定义 UI。如下所示：

代码如下：

    //Top Bar
    let topBar = UIView(frame:CGRect(x: 0,y: 0, width: width, height: 60))
    topBar.backgroundColor = UIColor.white
    topBar.layer.shadowColor = UIColor.gray.cgColor
    topBar.layer.shadowOffset = CGSize(width: 0, height: 3)
    topBar.layer.shadowOpacity = 1
    topBar.layer.masksToBounds = false
    topBar.layer.shadowRadius = 8.0;

    self.view.addSubview(topBar)

我该如何解决这个问题。我希望从安全区域开始查看。我不想使用 UINavigationBar。谢谢。

【问题讨论】：

如果您创建自己的自定义导航栏，您需要尊重安全区域的指南 - 除非您使用标准导航栏或工具栏，否则系统不会自动为您完成。跨度>

@holex：我明白了。你能提出一种可以做到的方法吗？

我会从iPhone X HIG 页面开始，然后所有相关的教程和视频都可以从这个页面获得，以支持开发人员。你可以找到精彩的解释和它应该如何完成的集合。

【参考方案1】：

使用自动布局和布局指南来构建您的 UI。例如，使用 SnapKit。

let topBar = UIView(frame:CGRect(x: 0,y: 0, width: width, height: 60))
topBar.snp.makeConstraints  make in

    make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)

    make.leading.trailing.equalToSuperview()

更新

用原来的api重写。

let topBar = UIView(frame:CGRect(x: 0,y: 0, width: 30, height: 60))
self.view.addSubview(topBar)
let top = NSLayoutConstraint.init(item: topBar, attribute: .top, relatedBy: .equal, toItem: self.view.safeAreaLayoutGuide, attribute: .top, multiplier: 1.0, constant: 0.0)
let leading = NSLayoutConstraint.init(item: topBar, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1.0, constant: 0.0)
let trailing = NSLayoutConstraint.init(item: topBar, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1.0, constant: 0.0)
let height = NSLayoutConstraint.init(item: topBar, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 50.0)
topBar.addConstraints([top, leading, trailing, height])

【讨论】：

对不起，我是 swift 新手，你能建议一种不使用 snapKit 的方法吗，就像使用一般布局约束一样。

@GeethanjaliReddy 用你的建议更新了我的答案。

【参考方案2】：

我不想使用 UINavigationBar

你想要什么并不重要。无论如何你都需要。您违反了界面指南，现在您因此而陷入困境。做苹果想让你做的事。 UINavigationBar 能够在正确配置后自动向上伸展到“缺口”后面。底部的 UIToolbar 也是如此。你需要使用这些。