[ios] Xcode 9의 안전 영역

안전 영역은 레이아웃 가이드입니다 ( 안전 영역 레이아웃 가이드 ) .
막대 및 기타 내용에 의해 가려지지 않은 뷰 부분을 나타내는 레이아웃 안내. iOS 11 이상에서 Apple은 상단 및 하단 레이아웃 가이드를 더 이상 사용하지 않고 단일 안전 영역 레이아웃 가이드로 대체합니다.

화면에보기가 표시되면이 안내서는 다른 내용으로 다루지 않은보기 부분을 반영합니다. 보기의 안전한 영역은 탐색 막대, 탭 막대, 도구 모음 및보기 컨트롤러의보기를 가리는 기타 조상으로 덮여있는 영역을 반영합니다. tvOS에서 안전 영역 overscanCompensationInsets은 UIScreen 의 속성에 정의 된대로 화면의 베젤을 통합합니다 . 또한 뷰 컨트롤러의 additionalSafeAreaInsets속성에 의해 정의 된 추가 공간도 포함합니다 . 보기가 현재보기 계층 구조에 설치되어 있지 않거나 아직 화면에 표시되지 않으면 레이아웃 안내선이 항상보기의 가장자리와 일치합니다.

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

Apple에 따르면 Xcode 9-릴리스 노트

Interface Builder는 UIViewController에서 사용되지 않는 상단 및 하단 레이아웃 가이드를 대신하여 UIView.safeAreaLayoutGuide를 사용합니다. 새 안전 영역을 사용하려면 파일 관리자에서 뷰 컨트롤러의 안전 영역 레이아웃 안내선을 선택한 다음 내용과 새 안전 영역 앵커 사이에 제약 조건을 추가하십시오. 그러면 상단 및 하단 막대와 tvOS의 오버 스캔 영역으로 인해 콘텐츠가 가려지지 않습니다. 이전 버전의 iOS에 배포 할 때 안전 영역에 대한 제약 조건이 상단 및 하단으로 변환됩니다.

다음은 기존 (상단 및 하단) 레이아웃 가이드와 안전 영역 레이아웃 가이드를 비교하여 유사한 시각적 효과를 만들기위한 간단한 참조입니다.

안전 구역 레이아웃 :

자동 레이아웃

안전 영역 레이아웃으로 작업하는 방법?

해결책을 찾으려면 다음 단계를 따르십시오.

• 활성화되지 않은 경우 ‘안전 영역 레이아웃’을 활성화하십시오.
• Super view 와의 연결이 표시되면 ‘모든 구속 조건’을 제거 하고 안전한 레이아웃 앵커로 모두 다시 부착하십시오. 또는 구속 조건을 두 번 클릭하고 수퍼 뷰에서 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 개발자 공식 문서입니다.

iPhone-X의 사용자 인터페이스 디자인을 처리하려면 안전 영역이 필요합니다. 안전 영역 레이아웃을 사용하여 iPhone-X 용 사용자 인터페이스를 디자인하는 방법에 대한 기본 지침은 다음과 같습니다.

답변

  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
        }