iOS 11中Safe Area的用途、项目实现及代码化设计影响问题

Hey there! Let’s tackle your questions about Safe Area in iOS 11—since you’re new to Xcode 9.2 and iOS 11.2, I’ll keep this clear and practical.

The Safe Area is Apple’s solution to handle layout for devices with non-standard screen shapes (like iPhone X and later models with notches, home indicators, or rounded corners). Its core roles are:

• Ensure your app’s interactive and visible content doesn’t get blocked by system UI elements (notch, status bar, home indicator).
• Replace the old topLayoutGuide and bottomLayoutGuide from pre-iOS 11 versions, providing a unified way to build layouts that work across all iPhone models (including older ones without notches).
• Maintain layout consistency when the device rotates or system UI changes (like the status bar expanding during a call).

Setting up and working with Safe Area in Storyboard is straightforward:

1. Enable Safe Area Layout Guides:
   • Open your Storyboard, select the root view of your UIViewController.
   • Go to the Attributes Inspector (right sidebar), check the box labeled "Use Safe Area Layout Guides".
2. Build Constraints with Safe Area:
   • When adding constraints to subviews, pin them to the Safe Area instead of the superview’s edges. For example:
     • Pin a header view’s top edge to the Safe Area’s top anchor to avoid overlapping with the notch.
     • Pin a footer button’s bottom edge to the Safe Area’s bottom anchor to keep it above the home indicator.
3. Backward Compatibility (iOS 10 and earlier):
   • If your app supports older iOS versions, Xcode automatically falls back to using topLayoutGuide and bottomLayoutGuide on those devices—no extra setup needed.

Absolutely—Safe Area impacts code-based layouts just as much as Storyboard. Here’s how to handle it:

• Use safeAreaLayoutGuide for Auto Layout:
  Instead of using the view’s own anchors (like view.topAnchor), reference the safeAreaLayoutGuide property of the root view. Example:

  let myButton = UIButton()
  myButton.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(myButton)
  
  NSLayoutConstraint.activate([
      myButton.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 16),
      myButton.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20)
  ])
  

• Access safeAreaInsets for Manual Layout:
  If you’re not using Auto Layout, use view.safeAreaInsets to adjust frame positions. Example:

  let safeTopPadding = view.safeAreaInsets.top
  myButton.frame = CGRect(x: 16, y: safeTopPadding + 20, width: 100, height: 44)
  

• Customize Safe Area with additionalSafeAreaInsets:
  Add extra padding to the safe area (e.g., for a custom navigation bar) by setting this property on your view controller:

  override func viewDidLoad() {
      super.viewDidLoad()
      additionalSafeAreaInsets.top = 20 // Adds 20pt padding to the top safe area
  }
  

If you ignore Safe Area in code, your content might get clipped by the notch or home indicator on newer devices—so it’s critical to adjust your layout logic to use these APIs.

内容的提问来源于stack exchange，提问作者Bhavsang Jam