Sicherer Bereich von Xcode 9

Während der Erkundung von Xcode9 Beta wurde in Interface Buildern ein sicherer Bereich gefunden. Hierarchie-Viewer anzeigen . Ich wurde neugierig und versuchte, etwas über die Dokumentation von Safe Area on Apples zu erfahren. Im Wesentlichen heißt es in dem Dokument "Der Ansichtsbereich, der direkt mit dem automatischen Layout interagiert". Aber es hat mich nicht befriedigt, ich möchte wissen, wie diese neue Sache praktisch angewendet wird.

Hat jemand eine Ahnung?

Fazit Absatz aus Apple-Dokument für den sicheren Bereich.

Die UILayoutGuide-Klasse wurde entwickelt, um alle Aufgaben auszuführen, die zuvor von Dummy-Ansichten ausgeführt wurden, jedoch auf sicherere und effizientere Weise. Layout-Anleitungen definieren keine neue Ansicht. Sie nehmen nicht an der Ansichtshierarchie teil. Stattdessen definieren sie einfach einen rechteckigen Bereich im Koordinatensystem ihrer eigenen Ansicht, der mit dem automatischen Layout interagieren kann.

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 :

• So fügen Sie programmgesteuert einen sicheren Bereich hinzu

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

Ich möchte etwas erwähnen , das mich zuerst beeindruckt hat, als ich versuchte, eine SpriteKit-basierte App anzupassen, um die runden Kanten und "Kerben" des neuen iPhone X zu vermeiden, wie in den neuesten Richtlinien für Benutzeroberflächen vorgeschlagen : Die neue Eigenschaft safeAreaLayoutGuidevon UIViewmuss abgefragt werden, nachdem die Ansicht zur Hierarchie hinzugefügt wurde (z. B. ein -viewDidAppear:), um einen aussagekräftigen Layoutrahmen zu melden (andernfalls wird nur die Vollbildgröße zurückgegeben).

Aus der Dokumentation der Unterkunft:

Die Layout-Anleitung, die den Teil Ihrer Ansicht darstellt, der von Balken und anderen Inhalten nicht verdeckt wird. Wenn die Ansicht auf dem Bildschirm angezeigt wird , spiegelt diese Anleitung den Teil der Ansicht wider, der nicht von Navigationsleisten, Registerkartenleisten, Symbolleisten und anderen Vorfahrenansichten abgedeckt wird. (In tvOS spiegelt der sichere Bereich den Bereich wider, der nicht über die Bildschirmblende abgedeckt ist.) Wenn die Ansicht derzeit nicht in einer Ansichtshierarchie installiert ist oder noch nicht auf dem Bildschirm sichtbar ist, entsprechen die Kanten der Layoutführung den Kanten der Ansicht .

(Hervorhebung von mir)

Wenn Sie es bereits lesen -viewDidLoad:, wird das layoutFramedes Handbuchs {{0, 0}, {375, 812}}anstelle des erwarteten sein{{0, 44}, {375, 734}}

• Früher in iOS 7,0-11,0 < Veraltete > UIKitverwendet die topLayoutGuide & bottomLayoutGuide das ist UIViewEigentum

• iOS11 + verwendet den SafeAreaLayoutGuide, der ebenfalls UIViewEigentum ist

• Aktivieren Sie das Kontrollkästchen " Leitfaden für das Layout sicherer Bereiche" im Dateiinspektor .

• Mithilfe sicherer Bereiche können Sie Ihre Ansichten im sichtbaren Bereich der gesamten Benutzeroberfläche platzieren.

• In tvOS enthält der sichere Bereich auch die Overscan-Einsätze des Bildschirms, die den Bereich darstellen, der von der Bildschirmblende abgedeckt wird.

• safeAreaLayoutGuide spiegelt den Teil der Ansicht wider, der nicht von Navigationsleisten, Registerkartenleisten, Symbolleisten und anderen Vorfahrenansichten abgedeckt wird.

• Verwenden Sie sichere Bereiche als Hilfsmittel für die Gestaltung Ihrer Inhalte wie UIButton usw.

• 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.

• Stellen Sie sicher, dass sich die Hintergründe bis zu den Rändern der Anzeige erstrecken und dass vertikal scrollbare Layouts wie Tabellen und Sammlungen bis zum Ende fortgesetzt werden.

• Die Statusleiste ist auf dem iPhone X höher als auf anderen iPhones. Wenn Ihre App eine feste Statusleistenhöhe für die Positionierung von Inhalten unterhalb der Statusleiste annimmt, müssen Sie Ihre App aktualisieren, um Inhalte basierend auf dem Gerät des Benutzers dynamisch zu positionieren. Beachten Sie, dass sich die Höhe der Statusleiste auf dem iPhone X nicht ändert, wenn Hintergrundaufgaben wie Sprachaufzeichnung und Standortverfolgung aktiv sind print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

• Die Höhe des Home-Indikatorbehälters beträgt 34 ​​Punkte.

• Sobald Sie das Layouthandbuch für sichere Bereiche aktiviert haben, wird die Eigenschaft für Einschränkungen für sichere Bereiche im Interface Builder angezeigt.

Sie können Einschränkungen mit jeweils self.view.safeAreaLayoutGuideas- festlegen

Objekt:

  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;

Schnell:

   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 hat den topLayoutGuide und den bottomLayoutGuide bereits in iOS 7 als Eigenschaften von UIViewController eingeführt. Mit ihnen konnten Sie Einschränkungen erstellen, um zu verhindern, dass Ihre Inhalte von UIKit-Leisten wie Status, Navigation oder Registerkartenleiste ausgeblendet werden. Diese Layout-Anleitungen sind in iOS 11 veraltet und werden durch eine einzige Layout-Anleitung für sichere Bereiche ersetzt.

Weitere Informationen finden Sie unter dem Link .

Mit dem Handbuch zum Layout sicherer Bereiche können Sie vermeiden, dass sich Elemente der Systembenutzeroberfläche beim Positionieren von Inhalten und Steuerelementen überschneiden.

Der sichere Bereich ist der Bereich zwischen den Elementen der Systemoberfläche, z. B. Statusleiste, Navigationsleiste und Symbolleiste oder Registerkartenleiste. Wenn Sie Ihrer App eine Statusleiste hinzufügen, wird der sichere Bereich verkleinert. Wenn Sie Ihrer App eine Navigationsleiste hinzufügen, wird der sichere Bereich erneut verkleinert.

Auf dem iPhone X bietet der sichere Bereich zusätzliche Einfügungen von den oberen und unteren Bildschirmkanten im Hochformat, auch wenn kein Balken angezeigt wird. Im Querformat ist der sichere Bereich an den Seiten der Bildschirme und der Startanzeige eingefügt.

Dies stammt aus Apples Video Designing für iPhone X, in dem auch dargestellt wird, wie sich verschiedene Elemente auf den sicheren Bereich auswirken.