Teilen über

Arbeiten mit tvOS Segmentierten Steuerelementen in Xamarin

  • Artikel

Ein segmentiertes Steuerelement bietet eine Reihe linearer Elemente, die jeweils ein Symbol oder Text enthalten können, und wird verwendet, um dem Benutzer eine Reihe verwandter Optionen bereitzustellen.

Beispielsegmentsteuerelemente

Apple hat die folgenden Vorschläge für die Arbeit mit segmentierten Steuerelementen:

  • Ausreichend Platz bereitstellen – Achten Sie darauf, ausreichend Platz zwischen anderen fokussierbaren Elementen und einem segmentierten Steuerelement bereitzustellen. Ein einzelnes Segment wird ausgewählt, wenn es im Fokus steht (nicht, wenn es angeklikt wird), und der Benutzer kann versehentlich Segmente ändern, wenn er tatsächlich ein anderes fokussierbares Element im aktuellen Segment auswählen möchte.
  • Verwenden Sie geteilte Ansichten für die Inhaltsfilterung – Segmentierte Steuerelemente treffen keine guten Entscheidungen für die Inhaltsfilterung, da geteilte Ansichten für die einfache Navigation zwischen dem Inhalt und den Filtern entwickelt wurden.
  • Limit to Seven Segments Max - You should try to keep the maximum number of segments below eight (8) as this is easier to parse from across the room on the couch and easier to navigate.
  • Konsistente Segmentinhaltsgröße verwenden – Alle Segmente weisen die gleiche Breite auf, und sie sollten nach Möglichkeit versuchen, den Inhalt in jedem Segment auf dieselbe Größe zu beschränken. Dies erleichtert nicht nur die Segmentsteuerelemente visuell ansprechender, sondern erleichtert das Lesen auf einen Blick.
  • Vermeiden Sie das Mischen von Symbolen und Text – Jedes einzelne Segment kann entweder ein Symbol oder Text enthalten, aber nicht beides. Es ist zwar möglich, sowohl Symbole als auch Text im selben segmentierten Steuerelement zu mischen, dies sollte jedoch vermieden werden.

Informationen zu Segmentsymbolen

Apple schlägt vor, einfache, erkennbare Bilder für Segmentsymbole zu verwenden, z. B. eine Lupe für die Suche. Übermäßig komplexe Symbole sind auf einem Fernsehbildschirm im gesamten Raum schwer zu erkennen, daher ist es am besten, Ihre Symbole auf einfache Darstellungen zu beschränken.

Es ist nicht möglich, sowohl Text als auch Symbole in einem bestimmten Segment zu mischen, und Sie sollten das Mischen von Symbolen und Text in einem einzelnen segmentierten Steuerelement vermeiden. Es sollte entweder alle Symbole oder der gesamte Text sein.

Segmenttext

Apple macht die folgenden Vorschläge für die Arbeit mit Segmenttext:

  • Verwenden Sie kurze, aussagekräftige Substantive – Der Abschnittstitel sollte eindeutig den Inhaltstyp angeben, den der Benutzer beim Auswählen des angegebenen Segments erwarten sollte. Beispiel: Musik oder Videos.
  • Verwenden Sie "Groß-/Kleinschreibung ": Jedes Wort des Titels "Segmente" sollte groß geschrieben werden, mit Ausnahme von Artikeln, Konjunktionen und Präpositionen von weniger als vier (4) Zeichen.
  • Verwenden Sie kurze, fokussierte Titel – Halten Sie die Titel kurz und konzentriert sich auf den Inhaltstyp, der beim Auswählen des Segments erwartet werden soll.

Auch hier können Sie nicht sowohl Text als auch Symbole in einem bestimmten Segment kombinieren, und Sie sollten das Mischen von Symbolen und Text in einem einzelnen segmentierten Steuerelement vermeiden.

Segmentsteuerelemente und Storyboards

Die einfachste Möglichkeit zum Arbeiten mit Segmentsteuerelementen in einer Xamarin.tvOS-App besteht darin, sie mithilfe des iOS-Designers zur Benutzeroberfläche der App hinzuzufügen.

  1. Doppelklicken Sie auf dem Lösungspad auf die Main.storyboard Datei, und öffnen Sie sie zur Bearbeitung.

  2. Ziehen Sie ein Segmentsteuerelement aus der Toolbox , und legen Sie es in der Ansicht ab:

    Segmentsteuerelement

  3. Auf der Registerkarte "Widget" des Eigenschaftenkreuzes können Sie verschiedene Eigenschaften des Segmentsteuerelements anpassen, z . B. formatieren und zustand:

    Die Registerkarte

  4. Verwenden Sie das Feld Segmente , um die Anzahl der Segmente im Controller zu steuern.

  5. Wählen Sie ein bestimmtes Segment aus der Segmentdropdownliste aus, um seine individuellen Eigenschaften wie Titel oder Bild anzupassen und zu steuern, ob ein bestimmtes Segment aktiviert oder ausgewählt ist, wenn das Steuerelement angezeigt wird.

  6. Weisen Sie schließlich den Steuerelementen Namen zu, damit Sie im C#-Code darauf reagieren können. Zum Beispiel:

    Zuweisen eines Namens

  7. Speichern Sie die Änderungen.

Weitere Informationen zum Arbeiten mit Storyboards finden Sie in unserem Schnellstarthandbuch für Hello, tvOS.

Arbeiten mit segmentierten Steuerelementen

Wie oben erwähnt, stellt s Segmented Control eine Reihe linearer Elemente bereit, die jeweils ein Symbol oder Text enthalten können, und wird verwendet, um dem Benutzer eine Reihe verwandter Optionen bereitzustellen.

Es gibt verschiedene Möglichkeiten, mit segmentierten Steuerelementen in Ihrer Xamarin.tvOS-App zu arbeiten.

Als Namen und Ereignisse verfügbar gemacht

Wenn Sie ihr Segmentsteuerelement im Schnittstellen-Designer erstellt und als benanntes Steuerelement und ein Ereignis verfügbar gemacht haben, können Sie den folgenden Code verwenden, um auf die Segmentänderung zu reagieren:

partial void PlayerCountChanged (Foundation.NSObject sender) {

    // Take action based on the number of players selected
    switch(PlayerCount.SelectedSegment) {
    case 0:
        // Do something if the segment is selected
        ...
        break;
    case 1:
        // Do something if the segment is selected
        ...
        break;
    case 2:
        // Do something if the segment is selected
        ...
        break;
    }
}

Im Fall des obigen Beispiels wurde das Segmentsteuerelement als PlayerCount Name und Ereignisaktion PlayerCountChanged verfügbar gemacht. Weitere Informationen zur Arbeit mit Aktionen und Outlets finden Sie im Abschnitt "Schreiben des Codes mit Verkaufsstellen und Aktionen " in unserem Schnellstarthandbuch "Hello, tvOS".

Die SelectedSegment Eigenschaft ruft das aktuell ausgewählte Segment als null (0) basierten Index ab oder legt es fest. Wenn Sie also fünf (5) Segmente haben, hat das erste Segment einen Index von Null (0) und den letzten Index von vier (4).

Segmente ändern

Sie können jederzeit sowohl die Nummer als auch den Inhalt der segmentierten Steuerelemente ändern. Verwenden Sie den folgenden Code, um ein neues Symbolsegment einzufügen:

// Icon Segment
SegmentedControl.InsertSegment(UIImage.FromFile("icon.png"), 0, true);

// Text Segment
SegmentedControl.InsertSegment("New Segment", 0, true);

Der zweite Parameter definiert, wo das Segment mit einem null (0) basierten Index eingefügt wird. Wenn der letzte Parameter die Einfügemarke ist true , wird sie animiert.

Um ein bestimmtes Segment zu entfernen, verwenden Sie Folgendes:

SegmentedControl.RemoveSegmentAtIndex(0, true);

Oder die folgenden, um alle Segmente zu entfernen:

SegmentedControl.RemoveAllSegments();

Wenn der letzte Parameter lautet true, wird die Entfernung animiert. Verwenden Sie die NumberOfSegments Eigenschaft, um die aktuelle Anzahl von Segmenten zurückzugeben.

Um den Titel oder das Symbol für ein bestimmtes Segment abzurufen, verwenden Sie Folgendes:

// Get title
var title = SegmentedControl.TitleAt(0);

// Get icon
var icon = SegmentedControl.ImageAt(0);

Um den Titel oder das Symbol zu ändern, verwenden Sie Folgendes:

// Set title
SegmentedControl.SetTitle("New Title", 0);

// Set icon
SegmentedControl.SetImage(UIImage.FromFile("icon.png"), 0);

Um festzustellen, ob ein bestimmtes Segment aktiviert ist, verwenden Sie Folgendes:

if (SegmentedControl.IsEnabled(0)) {
    // Do something
    ...
}

Wenn Sie ein bestimmtes Segment aktivieren/deaktivieren möchten, verwenden Sie Folgendes:

SegmentedControl.SetEnabled(false, 0);

Ändern der Darstellung des segmentierten Steuerelements

Sie können den folgenden Code verwenden, um den Hintergrund eines bestimmten Segments in ein Bild zu ändern:

SegmentedControl.SetBackgroundImage (UIImage.FromFile("background.png"), UIControlState.Normal, UIBarMetrics.Default);

Gibt UIControlState den Status des Steuerelements an, für das Sie das Bild wie folgt festlegen:

  • Normal
  • Hervorgehoben
  • Disabled
  • Aktiviert
  • Fokus

Und UIBarMetrics gibt die Metriken an, die verwendet werden sollen:

  • Standard
  • Kompakt
  • DefaultPrompt
  • CompactPrompt

Darüber hinaus können Sie die Trennlinie zwischen den Segmenten mithilfe von:

SegmentedControl.SetDividerImage (UIImage.FromFile("divider.png"), UIControlState.Normal, UIControlState.Normal, UIBarMetrics.Default);

Gibt an, wo der erste UIControlState den Zustand des Abschnitts links neben der Trennlinie angibt und der zweite UIControlState den Zustand des Abschnitts rechts angibt.

Zusammenfassung

Dieser Artikel befasst sich mit dem Entwerfen und Arbeiten mit segmentiertem Steuerelement innerhalb einer Xamarin.tvOS-App.