Safe Area ist eine Layout-Anleitung ( Safe Area Layout Guide ) .
Die Layout-Anleitung, die den Teil Ihrer Ansicht darstellt, der von Balken und anderen Inhalten nicht verdeckt wird. In iOS 11+ lehnt Apple die oberen und unteren Layout-Anleitungen ab und ersetzt sie durch eine einzige Layout-Anleitung für sichere Bereiche.
Wenn die Ansicht auf dem Bildschirm sichtbar ist, spiegelt diese Anleitung den Teil der Ansicht wider, der nicht von anderen Inhalten abgedeckt wird. Der sichere Bereich einer Ansicht spiegelt den Bereich wider, der von Navigationsleisten, Registerkartenleisten, Symbolleisten und anderen Vorfahren abgedeckt wird, die die Ansicht eines Ansichtscontrollers verdecken. (In tvOS enthält der sichere Bereich die Bildschirmblende, wie durch die overscanCompensationInsetsEigenschaft von UIScreen definiert.) Er deckt auch jeden zusätzlichen Bereich ab, der durch die Eigenschaft des View Controllers definiert ist additionalSafeAreaInsets. Wenn die Ansicht derzeit nicht in einer Ansichtshierarchie installiert ist oder noch nicht auf dem Bildschirm angezeigt wird, stimmt die Layoutanleitung immer mit den Rändern der Ansicht überein.
Für die Stammansicht des Ansichtscontrollers repräsentiert der sichere Bereich in dieser Eigenschaft den gesamten Teil des verdeckten Inhalts des Ansichtscontrollers und alle von Ihnen angegebenen zusätzlichen Einfügungen. Bei anderen Ansichten in der Ansichtshierarchie spiegelt der sichere Bereich nur den Teil dieser Ansicht wider, der verdeckt ist. Befindet sich eine Ansicht beispielsweise vollständig im sicheren Bereich der Stammansicht des Ansichtscontrollers, sind die Kanteneinfügungen in dieser Eigenschaft 0.
Laut Apple verwendet Xcode 9 - Release Note
Interface Builder UIView.safeAreaLayoutGuide als Ersatz für die veralteten Top- und Bottom-Layout-Anleitungen in UIViewController. Um den neuen sicheren Bereich zu verwenden, wählen Sie im Dateiinspektor für den Ansichts-Controller Richtlinien für das Layout sicherer Bereiche aus und fügen Sie dann Einschränkungen zwischen Ihrem Inhalt und den neuen Ankern für sichere Bereiche hinzu. Dies verhindert, dass Ihre Inhalte durch obere und untere Balken sowie durch den Overscan-Bereich auf tvOS verdeckt werden. Einschränkungen für den sicheren Bereich werden bei der Bereitstellung auf früheren Versionen von iOS in "Oben" und "Unten" konvertiert.
Hier finden Sie eine einfache Referenz als Vergleich (um einen ähnlichen visuellen Effekt zu erzielen) zwischen dem vorhandenen Layout-Handbuch (oben und unten) und dem Layout-Handbuch für sichere Bereiche.
Layout für sichere Bereiche:
AutoLayout
Wie arbeite ich mit Safe Area Layout?
Befolgen Sie diese Schritte, um eine Lösung zu finden:
- Aktivieren Sie "Sicheres Bereichslayout", falls nicht aktiviert.
- Entfernen ‚alle Einschränkung‘ , wenn sie zeigt Verbindung mit mit Super - Blick und wieder befestigen all mit sicherem Layout Anker. ODER Doppelklicken Sie auf eine Einschränkung und bearbeiten Sie die Verbindung von der Superansicht zum SafeArea-Anker
Hier ist ein Beispiel-Snapshot, wie Sie das Layout für sichere Bereiche aktivieren und Einschränkungen bearbeiten können.
Hier ist das Ergebnis der obigen Änderungen
Layoutdesign mit SafeArea
Beim Entwerfen für das iPhone X müssen Sie sicherstellen, dass Layouts den Bildschirm ausfüllen und nicht durch die abgerundeten Ecken des Geräts, das Sensorgehäuse oder die Anzeige für den Zugriff auf den Startbildschirm verdeckt werden.
Die meisten Apps, die standardmäßige, vom System bereitgestellte Benutzeroberflächenelemente wie Navigationsleisten, Tabellen und Sammlungen verwenden, passen sich automatisch an den neuen Formfaktor des Geräts an. Hintergrundmaterialien erstrecken sich bis zu den Rändern der Anzeige, und die Elemente der Benutzeroberfläche werden entsprechend eingefügt und positioniert.
Für Apps mit benutzerdefinierten Layouts sollte die Unterstützung des iPhone X auch relativ einfach sein, insbesondere wenn Ihre App das automatische Layout verwendet und die Richtlinien für das Layout sicherer Bereiche und Ränder einhält.
Hier ist Beispielcode (siehe: Safe Area Layout Guide ) :
Wenn Sie Ihre Einschränkungen im Code erstellen, verwenden Sie die Eigenschaft safeAreaLayoutGuide von UIView, um die relevanten Layoutanker abzurufen. Lassen Sie uns das obige Interface Builder-Beispiel im Code neu erstellen, um zu sehen, wie es aussieht:
Angenommen, wir haben die grüne Ansicht als Eigenschaft in unserem Ansichts-Controller:
private let greenView = UIView()
Möglicherweise haben wir eine Funktion zum Einrichten der Ansichten und Einschränkungen, die von viewDidLoad aufgerufen werden:
private func setupView() {
greenView.translatesAutoresizingMaskIntoConstraints = false
greenView.backgroundColor = .green
view.addSubview(greenView)
}
Erstellen Sie die Einschränkungen für führende und nachfolgende Ränder wie immer mit dem layoutMarginsGuide der Stammansicht:
let margins = view.layoutMarginsGuide
NSLayoutConstraint.activate([
greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
])
Wenn Sie nicht nur auf iOS 11 abzielen, müssen Sie die Einschränkungen für die Layout-Anleitung für sichere Bereiche mit #available umschließen und für frühere iOS-Versionen auf die oberen und unteren Layout-Anleitungen zurückgreifen:
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)
])
}
Ergebnis:
Nach UIViewVerlängerung, macht es Ihnen leicht , mit SafeAreaLayout programmatisch zu arbeiten.
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
}
}
}
Hier ist Beispielcode in Objective-C :
Hier ist die offizielle Dokumentation von Apple Developer für das Layout von sicheren Bereichen
Für die Gestaltung der Benutzeroberfläche des iPhone-X ist ein sicherer Bereich erforderlich. Hier finden Sie grundlegende Richtlinien zum Entwerfen der Benutzeroberfläche für das iPhone-X mithilfe des Safe Area Layout
