Programmgesteuerte Layouteinschränkungen in Xamarin.iOS
In diesem Leitfaden wird das Arbeiten mit iOS-Einschränkungen des automatischen Layouts in C#-Code erläutert, anstatt sie im iOS-Designer zu erstellen.
Auto Layout (auch als "adaptives Layout" bezeichnet) ist ein reaktionsschneller Entwurfsansatz. Im Gegensatz zum Übergangslayoutsystem, bei dem die Position jedes Elements an einen Punkt auf dem Bildschirm festcodiert ist, handelt es sich beim automatischen Layout um Beziehungen – die Positionen von Elementen relativ zu anderen Elementen auf der Entwurfsoberfläche. Im Mittelpunkt des automatischen Layouts stehen Einschränkungen oder Regeln, die die Platzierung eines Elements oder einer Gruppe von Elementen im Kontext anderer Elemente auf dem Bildschirm definieren. Da die Elemente nicht an eine bestimmte Position auf dem Bildschirm gebunden sind, helfen Einschränkungen, ein adaptives Layout zu erstellen, das auf verschiedenen Bildschirmgrößen und Geräteausrichtungen gut aussieht.
Bei der Arbeit mit dem automatischen Layout in iOS verwenden Sie in der Regel den Xcode-Schnittstellen-Generator, um Layouteinschränkungen grafisch auf Ihren Ui-Elementen zu platzieren. Es kann jedoch vorkommen, dass Sie Einschränkungen in C#-Code erstellen und anwenden müssen. Beispielsweise, wenn dynamisch erstellte Benutzeroberflächenelemente verwendet werden, die einem UIView
hinzugefügt werden.
In diesem Leitfaden erfahren Sie, wie Sie Einschränkungen mithilfe von C#-Code erstellen und verwenden, anstatt sie im Xcode-Schnittstellen-Generator grafisch zu erstellen.
Programmgesteuertes Erstellen von Einschränkungen
Wie oben erwähnt, arbeiten Sie in der Regel mit Auto LayoutEinschränkungen im iOS-Designer. Für die Zeiten, in denen Sie Ihre Einschränkungen programmgesteuert erstellen müssen, haben Sie drei Optionen zur Auswahl:
- Layoutanker : Diese API bietet Zugriff auf die Ankereigenschaften (z
TopAnchor
. B. oderBottomAnchor
HeightAnchor
) der eingeschränkten UI-Elemente. - Layouteinschränkungen : Sie können Einschränkungen direkt mit der
NSLayoutConstraint
-Klasse erstellen. - Visuelle Formatierungssprache : Stellt eine ASCII-Art-ähnliche Methode zum Definieren Ihrer Einschränkungen bereit.
In den folgenden Abschnitten werden die einzelnen Optionen ausführlich erläutert.
Layoutanker
Mithilfe der NSLayoutAnchor
-Klasse verfügen Sie über eine Fluent-Schnittstelle zum Erstellen von Einschränkungen basierend auf den Ankereigenschaften der eingeschränkten UI-Elemente. Beispielsweise machen die oberen und unteren Layoutlinien eines Ansichtscontrollers die TopAnchor
Eigenschaften , und HeightAnchor
Ankereigenschaften verfügbar, BottomAnchor
während eine Ansicht edge-, Center-, Size- und Baselineeigenschaften verfügbar macht.
Wichtig
Zusätzlich zum Standardsatz von Ankereigenschaften enthalten iOS-Ansichten auch die LayoutMarginsGuides
Eigenschaften und ReadableContentGuide
. Diese Eigenschaften machen Objekte für die Arbeit mit den Rändern bzw. lesbaren Inhaltshandbüchern der Ansicht verfügbar UILayoutGuide
.
Layoutanker bieten mehrere Methoden zum Erstellen von Einschränkungen in einem leicht lesbaren, kompakten Format:
- ConstraintEqualTo : Definiert eine Beziehung mit
first attribute = second attribute + [constant]
einem optional bereitgestelltenconstant
Offsetwert. - ConstraintGreaterThanOrEqualTo : Definiert eine Beziehung mit
first attribute >= second attribute + [constant]
einem optional bereitgestelltenconstant
Offsetwert. - ConstraintLessThanOrEqualTo : Definiert eine Beziehung mit
first attribute <= second attribute + [constant]
einem optional bereitgestelltenconstant
Offsetwert.
Beispiel:
// Get the parent view's layout
var margins = View.LayoutMarginsGuide;
// Pin the leading edge of the view to the margin
OrangeView.LeadingAnchor.ConstraintEqualTo (margins.LeadingAnchor).Active = true;
// Pin the trailing edge of the view to the margin
OrangeView.TrailingAnchor.ConstraintEqualTo (margins.TrailingAnchor).Active = true;
// Give the view a 1:2 aspect ratio
OrangeView.HeightAnchor.ConstraintEqualTo (OrangeView.WidthAnchor, 2.0f);
Eine typische Layouteinschränkung kann einfach als linearer Ausdruck ausgedrückt werden. Betrachten Sie das folgende Beispiel:
Dies würde mithilfe von Layoutankern in die folgende Zeile C#-Code konvertiert werden:
PurpleView.LeadingAnchor.ConstraintEqualTo (OrangeView.TrailingAnchor, 10).Active = true;
Wobei die Teile des C#-Codes den angegebenen Teilen der Formel wie folgt entsprechen:
Gleichung | Code |
---|---|
Element 1 | PurpleView |
Attribut 1 | LeadingAnchor |
Beziehung | ConstraintEqualTo |
Multiplikator | Standardwerte auf 1.0, also nicht angegeben |
Item 2 | OrangeView |
Attribut 2 | TrailingAnchor |
Dauerhaft | 10.0 |
Zusätzlich zur Bereitstellung nur der Parameter, die zum Lösen einer bestimmten Layouteinschränkungsgleichung erforderlich sind, erzwingt jede layoutanker-Methode die Typsicherheit der an sie übergebenen Parameter. Daher werden horizontale Einschränkungsanker wie LeadingAnchor
oder TrailingAnchor
nur mit anderen horizontalen Ankertypen und Multiplikatoren nur für Größeneinschränkungen bereitgestellt.
Layouteinschränkungen
Sie können Einschränkungen für das automatische Layout manuell hinzufügen, indem Sie direkt einen NSLayoutConstraint
in C#-Code erstellen. Im Gegensatz zur Verwendung von Layoutankern müssen Sie einen Wert für jeden Parameter angeben, auch wenn er keine Auswirkungen auf die zu definierende Einschränkung hat. Als Ergebnis werden Sie am Ende eine beträchtliche Menge an schwer lesbarem, Boilerplate-Code produzieren. Beispiel:
//// Pin the leading edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.LeadingMargin, 1.0f, 0.0f).Active = true;
//// Pin the trailing edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.TrailingMargin, 1.0f, 0.0f).Active = true;
//// Give the view a 1:2 aspect ratio
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, OrangeView, NSLayoutAttribute.Width, 2.0f, 0.0f).Active = true;
Wenn die NSLayoutAttribute
Enumeration den Wert für die Ränder der Ansicht definiert und den LayoutMarginsGuide
Eigenschaften wie Left
, Right
und Top
entspricht, und Bottom
definiert die NSLayoutRelation
Enumeration die Beziehung, die zwischen den angegebenen Attributen als Equal
erstellt wird, LessThanOrEqual
oder GreaterThanOrEqual
.
Im Gegensatz zur Layoutanker-API heben die NSLayoutConstraint
Erstellungsmethoden nicht die wichtigen Aspekte einer bestimmten Einschränkung hervor, und es werden keine Kompilierzeitüberprüfungen für die Einschränkung durchgeführt. Daher ist es einfach, eine ungültige Einschränkung zu erstellen, die zur Laufzeit eine Ausnahme auslöst.
Visuelle Formatsprache
Mit der Visual Format Language können Sie Einschränkungen mithilfe von ASCII-Zeichen wie Zeichenfolgen definieren, die eine visuelle Darstellung der zu erstellenden Einschränkung bereitstellen. Dies hat folgende Vor- und Nachteile:
- Die Visual Format Language erzwingt nur die Erstellung gültiger Einschränkungen.
- Das automatische Layout gibt Einschränkungen an die Konsole mit der Visual Format Language aus, sodass die Debugnachrichten dem Code ähneln, der zum Erstellen der Einschränkung verwendet wird.
- Mit der Visual Format Language können Sie mehrere Einschränkungen gleichzeitig mit einem sehr kompakten Ausdruck erstellen.
- Da es keine kompilierungsseitige Überprüfung der Zeichenfolgen der Visual Format Language gibt, können Probleme nur zur Laufzeit erkannt werden.
- Da die visuelle Formatsprache die Visualisierung gegenüber der Vollständigkeit betont, können einige Einschränkungstypen nicht mit ihr erstellt werden (z. B. Verhältnisse).
Führen Sie die folgenden Schritte aus, wenn Sie die Visual Format Language verwenden, um eine Einschränkung zu erstellen:
- Erstellen Sie eine
NSDictionary
, die die Ansichtsobjekte und Layoutleitlinien sowie einen Zeichenfolgenschlüssel enthält, der beim Definieren der Formate verwendet wird. - Erstellen Sie optional eine
NSDictionary
, die einen Satz von Schlüsseln und Werten (NSNumber
) definiert, die als Konstantenwert für die Einschränkung verwendet werden. - Erstellen Sie die Formatzeichenfolge, um eine einzelne Spalte oder Zeile von Elementen zu layouten.
- Rufen Sie die
FromVisualFormat
-Methode derNSLayoutConstraint
-Klasse auf, um die Einschränkungen zu generieren. - Rufen Sie die
ActivateConstraints
-Methode derNSLayoutConstraint
-Klasse auf, um die Einschränkungen zu aktivieren und anzuwenden.
Um beispielsweise eine führende und eine nachgestellte Einschränkung in der Visual Format Language zu erstellen, können Sie Folgendes verwenden:
// Get views being constrained
var views = new NSMutableDictionary ();
views.Add (new NSString ("orangeView"), OrangeView);
// Define format and assemble constraints
var format = "|-[orangeView]-|";
var constraints = NSLayoutConstraint.FromVisualFormat (format, NSLayoutFormatOptions.AlignAllTop, null, views);
// Apply constraints
NSLayoutConstraint.ActivateConstraints (constraints);
Da die Visual Format Language immer Nullpunkteinschränkungen erzeugt, die an die Ränder der übergeordneten Ansicht angefügt sind, wenn der Standardabstand verwendet wird, erzeugt dieser Code identische Ergebnisse mit den oben dargestellten Beispielen.
Für komplexere UI-Designs, z. B. mehrere untergeordnete Ansichten in einer einzelnen Zeile, gibt die Visual Format Language sowohl den horizontalen Abstand als auch die vertikale Ausrichtung an. Wie im obigen Beispiel, in dem angegeben AlignAllTop
NSLayoutFormatOptions
wird, dass alle Ansichten in einer Zeile oder Spalte an ihren Oberen ausgerichtet werden.
Einige Beispiele für die Angabe allgemeiner Einschränkungen und der visuellen Formatzeichenfolgengrammatik finden Sie im Anhang zur Visuellen Formatsprache von Apple.
Zusammenfassung
In diesem Leitfaden wurde das Erstellen und Arbeiten mit Auto Layout-Einschränkungen in C# im Gegensatz zur grafischen Erstellung in der iOS-Designer vorgestellt. Zunächst wurde die Verwendung von Layoutankern (NSLayoutAnchor
) zum Behandeln des automatischen Layouts untersucht. Als Nächstes wurde gezeigt, wie Sie mit Layouteinschränkungen (NSLayoutConstraint
) arbeiten. Schließlich wird es mithilfe der Visuellen Formatsprache für das automatische Layout angezeigt.