Stapelansichten in Xamarin.iOS

  • Artikel

In diesem Artikel wird die Verwendung des neuen UIStackView-Steuerelements in einer Xamarin.iOS-App behandelt, um eine Reihe von Unteransichten in einem horizontalen oder vertikal angeordneten Stapel zu verwalten.

Wichtig

Beachten Sie, dass während StackView im iOS-Designer unterstützt wird, bei Verwendung des Stable-Kanals möglicherweise Benutzerfreundlichkeitsfehler auftreten. Das Wechseln der Beta- oder Alphakanäle sollte dieses Problem beheben. Wir haben beschlossen, diese exemplarische Vorgehensweise mit Xcode darzustellen, bis die erforderlichen Fixes im Stable-Kanal implementiert sind.

Das Stack View-Steuerelement (UIStackView) nutzt die Leistungsfähigkeit von AutoLayout- und Größenklassen zum Verwalten eines Stapels von Unteransichten, entweder horizontal oder vertikal, die dynamisch auf die Ausrichtung und Bildschirmgröße des iOS-Geräts reagiert.

Das Layout aller an eine Stapelansicht angefügten Unteransichten wird von ihm basierend auf vom Entwickler definierten Eigenschaften wie Achse, Verteilung, Ausrichtung und Abstand verwaltet:

Stack View layout diagram

Bei Verwendung einer UIStackView Xamarin.iOS-App kann der Entwickler entweder die Unteransichten innerhalb eines Storyboards im iOS-Designer definieren oder Unteransichten im C#-Code hinzufügen und entfernen.

Dieses Dokument besteht aus zwei Teilen: einem Schnellstart, mit dem Sie Ihre erste Stapelansicht implementieren können, und dann einige weitere technische Details zur Funktionsweise.

UIStackView-Video

UIStackView – Schnellstart

Als kurze Einführung in das UIStackView Steuerelement erstellen wir eine einfache Benutzeroberfläche, über die der Benutzer eine Bewertung von 1 bis 5 eingeben kann. Wir verwenden zwei Stapelansichten: eine zum vertikalen Anordnen der Schnittstelle auf dem Bildschirm des Geräts und eines zum horizontalen Anordnen der 1-5 Bewertungssymbole auf dem Bildschirm.

Definieren der Benutzeroberfläche

Starten Sie ein neues Xamarin.iOS-Projekt, und bearbeiten Sie die Datei "Main.storyboard " im Schnittstellen-Generator von Xcode. Ziehen Sie zunächst eine einzelne vertikale Stapelansicht auf den Ansichtscontroller:

Drag a single Vertical Stack View on the View Controller

Legen Sie im Attributinspektor die folgenden Optionen fest:

Set the Stack View options

Hierbei gilt:

  • Achse – Bestimmt, ob die Stapelansicht die Unteransichten horizontal oder vertikal anordnet.
  • Ausrichtung – Steuert, wie die Unteransichten in der Stapelansicht ausgerichtet werden.
  • Verteilung – Steuert, wie die Unteransichten innerhalb der Stapelansicht angepasst werden.
  • Abstand – Steuert den minimalen Abstand zwischen den einzelnen Unteransichten in der Stapelansicht.
  • Baseline Relative – If checked, the vertical spacing of each subview will be derived from it's baseline.
  • Layoutränder relativ – Platziert die Unteransichten relativ zu den Standardlayouträndern.

Wenn Sie mit einer Stapelansicht arbeiten, können Sie sich die Ausrichtung als X- und Y-Position der Unteransicht und der Verteilung als Höhe und Breite vorstellen.

Wichtig

UIStackView ist als nicht rendernde Containeransicht konzipiert und wird nicht auf den Zeichenbereich wie andere Unterklassen von UIView. Das Festlegen von Eigenschaften wie BackgroundColor z. B. oder Außerkraftsetzungen DrawRect hat also keinen visuellen Effekt.

Fahren Sie mit dem Layout der App-Benutzeroberfläche fort, indem Sie eine Bezeichnung, ImageView, zwei Schaltflächen und eine horizontale Stapelansicht hinzufügen, sodass sie wie folgt aussieht:

Laying out the Stack View UI

Konfigurieren Sie die horizontale Stapelansicht mit den folgenden Optionen:

Configure the Horizontal Stack View options

Da das Symbol, das jeden "Punkt" in der Bewertung darstellt, nicht gestreckt werden soll, wenn es der horizontalen Stapelansicht hinzugefügt wird, haben wir die Ausrichtung auf "Zentriert " und die Verteilung auf "Gleichmäßig" festgelegt.

Verbinden Sie schließlich die folgenden Verkaufsstellen und Aktionen:

The Stack View Outlets and Actions

Auffüllen eines UIStackView-Steuerelements aus Code

Kehren Sie zu Visual Studio für Mac zurück, und bearbeiten Sie die ViewController.cs Datei, und fügen Sie den folgenden Code hinzu:

public int Rating { get; set;} = 0;
...

partial void IncreaseRating (Foundation.NSObject sender) {

    // Maximum of 5 "stars"
    if (++Rating > 5 ) {
        // Abort
        Rating = 5;
        return;
    }

    // Create new rating icon and add it to stack
    var icon = new UIImageView (new UIImage("icon.png"));
    icon.ContentMode = UIViewContentMode.ScaleAspectFit;
    RatingView.AddArrangedSubview(icon);

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });

}

partial void DecreaseRating (Foundation.NSObject sender) {

    // Minimum of zero "stars"
    if (--Rating < 0) {
        // Abort
        Rating =0;
        return;
    }

    // Get the last subview added
    var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

    // Remove from stack and screen
    RatingView.RemoveArrangedSubview(icon);
    icon.RemoveFromSuperview();

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });
}

Sehen wir uns ein paar Teile dieses Codes im Detail an. Zunächst verwenden wir eine if Anweisung, um zu überprüfen, ob es nicht mehr als fünf "Sterne" oder weniger als Null gibt.

Zum Hinzufügen eines neuen Sterns laden wir das Bild und legen den Inhaltsmodus auf "Seitenanpassung skalieren" fest:

var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;

Dadurch wird das Sternsymbol nicht verzerrt, wenn es der Stapelansicht hinzugefügt wird.

Als Nächstes fügen wir das neue Sternsymbol zur Sammlung von Unteransichten der Stapelansicht hinzu:

RatingView.AddArrangedSubview(icon);

Sie werden feststellen, dass wir die UIImageView Eigenschaft der UIStackViewEigenschaft ArrangedSubviews und nicht der SubViewEigenschaft hinzugefügt haben. Jede Ansicht, die von der Stapelansicht gesteuert werden soll, muss der ArrangedSubviews Eigenschaft hinzugefügt werden.

Um eine Unteransicht aus einer Stapelansicht zu entfernen, rufen wir zuerst die Unteransicht auf, die entfernt werden soll:

var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

Dann müssen wir es aus der ArrangedSubviews Sammlung und der Super View entfernen:

// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();

Wenn Sie eine Unteransicht nur aus der ArrangedSubviews Sammlung entfernen, wird sie aus dem Steuerelement der Stapelansicht entfernt, aber nicht vom Bildschirm entfernt.

Testen der Benutzeroberfläche

Mit allen erforderlichen UI-Elementen und Code können Sie die Schnittstelle jetzt ausführen und testen. Wenn die Benutzeroberfläche angezeigt wird, werden alle Elemente in der vertikalen Stapelansicht von oben nach unten gleichmäßig angeordnet.

Wenn der Benutzer auf die Schaltfläche "Bewertung erhöhen" tippt, wird dem Bildschirm ein weiterer Stern hinzugefügt (bis zu maximal 5):

The sample app run

Die "Sterne" werden automatisch zentriert und gleichmäßig in der horizontalen Stapelansicht verteilt. Wenn der Benutzer auf die Schaltfläche "Bewertung verkleinern" tippt, wird ein Stern entfernt (bis keines übrig ist).

Details zur Stapelansicht

Nachdem wir nun eine allgemeine Vorstellung davon haben, was das UIStackView Steuerelement ist und wie es funktioniert, werfen wir einen tieferen Blick auf einige seiner Features und Details.

Automatische Layout- und Größenklassen

Wie wir oben gesehen haben, wird das Layout einer Stapelansicht durch diese Stapelansicht mit automatischen Layout- und Größenklassen vollständig gesteuert, um die angeordneten Ansichten zu positionieren und zu vergrößern.

Die Stapelansicht heftet die erste und letzte Unteransicht in ihrer Auflistung an die oberen und unteren Ränder für vertikale Stapelansichten oder die linken und rechten Ränder für horizontale Stapelansichten an. Wenn Sie die LayoutMarginsRelativeArrangement Eigenschaft auf true", dann heftet die Ansicht die Unteransichten an die relevanten Seitenränder anstelle des Rands an.

Die Stapelansicht verwendet die Eigenschaft der Unteransicht IntrinsicContentSize beim Berechnen der Größe der Unteransichten entlang der definierten Axis (mit Ausnahme der FillEqually Distribution). Die FillEqually Distribution Größe aller Unteransichten wird so geändert, dass sie die gleiche Größe aufweisen und so die Stapelansicht entlang der Axis.

Mit Ausnahme der Fill AlignmentStapelansicht wird die Eigenschaft der Unteransicht IntrinsicContentSize verwendet, um die Größe der Ansicht senkrecht zur angegebenen AxisAnsicht zu berechnen. Für die Fill AlignmentUnteransichten werden alle Unteransichten so angepasst, dass sie die Stapelansicht senkrecht zur angegebenen AxisAnsicht ausfüllen.

Positionieren und Skalieren der Stapelansicht

Während die Stapelansicht die gesamte Kontrolle über das Layout einer beliebigen Unteransicht hat (basierend auf Eigenschaften wie Axis und Distribution), müssen Sie die Stapelansicht (UIStackView) weiterhin in der übergeordneten Ansicht mithilfe von AutoLayout- und Größenklassen positionieren.

Im Allgemeinen bedeutet dies, dass sie mindestens zwei Kanten der Stapelansicht anheften, um sie zu erweitern und zu verkontrakten, wodurch die Position definiert wird. Ohne zusätzliche Einschränkungen wird die Größe der Stapelansicht automatisch so geändert, dass sie alle unteransichten wie folgt passt:

  • Die Größe entlang der Axis Größe ist die Summe aller Unteransichtsgrößen sowie alle Leerzeichen, die zwischen den einzelnen Unteransichten definiert wurden.
  • Wenn die LayoutMarginsRelativeArrangement Eigenschaft lautet true, enthält die Größe der Stapelansichten auch Platz für die Ränder.
  • Die Größe senkrecht zur Axis Auflistung wird auf die größte Unteransicht in der Auflistung festgelegt.

Darüber hinaus können Sie Einschränkungen für die Höhe und Breite der Stapelansicht angeben. In diesem Fall werden die Unteransichten (größe) so angeordnet, dass der durch die Stapelansicht angegebene Platz gefüllt wird, wie sie von den Distribution Eigenschaften Alignment bestimmt wird.

Wenn die BaselineRelativeArrangement Eigenschaft lautettrue, werden die Unteransichten basierend auf dem Basisplan der ersten oder letzten Unteransicht angeordnet, anstatt die Position "Oben", "Unten" oder- "Y" zu verwenden. Diese werden auf dem Inhalt der Stapelansicht wie folgt berechnet:

  • Eine vertikale Stapelansicht gibt die erste Unteransicht für die erste Basislinie und die letzte für die letzte zurück. Wenn eine dieser Unteransichten selbst Stapelansichten ist, werden deren erste oder letzte Basisplan verwendet.
  • Eine horizontale Stapelansicht verwendet die höchste Unteransicht sowohl für den ersten als auch für den letzten Basisplan. Wenn die höchste Ansicht auch eine Stapelansicht ist, verwendet sie die höchste Unteransicht als Basisplan.

Wichtig

Die Geplante Ausrichtung funktioniert nicht für gestreckte oder komprimierte Unteransichtsgrößen, da der Basisplan auf die falsche Position berechnet wird. Stellen Sie für die Geplante Ausrichtung sicher, dass die Höhe der Unteransicht mit der Höhe der systeminternen Inhaltsansicht übereinstimmt.

Allgemeine Stapelansicht verwendet

Es gibt mehrere Layouttypen, die gut mit Stack View-Steuerelementen funktionieren. Laut Apple sind hier einige der häufigeren Verwendungen:

  • Definieren Sie die Größe entlang der Achse – Indem Sie beide Kanten entlang der Stapelansicht Axis und eines der angrenzenden Kanten anheften, um die Position festzulegen, wird die Stapelansicht entlang der Achse vergrößert, um den durch ihre Unteransichten definierten Raum anzupassen.
  • Definieren Sie die Position der Unteransicht – Indem Sie an benachbarte Ränder der Stapelansicht an die übergeordnete Ansicht anheften, wird die Stapelansicht in beiden Dimensionen vergrößert, damit sie Teilansichten enthält.
  • Definieren Sie die Größe und Position des Stapels – Indem Sie alle vier Kanten der Stapelansicht an die übergeordnete Ansicht anheften, ordnet die Stapelansicht die Unteransichten basierend auf dem in der Stapelansicht definierten Raum an.
  • Definieren Sie die Größe senkrecht zur Achse – Indem Sie beide Kanten senkrecht zu den Stapelansichten Axis und einer der Kanten entlang der Achse anheften, um die Position festzulegen, wird die Stapelansicht senkrecht zur Achse vergrößert, um den durch ihre Unteransichten definierten Raum anzupassen.

Verwalten der Darstellung

Dies UIStackView ist als nicht rendernde Containeransicht konzipiert und wird daher nicht wie andere Unterklassen auf UIViewden Canvas gezeichnet. Das Festlegen von Eigenschaften wie BackgroundColor oder Außerkraftsetzung DrawRect hat keinen visuellen Effekt.

Es gibt mehrere Eigenschaften, die steuern, wie eine Stapelansicht ihre Auflistung von Unteransichten anordnet:

  • Achse – Bestimmt, ob die Stapelansicht die Unteransichten horizontal oder vertikal anordnet.
  • Ausrichtung – Steuert, wie die Unteransichten in der Stapelansicht ausgerichtet werden.
  • Verteilung – Steuert, wie die Unteransichten innerhalb der Stapelansicht angepasst werden.
  • Abstand – Steuert den minimalen Abstand zwischen den einzelnen Unteransichten in der Stapelansicht.
  • Baseline Relative – If true, the vertical spacing of each subview will be derived from it's baseline.
  • Layoutränder relativ – Platziert die Unteransichten relativ zu den Standardlayouträndern.

In der Regel verwenden Sie eine Stapelansicht, um eine kleine Anzahl von Unteransichten anzuordnen. Komplexere Benutzeroberflächen können erstellt werden, indem sie eine oder mehrere Stapelansichten miteinander verschachteln (wie in der oben beschriebenen UIStackView-Schnellstartanleitung ).

Sie können die Darstellung der UIs weiter optimieren, indem Sie den Unteransichten zusätzliche Einschränkungen hinzufügen (z. B. um die Höhe oder Breite zu steuern). Es sollte jedoch darauf geachtet werden, dass konfliktesbedingte Einschränkungen nicht auf diejenigen einbezogen werden, die von der Stapelansicht selbst eingeführt wurden.

Verwalten der Konsistenz von angeordneten Ansichten und Unteransichten

Die Stapelansicht stellt sicher, dass ihre ArrangedSubviews Eigenschaft immer eine Teilmenge ihrer Subviews Eigenschaft ist, indem Sie die folgenden Regeln verwenden:

  • Wenn der ArrangedSubviews Auflistung eine Unteransicht hinzugefügt wird, wird sie automatisch der Subviews Auflistung hinzugefügt (es sei denn, sie ist bereits Teil dieser Auflistung).
  • Wenn eine Unteransicht aus der Subviews Auflistung entfernt wird (aus der Anzeige entfernt), wird sie auch aus der ArrangedSubviews Auflistung entfernt.
  • Wenn Sie eine Unteransicht aus der ArrangedSubviews Auflistung entfernen, wird sie nicht aus der Subviews Auflistung entfernt. Daher wird sie nicht mehr von der Stapelansicht angeordnet, wird aber weiterhin auf dem Bildschirm angezeigt.

Die ArrangedSubviews Auflistung ist immer eine Teilmenge der Subview Auflistung, die Reihenfolge der einzelnen Unteransichten innerhalb jeder Auflistung ist jedoch getrennt und wird durch Folgendes gesteuert:

  • Die Reihenfolge der Unteransichten innerhalb der ArrangedSubviews Auflistung bestimmt ihre Anzeigereihenfolge innerhalb des Stapels.
  • Die Reihenfolge der Unteransichten innerhalb der Subview Auflistung bestimmt ihre Z-Reihenfolge (oder Schichtung) innerhalb der Ansicht zurück nach vorne.

Dynamisches Ändern von Inhalten

Eine Stapelansicht passt das Layout der Unteransichten automatisch an, wenn eine Unteransicht hinzugefügt, entfernt oder ausgeblendet wird. Das Layout wird auch angepasst, wenn eine Eigenschaft der Stapelansicht angepasst wird (z. B. deren Axis).

Layoutänderungen können animiert werden, indem sie in einem Animationsblock platziert werden, z. B.:

// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    RatingView.LayoutIfNeeded();
});

Viele der Eigenschaften der Stapelansicht können mithilfe von Größenklassen in einem Storyboard angegeben werden. Diese Eigenschaften werden automatisch animiert und reagieren auf Größen- oder Ausrichtungsänderungen.

Zusammenfassung

In diesem Artikel wurde das neue UIStackView Steuerelement (für iOS 9) behandelt, um eine Reihe von Unteransichten in einem horizontalen oder vertikal angeordneten Stapel in einer Xamarin.iOS-App zu verwalten. Es begann mit einem einfachen Beispiel für die Verwendung von Stapelansichten zum Erstellen einer Benutzeroberfläche und wurde mit einem detaillierteren Blick auf Stack Views und deren Eigenschaften und Features fertig gestellt.