Khu vực an toàn là một hướng dẫn bố trí ( Hướng dẫn bố trí khu vực an toàn ) .
Hướng dẫn bố cục đại diện cho phần của chế độ xem của bạn không bị che khuất bởi các thanh và nội dung khác. Trong iOS 11+, Apple không dùng các hướng dẫn bố cục trên cùng và dưới cùng và thay thế chúng bằng một hướng dẫn bố cục khu vực an toàn duy nhất.
Khi chế độ xem hiển thị trên màn hình, hướng dẫn này phản ánh phần của chế độ xem không được bao phủ bởi nội dung khác. Vùng an toàn của chế độ xem phản ánh khu vực được bao phủ bởi các thanh điều hướng, thanh tab, thanh công cụ và các tổ tiên khác che khuất tầm nhìn của bộ điều khiển chế độ xem. (Trong tvOS, vùng an toàn kết hợp với viền màn hình, như được xác định bởi thuộc overscanCompensationInsetstính của UIScreen.) Nó cũng bao gồm bất kỳ không gian bổ sung nào được xác định bởi thuộc additionalSafeAreaInsetstính của bộ điều khiển xem . Nếu chế độ xem hiện chưa được cài đặt trong cấu trúc phân cấp chế độ xem hoặc chưa hiển thị trên màn hình, hướng dẫn bố cục luôn khớp với các cạnh của chế độ xem.
Đối với chế độ xem gốc của trình điều khiển chế độ xem, vùng an toàn trong thuộc tính này biểu thị toàn bộ phần nội dung của trình điều khiển chế độ xem bị che khuất và bất kỳ nội dung bổ sung nào bạn đã chỉ định. Đối với các chế độ xem khác trong phân cấp chế độ xem, vùng an toàn chỉ phản ánh phần của chế độ xem bị che khuất. Ví dụ: nếu một khung nhìn hoàn toàn nằm trong vùng an toàn của chế độ xem gốc của trình điều khiển khung nhìn của nó, thì các góc cạnh trong thuộc tính này là 0.
Theo Apple, Xcode 9 - Phát hành
giao diện Trình tạo giao diện sử dụng UIView.safeAreaLayoutGuide để thay thế cho các hướng dẫn bố cục trên và dưới không dùng nữa trong UIViewContoder. Để sử dụng vùng an toàn mới, chọn Hướng dẫn bố trí vùng an toàn trong Trình kiểm tra tệp cho trình điều khiển xem, sau đó thêm các ràng buộc giữa nội dung của bạn và các neo vùng an toàn mới. Điều này ngăn nội dung của bạn khỏi bị che khuất bởi các thanh trên cùng và dưới cùng và bởi khu vực quét quá mức trên tvOS. Các ràng buộc đối với vùng an toàn được chuyển đổi thành Trên và Dưới khi triển khai lên các phiên bản iOS trước đó.
Dưới đây là tài liệu tham khảo đơn giản dưới dạng so sánh (để tạo hiệu ứng hình ảnh tương tự) giữa Hướng dẫn bố cục (Trên & Dưới) hiện tại và Hướng dẫn bố cục vùng an toàn.
Bố trí khu vực an toàn:
Tự động thanh toán
Làm thế nào để làm việc với Bố cục khu vực an toàn?
Thực hiện theo các bước sau để tìm giải pháp:
- Bật 'Bố cục vùng an toàn', nếu không được bật.
- Xóa 'tất cả các ràng buộc' nếu chúng hiển thị kết nối với Super view và đính kèm lại tất cả với neo bố cục an toàn. HOẶC Nhấp đúp chuột vào một ràng buộc và chỉnh sửa kết nối từ chế độ xem siêu sang neo SafeArea
Dưới đây là ảnh chụp mẫu, cách bật bố cục vùng an toàn và chỉnh sửa ràng buộc.
Đây là kết quả của những thay đổi trên
Thiết kế bố cục với SafeArea
Khi thiết kế cho iPhone X, bạn phải đảm bảo rằng bố cục lấp đầy màn hình và không bị che khuất bởi các góc tròn, vỏ cảm biến hoặc chỉ báo để truy cập Màn hình chính của thiết bị.
Hầu hết các ứng dụng sử dụng các thành phần UI tiêu chuẩn, do hệ thống cung cấp như thanh điều hướng, bảng và bộ sưu tập sẽ tự động thích ứng với yếu tố hình thức mới của thiết bị. Các vật liệu nền mở rộng ra các cạnh của màn hình và các thành phần UI được chèn và định vị thích hợp.
Đối với các ứng dụng có bố cục tùy chỉnh, việc hỗ trợ iPhone X cũng tương đối dễ dàng, đặc biệt nếu ứng dụng của bạn sử dụng Bố cục tự động và tuân thủ các hướng dẫn bố cục lề và vùng an toàn.
Dưới đây là mã mẫu (Tham khảo từ: Hướng dẫn bố cục khu vực an toàn ) :
Nếu bạn tạo các ràng buộc trong mã, hãy sử dụng thuộc tính safeAreaLayoutGuide của UIView để lấy các neo bố cục có liên quan. Hãy tạo lại ví dụ Trình tạo giao diện ở trên trong mã để xem nó trông như thế nào:
Giả sử chúng ta có chế độ xem xanh như một thuộc tính trong trình điều khiển chế độ xem của mình:
private let greenView = UIView()
Chúng tôi có thể có một chức năng để thiết lập các khung nhìn và các ràng buộc được gọi từ viewDidLoad:
private func setupView() {
greenView.translatesAutoresizingMaskIntoConstraints = false
greenView.backgroundColor = .green
view.addSubview(greenView)
}
Tạo các ràng buộc lề hàng đầu và theo sau như mọi khi sử dụng layoutMarginsGuide của chế độ xem gốc:
let margins = view.layoutMarginsGuide
NSLayoutConstraint.activate([
greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
])
Bây giờ trừ khi bạn chỉ nhắm mục tiêu iOS 11, bạn sẽ cần bọc các ràng buộc hướng dẫn bố cục khu vực an toàn với #av Available và quay lại hướng dẫn bố cục trên cùng và dưới cùng cho các phiên bản iOS trước đó:
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)
])
}
Kết quả:
Theo UIViewtiện ích mở rộng, giúp bạn dễ dàng làm việc với SafeAreaLayout theo chương trình.
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
}
}
}
Đây là mã mẫu trong Objective-C :
Dưới đây là Tài liệu chính thức dành cho nhà phát triển của Apple dành cho Hướng dẫn bố cục khu vực an toàn
Khu vực an toàn là cần thiết để xử lý thiết kế giao diện người dùng cho iPhone-X. Dưới đây là hướng dẫn cơ bản về Cách thiết kế giao diện người dùng cho iPhone-X bằng cách sử dụng Bố cục vùng an toàn
