webentwicklung-frage-antwort-db.com.de

Sicherer Bereich von Xcode 9

Beim Durchsuchen von Xcode9 Beta wurde ein sicherer Bereich in der Ansichtshierarchie des Interface Builders gefunden. Ich bin neugierig geworden und habe versucht, mehr über die Dokumentation zu Safe Area on Apples zu erfahren. In Gist sagt das Dokument "Der Ansichtsbereich, der direkt mit dem automatischen Layout interagiert" will wissen, praktische Verwendung dieser neuen Sache.

Hat jemand eine Ahnung?

enter image description here

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, dies 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.

132
dip

Safe Area ist eine Layoutanleitung ( 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+ veraltet Apple die oberen und unteren Layoutrichtlinien und ersetzt sie durch eine einzige Layoutrichtlinie für sichere Bereiche.

Wenn die Ansicht auf dem Bildschirm angezeigt wird, gibt diese Anleitung den Teil der Ansicht wieder, 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 in der Eigenschaft overscanCompensationInsets von UIScreen definiert.) Außerdem wird der zusätzliche Speicherplatz abgedeckt, der in der Eigenschaft additionalSafeAreaInsets des Ansichts-Controllers definiert ist. Wenn die Ansicht derzeit nicht in einer Ansichtshierarchie installiert ist oder noch nicht auf dem Bildschirm angezeigt wird, stimmt die Layout-Anleitung immer mit den Rändern der Ansicht überein.

Für die Stammansicht des Ansichtscontrollers stellt der sichere Bereich in dieser Eigenschaft den gesamten Teil des Inhalts des Ansichtscontrollers dar, der verdeckt ist, und alle zusätzlichen Einfügungen, die Sie angegeben haben. Für andere Ansichten in der Ansichtshierarchie gibt der sichere Bereich nur den Teil dieser Ansicht wieder, der verdeckt ist. Befindet sich eine Ansicht beispielsweise vollständig im sicheren Bereich der Stammansicht des Ansichtscontrollers, sind die Edge-Einfügungen in dieser Eigenschaft 0.

Laut Apple Xcode 9 - Release note
Interface Builder verwendet UIView.safeAreaLayoutGuide als Ersatz für die veralteten Layout-Handbücher Oben und Unten in UIViewController. Um den neuen sicheren Bereich zu verwenden, wählen Sie im Dateiinspektor für den Ansichtscontroller die Option „Layouthilfslinien für sichere Bereiche“ aus und fügen Sie dann Einschränkungen zwischen Ihren Inhalten und den neuen Ankern für sichere Bereiche hinzu. Dies verhindert, dass Ihre Inhalte durch die oberen und unteren 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.

enter image description here


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.

Sicherheitsbereichslayout:  enter image description here

AutoLayout

enter image description here


Wie arbeite ich mit dem Safe Area Layout?

Befolgen Sie diese Schritte, um eine Lösung zu finden:

  • Aktivieren Sie "Safe Area Layout", falls nicht aktiviert.
  • Entfernen Sie alle Einschränkungen, wenn sie eine Verbindung mit Super View aufweisen, und fügen Sie alle mit dem sicheren Layoutanker wieder hinzu. OR Doppelklicken Sie auf eine Einschränkung und bearbeiten Sie die Verbindung von der Superansicht zum SafeArea-Anker

Hier sehen Sie einen Beispielschnappschuss, wie Sie das Layout des sicheren Bereichs aktivieren und die Einschränkung bearbeiten.

enter image description here

Hier ist das Ergebnis der obigen Änderungen

enter image description here


Layoutgestaltung mit SafeArea
Beim Entwerfen für 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.

enter image description here

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 Benutzeroberflächenelemente werden entsprechend eingefügt und positioniert.

enter image description here

Für Apps mit benutzerdefinierten Layouts sollte die Unterstützung von iPhone X ebenfalls relativ einfach sein, insbesondere wenn Ihre App das automatische Layout verwendet und die Richtlinien für sichere Bereiche und Ränder einhält.

enter image description here


Hier ist ein Beispielcode (Ref from: Leitfaden für das Layout sicherer Bereiche ) :
Wenn Sie Ihre Einschränkungen im Code erstellen, verwenden Sie die safeAreaLayoutGuide-Eigenschaft von UIView, um die relevanten Layoutanker abzurufen. Erstellen wir das obige Interface Builder-Beispiel im Code neu, um zu sehen, wie es aussieht:

Angenommen, wir haben die grüne Ansicht als Eigenschaft in unserem Ansichtscontroller:

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 den vorderen und hinteren Rand 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 den Leitfaden für sichere Bereiche mit #available umbrechen und für frühere iOS-Versionen auf die oberen und unteren Leitfäden für Layouts 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:

enter image description here


Machen Sie es Ihnen nach der UIView -Erweiterung einfach, programmgesteuert mit SafeAreaLayout 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 Apple Offizielle Entwicklerdokumentation für Leitfaden für das Layout sicherer Bereiche


Für die Gestaltung der Benutzeroberfläche für das iPhone-X ist ein sicherer Bereich erforderlich. Hier ist eine grundlegende Richtlinie für Entwerfen der Benutzeroberfläche für das iPhone-X mit Safe Area Layout

244
Krunal

Ich möchte etwas erwähnen, das mich als erstes erwischt hat, als ich versuchte, eine SpriteKit-basierte App anzupassen, um die abgerundeten Kanten und "Kerben" des neuen iPhone X zu vermeiden, wie es die neueste Version vorschlägt Human Interface Guidelines : Die neue Eigenschaft safeAreaLayoutGuide von UIView muss abgefragt werden , nachdem die Ansicht der Hierarchie hinzugefügt wurde (für Beispiel: auf -viewDidAppear:), um einen aussagekräftigen Layoutrahmen zu melden (andernfalls wird nur die volle Bildschirmgröß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 , gibt diese Anleitung den Teil der Ansicht wieder, der nicht von Navigationsleisten, Registerkartenleisten, Symbolleisten und anderen Ansichten der Vorfahren abgedeckt wird. (In tvOS spiegelt der sichere Bereich den Bereich wider, der nicht über der Bildschirmblende liegt.) Wenn die Ansicht derzeit nicht in einer Ansichtshierarchie installiert oder auf dem Bildschirm noch nicht sichtbar ist, entsprechen die Kanten der Layout-Hilfslinien den Kanten der Ansicht .

(Hervorhebung von mir)

Wenn Sie es bereits bei -viewDidLoad: gelesen haben, ist layoutFrame in der Anleitung {{0, 0}, {375, 812}} anstelle des erwarteten {{0, 44}, {375, 734}}

17
Nicolas Miari

enter image description here

  • Früher in iOS 7.0–11.0 < Veraltet > UIKit verwendet topLayoutGuide & bottomLayoutGuide = das ist die Eigenschaft UIView
  • iOS11 + verwendet safeAreaLayoutGuide , das auch die Eigenschaft UIView ist

  • Aktivieren Sie das Kontrollkästchen Leitfaden zum Layout des sicheren Bereichs im Dateiinspektor.

  • Mithilfe von sicheren Bereichen können Sie Ihre Ansichten im sichtbaren Bereich der gesamten Benutzeroberfläche platzieren.

  • In tvOS enthält der sichere Bereich auch die Overscan-Insets 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 Ansichten der Vorfahren abgedeckt wird.
  • Verwenden Sie sichere Bereiche, um Inhalte wie UIButton usw. anzuordnen.

  • 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 der Hintergrund bis an die Ränder der Anzeige erstreckt und dass vertikal scrollbare Layouts wie Tabellen und Sammlungen ganz nach unten fortgesetzt werden.

  • Die Statusleiste ist auf dem iPhone X höher als auf anderen iPhones. Wenn Ihre App eine feste Höhe für die Statusleiste zum Positionieren 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 Indicator Containers beträgt 34 ​​Punkte.

  • Sobald Sie Safe Area Layout Guide aktiviert haben, werden die im Interface Builder aufgelisteten Eigenschaften für Einschränkungen für sichere Bereiche angezeigt.

enter image description here

Sie können Einschränkungen für self.view.safeAreaLayoutGuide festlegen.

Ziel:

  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;

Swift:

   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
        }

enter image description here

enter image description here

enter image description here

14
Jack

Apple hat die Eigenschaften topLayoutGuide und bottomLayoutGuide bereits in iOS 7 als Eigenschaften von UIViewController eingeführt. Sie ermöglichten das Erstellen von Einschränkungen, um zu verhindern, dass Ihre Inhalte von UIKit-Leisten wie Status-, Navigations- 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 link .

7
Kemo

Mithilfe des Handbuchs für das Layout sicherer Bereiche können Sie vermeiden, dass Elemente der Systembenutzeroberfläche beim Positionieren von Inhalten und Steuerelementen unterlaufen.

Der sichere Bereich ist der Bereich zwischen den Elementen der System-Benutzeroberfläche: 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 im Hochformat zusätzliche Einblendungen an den oberen und unteren Bildschirmrändern, auch wenn kein Balken angezeigt wird. In der Landschaft befindet sich der sichere Bereich an den Seiten der Bildschirme und der Ausgangsanzeige.

Dies stammt aus Apples Video Designing for iPhone X , in dem auch visualisiert wird, wie sich verschiedene Elemente auf den sicheren Bereich auswirken.

4
Yannick