Xcode 9의 안전 영역

Xcode 9의 안전 영역

인터페이스 빌더 View 계층 뷰어에서 Xcode9 베타 발견 안전 영역을 탐색하는 중.궁금해서 Safe Area on Apples 문서에 대해 알아보려고 했는데, 정확히는 "Auto layout과 직접 상호작용하는 뷰 영역"이라고 했는데 만족스럽지 않아서 이 새로운 것의 실용성을 알고 싶습니다.

누구 단서 있는 사람?

안전 영역에 대한 Apple 문서의 결론 단락.

UILayoutGuide 클래스는 이전에 더미 뷰에서 수행한 모든 작업을 더 안전하고 효율적으로 수행하도록 설계되었습니다.레이아웃 가이드는 새로운 뷰를 정의하지 않습니다.뷰 계층에는 참여하지 않습니다.대신 소유 뷰의 좌표계에서 자동 레이아웃과 상호 작용할 수 있는 직사각형 영역을 정의하기만 하면 됩니다.

안전 영역은 레이아웃 가이드(안전 영역 레이아웃 가이드)입니다.
보기 중 막대 및 기타 컨텐츠에 의해 가려지지 않는 부분을 나타내는 레이아웃 가이드입니다.iOS 11+에서는, 상단과 하단의 레이아웃 가이드를 폐지해, 1개의 세이프 에리어 레이아웃 가이드로 대체하고 있습니다.

화면에 보기가 표시되는 경우, 이 안내서는 다른 컨텐츠에서 다루지 않는 보기 부분을 반영합니다. 、 [ area 이 포함되어 (TVOS 에서는, 로 정의되고 ).overscanCompensationInsetsUIScreen(UIScreen)뷰 경우에도 해당됩니다.additionalSafeAreaInsets 않거나 되지 않은 일치합니다.뷰가 현재 뷰 계층에 설치되어 있지 않거나 아직 화면에 표시되지 않으면 레이아웃 가이드는 항상 뷰의 모서리와 일치합니다.

뷰 컨트롤러의 루트 뷰의 경우 이 속성의 안전 영역은 뷰 컨트롤러 콘텐츠의 전체 부분과 사용자가 지정한 추가 삽입을 나타냅니다.뷰 계층의 다른 뷰의 경우 안전 영역은 해당 뷰에서 가려진 부분만 반영합니다.예를 들어 뷰가 뷰 컨트롤러의 루트 뷰의 안전 영역 내에 있는 경우 이 속성의 가장자리 삽입은 0입니다.

애플에 따르면 Xcode 9 - 릴리즈 노트
인터페이스 빌더(UIView Controller) UIView.safeAreaLayoutGuide(UIView.safeAreaLayoutGuide).새 안전 영역을 사용하려면 뷰 컨트롤러의 파일 검사기에서 안전 영역 레이아웃 가이드를 선택한 다음 컨텐츠와 새 안전 영역 앵커 사이에 구속조건을 추가하십시오.이렇게 하면 컨텐츠가 tvOS의 상단 및 하단 막대와 오버스캔 영역에 의해 가려지는 것을 방지할 수 있습니다.이전 버전의 iOS로 배포할 때 안전 영역에 대한 제약 조건이 상단 및 하단 위치로 변환됩니다.

---

여기에서는 기존의 (상하) 레이아웃 가이드와 세이프 에리어 레이아웃 가이드의 비교(비교)로서 간단하게 참조할 수 있습니다.

안전 영역 레이아웃:

자동 레이아웃

---

안전 영역 레이아웃을 사용하는 방법

솔루션을 찾으려면 다음 단계를 수행하십시오.

• 활성화되지 않은 경우 '안전 영역 레이아웃'을 활성화합니다.
• Super view와의 연결이 나타나면 'all restraint'를 제거하고 안전한 레이아웃 앵커로 모두 다시 부착합니다.또는 제약 조건을 두 번 클릭하고 슈퍼 뷰에서 SafeArea 앵커로의 연결을 편집합니다.

여기 샘플 스냅샷, 안전 영역 레이아웃을 활성화하고 제약 조건을 편집하는 방법이 있습니다.

위의 변경 결과입니다.

---

SafeArea SafeArea를 사용한
iPhone X용으로 설계할 때는 레이아웃이 화면을 채우고 장치의 둥근 모서리, 센서 하우징 또는 홈 스크린에 액세스하기 위한 표시기에 의해 가려지지 않도록 해야 합니다.

탐색 모음, 테이블 및 컬렉션과 같은 시스템에서 제공하는 표준 UI 요소를 사용하는 대부분의 앱은 장치의 새 폼 팩터에 자동으로 적응합니다.배경 재료가 디스플레이 가장자리까지 연장되고 UI 요소가 적절히 삽입되어 배치됩니다.

커스텀 레이아웃이 있는 앱에서는 특히 자동 레이아웃을 사용하여 안전한 영역과 마진 레이아웃 가이드를 준수하는 경우 iPhone X를 지원하는 것도 비교적 쉬울 것입니다.

---

다음은 샘플 코드입니다(참조 자료: 안전 영역 레이아웃 가이드):
코드에서 구속조건을 작성하는 경우 UIView의 safeAreaLayoutGuide 속성을 사용하여 관련 레이아웃 앵커를 가져옵니다.「인터페이스 빌더」입니다.

뷰 컨트롤러에 녹색 뷰가 속성으로 있다고 가정하면 다음과 같습니다.

private let greenView = UIView()

viewDidLoad에서 호출되는 뷰 및 제약조건을 설정하는 함수가 있을 수 있습니다.

private func setupView() {
  greenView.translatesAutoresizingMaskIntoConstraints = false
  greenView.backgroundColor = .green
  view.addSubview(greenView)
}

항상 루트 뷰의 layoutMarginsGuide를 사용하여 선행 및 후행 여백 구속조건을 작성합니다.

 let margins = view.layoutMarginsGuide
    NSLayoutConstraint.activate([
      greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
      greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
 ])

iOS 11만을 대상으로 하지 않는 한 안전 영역 레이아웃 가이드 제약 조건을 #available로 포장하고 이전 iOS 버전의 상단 및 하단 레이아웃 가이드로 폴백해야 합니다.

if #available(iOS 11, *) {
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
   greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
   guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
   ])

} else {
   let standardSpacing: CGFloat = 8.0
   NSLayoutConstraint.activate([
   greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
   bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
   ])
}

★★★★★★★★★★★★★★★

---

UIView확장 기능을 사용하면 SafeAreaLayout을 프로그램적으로 쉽게 사용할 수 있습니다.

extension UIView {

  // Top Anchor
  var safeAreaTopAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.topAnchor
    } else {
      return self.topAnchor
    }
  }

  // Bottom Anchor
  var safeAreaBottomAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.bottomAnchor
    } else {
      return self.bottomAnchor
    }
  }

  // Left Anchor
  var safeAreaLeftAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.leftAnchor
    } else {
      return self.leftAnchor
    }
  }

  // Right Anchor
  var safeAreaRightAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.rightAnchor
    } else {
      return self.rightAnchor
    }
  }

}

---

다음은 Objective-C의 샘플 코드입니다.

• 프로그래밍 방식으로 안전 영역을 추가하는 방법

---

세이프 에리어 레이아웃 가이드용 Apple Developer Official Documentation for Safe Area Layout Guide(애플 개발자 공식 문서)

Safe Area는 iPhone-X의 사용자 인터페이스 설계를 처리하기 위해 필요합니다.안전지역 레이아웃을 사용한 iPhone-X 사용자 인터페이스 설계 방법에 대한 기본 가이드라인입니다.

최신 휴먼 인터페이스 가이드라인에서 제시한 바와 같이 새로운 iPhone X의 둥근 테두리와 "노치"를 피하기 위해 SpriteKit 기반 앱을 적용하려고 할 때 가장 먼저 눈에 띈 것을 언급하고 싶다.새 속성safeAreaLayoutGuideUIView뷰가 계층에 추가된 후 쿼리해야 합니다(예:-viewDidAppear:의미 있는 레이아웃 프레임을 리포트하기 위해서(이러한 경우는, 전체 화면 사이즈를 되돌리기만).

자산의 설명서에서 다음 항목을 참조하십시오.

보기 중 막대 및 기타 컨텐츠에 의해 가려지지 않는 부분을 나타내는 레이아웃 가이드입니다.뷰가 화면에 표시되는 경우 이 가이드에는 탐색 막대, 탭 막대, 도구 모음 및 기타 상위 뷰에서 다루지 않는 뷰 부분이 반영됩니다.(tvOS에서 세이프 영역은 화면 베젤을 덮지 않은 영역을 나타냅니다.)뷰가 현재 뷰 계층에 설치되어 있지 않거나 아직 화면에 표시되지 않는 경우 레이아웃 가이드 가장자리는 뷰의 가장자리와 동일합니다.

(내 것을 제외)

읽으면-viewDidLoad: , . . . . . . . .layoutFrame의 내용은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.{{0, 0}, {375, 812}}했던 '대신'이 '대신'으로{{0, 44}, {375, 734}}

• iOS 7.0~11.0 이전 버전 <비권장>UIKittopLayoutGuide & bottomLayoutGuide 를 사용합니다.UIView

• iOS11+는 safeAreaLayoutGuide를 사용합니다.UIView

• 파일 검사기에서 안전 영역 레이아웃 가이드 확인란을 활성화합니다.

• 안전 영역은 전체 인터페이스의 가시적인 부분 내에 뷰를 배치하는 데 도움이 됩니다.

• TVOS에서 세이프 영역에는 스크린 베젤로 덮인 영역을 나타내는 오버스캔 삽입도 포함됩니다.

• safeAreaLayoutGuide는 탐색 막대, 탭 막대, 도구 모음 및 기타 상위 뷰에서 다루지 않는 뷰 부분을 반영합니다.

• 해서 '안심하다'와 같은 .UIButtonsyslog.

• iPhone X용으로 설계할 때는 레이아웃이 화면을 채우고 장치의 둥근 모서리, 센서 하우징 또는 홈 스크린에 액세스하기 위한 표시기에 의해 가려지지 않도록 해야 합니다.

• 배경이 디스플레이 가장자리까지 확장되고 테이블이나 컬렉션과 같이 수직으로 스크롤할 수 있는 레이아웃이 맨 아래까지 계속되는지 확인합니다.

• iPhone X phone 른 다 phone phone 다 다 다 phone phone phone phonephone상태 표시줄 아래에 컨텐츠를 배치하기 위해 고정된 상태 표시줄 높이를 가정하는 경우 사용자의 장치에 따라 동적으로 컨텐츠를 배치하도록 앱을 업데이트해야 합니다. 되어 있는 print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

• 홈 인디케이터 용기의 높이는 34 포인트입니다.

• 세이프 에리어 레이아웃 가이드를 유효하게 하면, 인터페이스 빌더에 리스트 되고 있는 세이프 에리어 제약 속성을 확인할 수 있습니다.

은 '에 따라 할 수 있습니다.self.view.safeAreaLayoutGuide그대로의

ObjC:

  self.demoView.translatesAutoresizingMaskIntoConstraints = NO;
    UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
    [self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
    [self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
    [self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
    [self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;

신속:

   demoView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        } else {
            NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        }

Apple은 iOS 7에서 UIViewController의 속성으로 topLayoutGuide와 bottomLayoutGuide를 도입했습니다.이를 통해 상태, 탐색 또는 탭 표시줄과 같은 UIKit 표시줄에 콘텐츠가 숨겨지지 않도록 제약 조건을 만들 수 있습니다.이러한 레이아웃 가이드는 iOS 11에서는 권장되지 않으며 단일 안전 영역 레이아웃 가이드로 대체됩니다.

자세한 내용은 링크를 참조하십시오.

안전 영역 레이아웃 가이드는 콘텐츠와 컨트롤을 배치할 때 시스템 UI 요소가 중복되지 않도록 합니다.

안전 영역은 상태 표시줄, 탐색 모음 및 도구 모음 또는 탭 모음인 시스템 UI 요소 사이에 있는 영역입니다.따라서 상태 표시줄을 앱에 추가하면 안전 영역이 축소됩니다.탐색 모음을 앱에 추가하면 안전 영역이 다시 축소됩니다.

iPhone X 에서는, 세이프 에리어에 의해서, 세로 화면 상단과 하단의 엣지로부터 추가의 삽입이 가능하게 됩니다.가로에서 안전 영역은 화면과 홈 표시기의 측면에서 삽입됩니다.

이것은, Apple의 「iPhone X용 디자인」의 비디오로부터 얻은 것입니다.이 비디오에서는, 다른 요소들이 세이프 에리어에 어떻게 영향을 주는지도 시각화하고 있습니다.

언급URL : https://stackoverflow.com/questions/44492404/safe-area-of-xcode-9