如何将安全区域添加到视图高度？

Question

我正在创建一个顶部“横幅”，我希望它覆盖安全区域和一些更多的区域。
我似乎找不到如何覆盖安全区域。

第一张图片是期望的效果，第二张是在有凸起的 iPhone 上的效果。

期望的效果	发生了什么

如何将安全区域添加到所需的高度值中？

代码：

let shadowView = UIView( frame: CGRect( x: -10, y: -20, width: (view.frame.width+20), height: 90 ) )
        view.addSubview( shadowView )
        shadowView.backgroundColor = .clear
        shadowView.layer.shadowColor = UIColor.black.cgColor
        shadowView.layer.shadowOpacity = 0.3
        shadowView.layer.shadowOffset = CGSize(width: 5, height: 3)
        shadowView.layer.shadowRadius = 4.0

let titleView = UIView( frame: CGRect( x: 0, y: 0, width: ( shadowView.frame.width ), height: 90 ) )
        shadowView.addSubview( titleView )
        titleView.backgroundColor = .systemGreen
        titleView.layer.cornerRadius = 45
        titleView.layer.masksToBounds = true

- José Miguel Lapa

---

这个 https://dev59.com/VFYN5IYBdhLWcg3w1LIG 是否符合您的需求？ - Timmy

@NoeOnJupiter，谢谢你的回复。这个解决方案已经过时了，我需要找到一个不同的解决方案。 - José Miguel Lapa

Answer 1

问题就在这里：

let shadowView = UIView( frame: CGRect( x: -10, y: -20, width: (view.frame.width+20), height: 90 ) )

您正在对框架进行硬编码 - 不要这样做！将高度设置为90是可以的，但是x: -10, y: -20, width: (view.frame.width+20)非常糟糕。并非所有手机都具有相同的尺寸。

从技术上讲，您可以根据NoeOnJupiter的评论计算安全区域插图高度，但这仍然不太好。当用户旋转设备并且刘海移动时会发生什么？听起来很麻烦。

您需要的是自动布局和安全区域。使用自动布局，只需定义一些约束条件，就可以在所有屏幕尺寸下轻松实现漂亮的UIView。然后，安全区域定义了屏幕上哪些部分是“安全”的，意味着“不被刘海或圆角屏幕遮挡”。

因此，您可以将shadowView固定到屏幕边缘（超出刘海/安全区域），并添加.systemGreen背景颜色。然后，使titleView高度为90点，并在垂直方向上将其固定到shadowView上。请注意titleView.topAnchor如何固定到shadowView.safeAreaLayoutGuide.topAnchor - 这使其远离刘海。

let shadowView = UIView() /// green background with shadow and corner radius
shadowView.translatesAutoresizingMaskIntoConstraints = false
shadowView.backgroundColor = .systemGreen /// put the background color here instead of on `titleView`, because this view stretches beyond the notch
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOpacity = 0.3
shadowView.layer.shadowOffset = CGSize(width: 5, height: 3)
shadowView.layer.shadowRadius = 4.0
shadowView.layer.cornerRadius = 45
shadowView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner] /// only round the bottom corners
view.addSubview(shadowView)

let titleView = UIView() /// container for title label.
titleView.translatesAutoresizingMaskIntoConstraints = false
shadowView.addSubview(titleView)

let titleLabel = UILabel() /// the title label itself
titleLabel.translatesAutoresizingMaskIntoConstraints = false
titleView.addSubview(titleLabel)
titleLabel.text = "Catalogues"
titleLabel.font = UIFont.systemFont(ofSize: 36, weight: .medium)

NSLayoutConstraint.activate([
    
    /// constrain `shadowView`
    shadowView.topAnchor.constraint(equalTo: view.topAnchor),
    shadowView.rightAnchor.constraint(equalTo: view.rightAnchor),
    shadowView.leftAnchor.constraint(equalTo: view.leftAnchor),
    
    
    /// constrain `titleView`
    titleView.topAnchor.constraint(equalTo: shadowView.safeAreaLayoutGuide.topAnchor), /// most important part!
    titleView.heightAnchor.constraint(equalToConstant: 90), /// will also stretch `shadowView` vertically
    titleView.rightAnchor.constraint(equalTo: shadowView.rightAnchor),
    titleView.leftAnchor.constraint(equalTo: shadowView.leftAnchor),
    titleView.bottomAnchor.constraint(equalTo: shadowView.bottomAnchor),
    
    /// constrain `titleLabel`
    titleLabel.centerXAnchor.constraint(equalTo: titleView.centerXAnchor),
    titleLabel.centerYAnchor.constraint(equalTo: titleView.centerYAnchor)
])

结果：

iPhone 8	iPhone 12

如需进一步阅读，我有一篇关于这个主题的博客文章。

- aheze

---

这真的超出了我所能期望的任何事情。非常感谢！！！ - José Miguel Lapa