안전 영역은 레이아웃 가이드입니다 ( 안전 영역 레이아웃 가이드 ) .
막대 및 기타 내용에 의해 가려지지 않은 뷰 부분을 나타내는 레이아웃 안내. 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 용 사용자 인터페이스를 디자인하는 방법에 대한 기본 지침은 다음과 같습니다.
