Wie unterstützt man iPhone X Auflösung oder Bildschirmgröße für Apps?

Question

Nach 2017 Keynote heute und iPhone X starten, ich bin gleichermaßen besorgt, wie aufgeregt über neue iphone. Bei dieser Frage geht es mehr um Benutzerschnittstelle, Designrichtlinien oder Ansatz zu Schnittstellendesigns als um technische Probleme.

Meine Frage ist, wie man die 1125px × 2436px (375pt × 812pt @ 3x) Auflösung unterstützt?

Wie in diesem Bild von Apple auf Human Interface Guidelines for iPhoneX gezeigt, wird hier gesagt, dass es 3x Bilderweiterung unterstützt. Aber es gibt 185 Punkte extra an der Spitze sowie unter Berücksichtigung 414 * 736 Punkte für iPhone 7 plus Auflösung ist es 414 - 375 = 39 Punkte weniger in der Breite.

Sie können den Vergleich der Auflösung hier überprüfen: - https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions.

Wie können wir möglicherweise unsere App für diese neue Designauflösung entwerfen?

Einige Problemszenarien:

Wie unterstützen:

1. horizontal imageviews die gesamte Breite der Vorrichtung und eine feste Höhe Skalierung.
2. ImageViews skalieren ganze Breite und Höhe (wie ganze Seite Produktbilder in E-Commerce-Anwendungen).
3. Es gibt zusätzliche 185 Punkte Höhe, die eine Menge Leerstelle zeigen, wenn ich einen begrenzten Inhalt auf der Seite zeige. Zum Beispiel: Wie entwerfe ich eine Ansicht, die 400 Pixel hoch ist und die gesamte Breite skaliert? Sollte ich es top ausgerichtet Mitte vertikal ausgerichtet halten?

Ich denke, 185 Punkte ist eine Menge Immobilien für die Höhe. Wir müssen viele Designs und Bildschirme überdenken. Wie können wir diese Szenarien entwerfen und angehen? Ich hoffe, meine Frage ist jetzt klar genug.

Meine persönliche Meinung: - Egal wie hart oder unordentlich es ist, wird Endbenutzererfahrung besser sein und größer, wenn wir uns an diese Auflösung gewöhnen.

Bitte teilen Sie tolle Techniken und Design-Prozess. Prost !!!

Answer 1

Nach einer möglichen Lösung für verschiedene UI-Probleme Ich fand, dass Safe Area Layout Guide von Apple mit iOS 11 eingeführt kann viel helfen.

Hinweis: - Sichere Bereich Layout Führung kann auch dann, wenn Ihre Bereitstellung Ziel weniger ist als iOS 11.

safeAreaLayoutGuide ersetzt topLayoutGuide und bottomLayoutGuide als neue Art und Weise verwendet werden, Einschränkungen zwischen Ansichten und einem Superview zu erstellen.

1. ein Startbild für iPhone X Hinzufügen mit 1125px × 2436px Auflösung

2. Gehen Sie zu Ihrer Interface-Datei, wählen Sie Identität Inspektor. Aktivieren Sie den sicheren Bereich wie unten gezeigt.

3. Wenn Sie einen uiview an den Anfang Ihrer Ansicht angeheftet haben, können Sie die obere Einschränkung mit dem sicheren Bereich und nicht mit dem Superview verknüpfen.

4. In ähnlicher Weise geben Sie für die untere Ansicht die untere Einschränkung in den sicheren Bereich anstelle der Superansicht ein.

Wenn Sie wissen, wie programmatische Beschränkung erstellen Sie das Layout Anker verwenden können, sicheren Bereich oberhalb der Ansicht von oben aufzunehmen. So können Sie Ihr Layout programmatisch mit dem sicheren Bereich verknüpfen.

topView.topAnchor.constraint(
+ equalTo: view.safeAreaLayoutGuide.topAnchor 
).isActive = true 

UPDATE: Ein anderes Szenario - Angenommen, Sie eine UIView an oben auf dem Bildschirm haben. Sie möchten, dass diese Ansicht unterhalb von iPhoneX beginnt. Wir brauchen oberen Rand auf allen 11 iOS 11 Geräte und Geräte unter iOS wie folgt zu berechnen: -

if (@available(iOS 11, *)) { 
     UIWindow *window = UIApplication.sharedApplication.keyWindow; 
     toppadding = 0.0; 
     if (window.safeAreaInsets.top > 0) 
     { 
      toppadding = window.safeAreaInsets.top - 20; 
     } 
     //  CGFloat topPadding = window.safeAreaInsets.top; 
     bottomPadding = window.safeAreaInsets.bottom; 
     self.navigationViewTopConstraint.constant = toppadding; 

    } 
    else 
    { 
     bottomPadding = 0; 
     self.navigationViewTopConstraint.constant = 0; 
    } 

Weiterführende Literatur: - Here

Answer 2

Ersetzen Top und Bottom Layout-Führer in iOS 11 haben wir Safe Layout Guides im Auge zu behalten bei der Gestaltung oder Aktualisierung automatischen Layout für iPhone X.

Hilfreiche Ressourcen (Apple-Dev.) Für iPhone X Anzeigen Anpassung:

• Designing for iPhone X
  
• Building apps for iPhone X

Laut Apple wird Safe Layout Guide respektieren lösen die meisten der Auto-Layout-Probleme für iPhone X. Auch nach den oben genannten Videos von Apple lag Querformat-Orientierung Bei Problemen mit dem iPhone X treten Probleme auf. Trotzdem scheint es nicht allzu schwierig zu sein, mit dem iPhone X Display zurecht zu kommen.