Programmgesteuerte Layouteinschränkungen in Xamarin.iOS

  • Artikel

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 UIViewhinzugefü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. oder BottomAnchorHeightAnchor) 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 TopAnchorEigenschaften , 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 bereitgestellten constant Offsetwert.
  • ConstraintGreaterThanOrEqualTo : Definiert eine Beziehung mit first attribute >= second attribute + [constant] einem optional bereitgestellten constant Offsetwert.
  • ConstraintLessThanOrEqualTo : Definiert eine Beziehung mit first attribute <= second attribute + [constant] einem optional bereitgestellten constant 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:

Eine Layouteinschränkung, die als linearer Ausdruck ausgedrückt wird

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, Rightund Top entspricht, und Bottom definiert die NSLayoutRelation Enumeration die Beziehung, die zwischen den angegebenen Attributen als Equalerstellt 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:

  1. Erstellen Sie eine NSDictionary , die die Ansichtsobjekte und Layoutleitlinien sowie einen Zeichenfolgenschlüssel enthält, der beim Definieren der Formate verwendet wird.
  2. 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.
  3. Erstellen Sie die Formatzeichenfolge, um eine einzelne Spalte oder Zeile von Elementen zu layouten.
  4. Rufen Sie die FromVisualFormat -Methode der NSLayoutConstraint -Klasse auf, um die Einschränkungen zu generieren.
  5. Rufen Sie die ActivateConstraints -Methode der NSLayoutConstraint -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 AlignAllTopNSLayoutFormatOptions 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.