Visual Design Updates in iOS 11
In iOS 11 hat Apple neue visuelle Änderungen eingeführt, einschließlich Aktualisierungen der Navigationsleiste, der Suchleiste und der Tabellenansichten. Darüber hinaus wurden Verbesserungen vorgenommen, um mehr Flexibilität gegenüber Rändern und Vollbildinhalten zu ermöglichen. Diese Änderungen werden in diesem Leitfaden behandelt.
Informationen speziell zum Entwerfen für das iPhone X finden Sie in watch Video zum Entwerfen für das iPhone X von Apple.
UIKit
UIKit-Balken wurden in iOS 11 angepasst, um sie für Endbenutzer zugänglicher zu machen.
Eine solche Änderung ist eine neue HUD-Anzeige, die angezeigt wird, wenn ein Benutzer lange auf ein Balkenelement drückt. Um dies zu aktivieren, legen Sie die largeContentSizeImage -Eigenschaft auf fest UIBarItem , und fügen Sie ein größeres Bild über einen Ressourcenkatalog hinzu:
barItem.LargeContentSizeImage = UIImage.FromBundle("AccessibleImage");
Navigationsleiste
iOS 11 hat neue Funktionen eingeführt, die die Lesbarkeit von Navigationsleistentiteln erleichtern. Apps können diesen größeren Titel anzeigen, indem sie die PrefersLargeTitles Eigenschaft true zuweisen:
NavigationController.NavigationBar.PrefersLargeTitles = true;
Wenn Sie größere Titel in Ihrer App festlegen, werden alle Navigationsleistentitel in Ihrer App größer angezeigt, wie im folgenden Screenshot veranschaulicht:
Um zu steuern, wann ein großer Titel auf einer Navigationsleiste angezeigt wird, legen Sie für LargeTitleDisplayMode das Navigationselement auf Always, Neveroder Automaticfest.
Suchcontroller
iOS 11 hat es einfacher gemacht, einen Suchcontroller direkt zur Navigationsleiste hinzuzufügen. Nachdem Sie einen Suchcontroller erstellt haben, fügen Sie ihn ihrer Navigationsleiste mit der SearchController -Eigenschaft hinzu:
NavigationItem.SearchController = searchController;
Je nach Funktionalität Ihrer App soll die Suchleiste ausgeblendet werden, wenn ein Benutzer durch eine Liste scrollt. Sie können dies mithilfe der HidesSearchBarWhenScrolling -Eigenschaft anpassen.
Ränder
Apple hat eine neue Eigenschaft directionalLayoutMargins – erstellt, die verwendet werden kann, um den Abstand zwischen Ansichten und Unteransichten festzulegen. Verwenden Sie directionalLayoutMargins mit leading oder trailing Einsets. Unabhängig davon, ob es sich beim System um eine Sprache von links nach rechts oder rechts nach links handelt, wird der Abstand in Ihrer App von iOS entsprechend festgelegt.
In iOS 10 und früher hatten alle Ansichten eine Minimale Randgröße, an der sie ausgerichtet wurden. iOS 11 hat die Option zum Überschreiben von ViewRespectsSystemMinimumLayoutMarginseingeführt. Wenn Sie diese Eigenschaft beispielsweise auf false festlegen, können Sie Ihre Edgeeinsätze auf Null anpassen:
ViewRespectsSystemMinimumLayoutMargins = false;
View.LayoutMargins = UIEdgeInsets.Zero;
Vollbildinhalt
iOS 7 wurde eingeführttopLayoutGuide und bottomLayoutGuide als Möglichkeit, Ihre Ansichten so einzuschränken, dass sie nicht durch UIKit-Balken ausgeblendet werden und sich in einem sichtbaren Bereich ihres Bildschirms befinden. Diese wurden in iOS 11 zugunsten des sicheren Bereichs veraltet.
Der sichere Bereich ist eine neue Art, über den sichtbaren Raum Ihrer Anwendung nachzudenken und wie Einschränkungen zwischen einer Ansicht und einer Superansicht hinzugefügt werden. Betrachten Sie beispielsweise das folgende Bild:
Wenn Sie zuvor eine Ansicht hinzugefügt haben und die Ansicht im grünen Bereich oben sichtbar sein soll, haben Sie sie auf die untereTopLayoutGuide und obere Seite des BottomLayoutGuideeingeschränkt. In iOS 11 würden Sie es stattdessen auf den oberen und unteren Bereich des sicheren Bereichs beschränken. Ein Beispiel folgt:
var safeGuide = View.SafeAreaLayoutGuide;
imageView.TopAnchor.ConstraintEqualTo(safeGuide.TopAnchor).Active = true;
safeGuide.BottomAnchor.ConstraintEqualTo(imageView.BottomAnchor).Active = true;
Tabellenansicht
Die UITableView hat eine Reihe kleiner, aber wichtiger Änderungen in iOS 11.
Standardmäßig werden Kopfzeilen, Fußzeilen und Zellen jetzt automatisch basierend auf ihrem Inhalt dimensioniert. Um dieses Verhalten der automatischen Größenanpassung zu deaktivieren, EstimatedSectionHeaderHeightlegen Sie , EstimatedRowHeightoder EstimatedSectionFooterHeight auf 0 fest.
Unter bestimmten Umständen (z. B. beim Hinzufügen von UITableViewController bei Verwendung vorhandener Storyboards im Schnittstellen-Generator) müssen Sie selbst dimensionierende Zellen jedoch möglicherweise manuell aktivieren. Stellen Sie hierzu sicher, dass Sie die folgenden Eigenschaften in der Tabellenansicht für Zellen, Kopfzeilen und Fußzeilen festgelegt haben:
// Cells
TableView.RowHeight = UITableView.AutomaticDimension;
TableView.EstimatedRowHeight = UITableView.AutomaticDimension;
// Header
TableView.SectionHeaderHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionHeaderHeight = 40f;
//Footer
TableView.SectionFooterHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionFooterHeight = 40f;
iOS 11 hat die Funktionalität von Zeilenaktionen erweitert. UISwipeActionsConfiguration wurde eingeführt, um eine Reihe von Aktionen zu definieren, die ausgeführt werden sollen, wenn der Benutzer in eine Zeile in einer Tabellenansicht in beide Richtungen wischt. Dieses Verhalten ähnelt dem des nativen Mail.app. Weitere Informationen finden Sie im Leitfaden zu Zeilenaktionen .
Tabellenansichten unterstützen das Ziehen und Ablegen in iOS 11. Weitere Informationen finden Sie in der Anleitung zum Ziehen und Ablegen .