Registerkartenleisten und Registerkartenleistencontroller in Xamarin.iOS

Registerkartenanwendungen werden in iOS verwendet, um Benutzeroberflächen zu unterstützen, auf die in keiner bestimmten Reihenfolge auf mehrere Bildschirme zugegriffen werden kann. Über die UITabBarController Klasse können Anwendungen problemlos Unterstützung für solche Multiscreen-Szenarien enthalten. UITabBarController kümmert sich um die Verwaltung mit mehreren Bildschirmen, sodass sich der Anwendungsentwickler auf die Details der einzelnen Bildschirme konzentrieren kann.

In der Regel werden Anwendungen mit Registerkartenformat erstellt, wobei es sich UITabBarController um das RootViewController Hauptfenster handelt. Mit etwas zusätzlichem Code können Anwendungen im Registerkartenformat jedoch auch nacheinander zu einem anderen Anfangsbildschirm verwendet werden, z. B. das Szenario, in dem eine Anwendung zuerst einen Anmeldebildschirm darstellt, gefolgt von der Registerkartenbenutzeroberfläche.

Auf dieser Seite werden beide Szenarien erläutert: Wenn sich die Registerkarten im Stammverzeichnis der Anwendungsansichtshierarchie und auch im Szenario befinden, das nichtRootViewController der Fall ist.

Einführung in UITabBarController

Dies UITabBarController unterstützt die Entwicklung von Registerkartenanwendungen wie folgt:

Zulassen, dass mehrere Controller hinzugefügt werden.
Bereitstellen einer Benutzeroberfläche mit Registerkarten über die UITabBar Klasse, damit ein Benutzer zwischen Controllern und seinen Ansichten wechseln kann.

Controller werden über ihre UITabBarController ViewControllers Eigenschaft, die ein UIViewController Array ist, hinzugefügt. Der UITabBarController selbst behandelt das Laden des richtigen Controllers und die Darstellung seiner Ansicht basierend auf der ausgewählten Registerkarte.

Die Registerkarten sind Instanzen der UITabBarItem Klasse, die in einer UITabBar Instanz enthalten sind. Auf jede UITabBar Instanz kann über die TabBarItem Eigenschaft des Controllers auf jeder Registerkarte zugegriffen werden.

Um ein Verständnis für die Arbeit mit dem UITabBarController, lassen Sie uns durch die Erstellung einer einfachen Anwendung gehen, die eine verwendet.

Exemplarische Vorgehensweise für Die Anwendung mit Registerkarten

Für diese exemplarische Vorgehensweise erstellen wir die folgende Anwendung:

Obwohl in Visual Studio für Mac bereits eine Anwendungsvorlage mit Registerkarten verfügbar ist, funktionieren diese Anweisungen aus einem leeren Projekt, um ein besseres Verständnis der Konstruktion der Anwendung zu erhalten.

Erstellen der Anwendung

Erstellen Sie zunächst eine neue Anwendung.

Wählen Sie das Menüelement "Neue > Projektmappe speichern>" in Visual Studio für Mac aus, und wählen Sie eine leere iOS-App-Projektvorlage > > aus, nennen Sie das ProjektTabbedApplication, wie unten gezeigt:

Hinzufügen des UITabBarController

Fügen Sie als Nächstes eine leere Klasse hinzu, indem Sie "Neue > Datei" auswählen und die Vorlage "Allgemein: Leere Klasse" auswählen. Benennen Sie die Datei TabController wie unten dargestellt:

Die TabController Klasse enthält die Implementierung der UITabBarController , die ein Array von UIViewControllersverwaltet. Wenn der Benutzer eine Registerkarte auswählt, kümmert sich der Benutzer um die UITabBarController Darstellung der Ansicht für den entsprechenden Ansichtscontroller.

Um die UITabBarController folgenden Schritte zu implementieren:

Legen Sie die Basisklasse von TabController auf UITabBarController .
Erstellen Von UIViewController Instanzen, die TabController dem Hinzugefügt werden sollen.
Fügen Sie die UIViewController Instanzen zu einem Array hinzu, das der ViewControllers Eigenschaft der .TabController

Fügen Sie der TabController Klasse den folgenden Code hinzu, um die folgenden Schritte auszuführen:

using System;
using UIKit;

namespace TabbedApplication {
    public class TabController : UITabBarController {

        UIViewController tab1, tab2, tab3;

        public TabController ()
        {
            tab1 = new UIViewController();
            tab1.Title = "Green";
            tab1.View.BackgroundColor = UIColor.Green;

            tab2 = new UIViewController();
            tab2.Title = "Orange";
            tab2.View.BackgroundColor = UIColor.Orange;

            tab3 = new UIViewController();
            tab3.Title = "Red";
            tab3.View.BackgroundColor = UIColor.Red;

            var tabs = new UIViewController[] {
                tab1, tab2, tab3
            };

            ViewControllers = tabs;
        }
    }
}

Beachten Sie, dass für jede UIViewController Instanz die Title Eigenschaft der UIViewController. Wenn die Controller dem UITabBarControllerController hinzugefügt werden, liest dies UITabBarController für Title jeden Controller und zeigt sie auf der Beschriftung der zugeordneten Registerkarte wie unten dargestellt an:

Festlegen des TabControllers als RootViewController

Die Reihenfolge, in der die Controller auf den Registerkarten platziert werden, entspricht der Reihenfolge, in der sie dem ViewControllers Array hinzugefügt werden.

Damit das UITabController Fenster als erster Bildschirm geladen werden kann, müssen wir es wie im folgenden Code für das AppDelegateFenster RootViewControllerdargestellt machen:

[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    UIWindow window;
    TabController tabController;

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        window = new UIWindow (UIScreen.MainScreen.Bounds);

        tabController = new TabController ();
        window.RootViewController = tabController;

        window.MakeKeyAndVisible ();

        return true;
    }
}

Wenn wir die Anwendung jetzt ausführen, wird die UITabBarController Anwendung standardmäßig geladen, wobei die erste Registerkarte standardmäßig ausgewählt ist. Wenn Sie eine der anderen Registerkarten auswählen, wird die Ansicht des zugeordneten Controllers wie UITabBarController, unten dargestellt angezeigt, in der der Endbenutzer die zweite Registerkarte ausgewählt hat:

Die zweite angezeigte Registerkarte

Ändern von TabBarItems

Nachdem wir nun über eine laufende Registerkartenanwendung verfügen, ändern wir das TabBarItem Bild und den text, der angezeigt wird, sowie das Hinzufügen eines Badges zu einer der Registerkarten.

Festlegen eines Systemelements

Als Erstes legen wir die erste Registerkarte so fest, dass ein Systemelement verwendet wird. Entfernen Sie im Konstruktor des TabControllerControllers die Zeile, die die Controller Title für die tab1 Instanz festlegt, und ersetzen Sie sie durch den folgenden Code, um die Eigenschaft des TabBarItem Controllers festzulegen:

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0);

Beim Erstellen einer UITabBarItem App UITabBarSystemItemwerden der Titel und das Bild automatisch von iOS bereitgestellt, wie im folgenden Screenshot mit dem Symbol " Favoriten" und "Titel" auf der ersten Registerkarte gezeigt:

Die erste Registerkarte mit einem Sternsymbol

Festlegen des Bilds

Neben der Verwendung eines Systemelements kann der Titel und das Bild eines Elements UITabBarItem auf benutzerdefinierte Werte festgelegt werden. Ändern Sie beispielsweise den Code, der die TabBarItem Eigenschaft des Controllers tab2 wie folgt festlegt:

tab2 = new UIViewController ();
tab2.TabBarItem = new UITabBarItem ();
tab2.TabBarItem.Image = UIImage.FromFile ("second.png");
tab2.TabBarItem.Title = "Second";
tab2.View.BackgroundColor = UIColor.Orange;

Im obigen Code wird davon ausgegangen, dass dem Stammverzeichnis des Projekts (oder einem Ressourcenverzeichnis) ein Bild mit dem Namen second.png hinzugefügt wurde. Um alle Bildschirmdichten zu unterstützen, benötigen Sie drei Bilder, wie unten dargestellt:

Die dem Projekt hinzugefügten Bilder

Die empfohlene Größe variiert je nach Formatvorlage des Bilds (kreisförmig, quadratisch, breit oder hoch).

Die Image Eigenschaft muss nur auf den second.png Dateinamen festgelegt werden, iOS lädt bei Bedarf automatisch die Dateien mit höherer Auflösung. Weitere Informationen hierzu finden Sie in den Leitfäden zum Arbeiten mit Bildern . Standardmäßig sind Tabstoppleistenelemente grau, wobei ein blauer Farbton ausgewählt ist.

Überschreiben des Titels

Wenn die Title Eigenschaft direkt auf der TabBarItemEigenschaft festgelegt wird, überschreibt sie alle Werte, die für Title den Controller selbst festgelegt werden.

Die zweite (mittlere) Registerkarte in diesem Screenshot zeigt einen benutzerdefinierten Titel und ein benutzerdefiniertes Bild:

Die zweite Registerkarte mit einem quadratischen Symbol

Festlegen des Signalwerts

Eine Registerkarte kann auch ein Signal anzeigen. Fügen Sie beispielsweise die folgende Codezeile hinzu, um ein Signal auf der dritten Registerkarte festzulegen:

tab3.TabBarItem.BadgeValue = "Hi";

Wenn Sie dies ausführen, wird eine rote Beschriftung mit der Zeichenfolge "Hi" in der oberen linken Ecke der Registerkarte wie unten dargestellt angezeigt:

Das Signal wird häufig verwendet, um eine Nummernanzeige ungelesene, neue Elemente anzuzeigen. Um das Signal zu entfernen, legen Sie den BadgeValue Wert wie unten dargestellt auf NULL fest:

tab3.TabBarItem.BadgeValue = null;

Registerkarten in Nicht-RootViewController-Szenarien

Im obigen Beispiel haben wir gezeigt, wie Sie mit einem UITabBarController Zeitpunkt arbeiten, an dem es sich um das RootViewController Fenster handelt. In diesem Beispiel werden wir untersuchen, wie sie verwendet UITabBarController werden, wenn dies nicht der RootViewController Fall ist, und zeigen, wie dies erstellt wird Storyboards.

Beispiel für den Anfangsbildschirm

In diesem Szenario wird der anfängliche Bildschirm von einem Controller geladen, der keine UITabBarController. Wenn der Benutzer mit dem Bildschirm interagiert, indem er auf eine Schaltfläche tippt, wird derselbe Ansichtscontroller in einen UITabBarControllergeladen, der dem Benutzer dann angezeigt wird. Der folgende Screenshot zeigt den Anwendungsfluss:

Beginnen wir nun eine neue Anwendung für dieses Beispiel. Auch hier verwenden wir die Vorlage "iPhone > App > Empty Project (C#)" , diesmal wird das Projekt InitialScreenDemobenannt.

In diesem Beispiel wird ein Storyboard zum Layout von Ansichtscontrollern verwendet. So fügen Sie ein Storyboard hinzu:

Klicken Sie mit der rechten Maustaste auf den Projektnamen, und wählen Sie "Neue Datei hinzufügen" > aus.
Wenn das Dialogfeld "Neue Datei" angezeigt wird, navigieren Sie zu "iOS > Leeres iPhone Storyboard".

Nennen wir dieses neue Storyboard MainStoryboard , wie unten dargestellt:

Beim Hinzufügen eines Storyboards zu einer zuvor nicht-Storyboard-Datei, die im Handbuch "Einführung in Storyboards " behandelt wird, müssen Sie einige wichtige Schritte beachten. Dies sind:

Fügen Sie ihren Storyboardnamen zum Abschnitt "Hauptschnittstelle " der Folgenden Info.plisthinzu:
Überschreiben Sie in Der App DelegateWindow-Methode die Window-Methode mit dem folgenden Code:
```
public override UIWindow Window {
    get;
    set;
}
```

Für dieses Beispiel benötigen wir drei Ansichtscontroller. Eine, benannte ViewController1, wird als "Anfänglicher Ansichtscontroller" und auf der ersten Registerkarte verwendet. Die beiden anderen, benannten ViewController2 und ViewController3, die jeweils in den zweiten und dritten Registerkarten verwendet werden.

Öffnen Sie den Designer, indem Sie auf die Datei "MainStoryboard.storyboard" doppelklicken und drei Ansichtscontroller auf die Entwurfsoberfläche ziehen. Wir möchten, dass jeder dieser Ansichtscontroller eine eigene Klasse hat, die dem obigen Namen entspricht. Geben Sie also unter "Identitätsklasse>" ihren Namen ein, wie im folgenden Screenshot dargestellt:

Visual Studio für Mac automatisch die benötigten Klassen und Designerdateien generieren, kann dies auf dem Lösungspad angezeigt werden, wie unten dargestellt:

Erstellen der Benutzeroberfläche

Als Nächstes erstellen wir eine einfache Benutzeroberfläche für jede Ansicht des ViewControllers mit dem Xamarin iOS-Designer.

Wir möchten ein Label und ein Button Shape auf ViewController1 aus dem ToolBox-Steuerelement auf der rechten Seite ziehen. Als Nächstes verwenden wir das Eigenschaftenpad, um den Namen und den Text der Steuerelemente wie folgt zu bearbeiten:

Beschriftung : Text = Eine
Schaltfläche : Title = Der Benutzer führt eine anfängliche Aktion aus.

Wir werden die Sichtbarkeit unserer Schaltfläche in einem TouchUpInside Ereignis steuern und im CodeBehind darauf verweisen müssen. Lassen Sie uns ihn mit dem Namen aButton im Eigenschaftenkreuz identifizieren, wie im folgenden Screenshot dargestellt:

Ihr Design Surface sollte nun ähnlich wie der folgende Screenshot aussehen:

Fügen wir nun ein bisschen mehr Details hinzu ViewController2 ViewController3, indem wir jeweils eine Beschriftung hinzufügen und den Text in "Zwei" bzw. "Drei" ändern. Dies hebt den Benutzer hervor, welche Registerkarte/Ansicht wir betrachten.

Verkabeln der Schaltfläche

Wenn die Anwendung zum ersten Mal gestartet wird, wird geladen ViewController1 . Wenn der Benutzer auf die Schaltfläche tippt, blenden wir die Schaltfläche aus und laden eine UITabBarController mit der Instanz auf der ViewController1 ersten Registerkarte.

Wenn der Benutzer das aButtonEreignis loslässt, soll ein TouchUpInside-Ereignis ausgelöst werden. Wählen wir die Schaltfläche aus, und deklarieren Sie auf der Registerkarte "Ereignisse" des Eigenschaftenpads den Ereignishandler – InitialActionCompleted sodass er im Code referenzieren kann. Dies wird im folgenden Screenshot veranschaulicht:

Der Ansichtscontroller muss nun angewiesen werden, die Schaltfläche auszublenden, wenn das Ereignis ausgelöst wird InitialActionCompleted. Fügen ViewController1Sie in , fügen Sie die folgende partielle Methode hinzu:

partial void InitialActionCompleted (UIButton sender)
{
    aButton.Hidden = true;  
}

Speichern Sie die Datei, und führen Sie die Anwendung aus. Bildschirm 1 sollte angezeigt werden, und die Schaltfläche wird bei Touch Up ausgeblendet.

Hinzufügen des Registerkartenleistencontrollers

Wir haben jetzt unsere Ursprüngliche Ansicht wie erwartet funktioniert. Als Nächstes möchten wir es zu einem UITabBarController, zusammen mit Views 2 und 3 hinzufügen. Lassen Sie uns das Storyboard im Designer öffnen.

Suchen Sie in der Toolbox unter "Controller & Objekte" nach dem Registerkartenleistencontroller , und ziehen Sie ihn auf die Entwurfsoberfläche. Wie Sie im folgenden Screenshot sehen können, ist der Registerkartenleistencontroller UI-weniger und bringt daher standardmäßig zwei Ansichtscontroller mit sich:

Löschen Sie diese neuen Ansichtscontroller, indem Sie die schwarze Leiste unten auswählen und ENTF drücken.

In unserem Storyboard können wir Segues verwenden, um die Übergänge zwischen dem TabBarController und unseren Ansichtscontrollern zu behandeln. Nach der Interaktion mit der Anfänglichen Ansicht möchten wir sie in den TabBarController laden, der dem Benutzer angezeigt wird. Lassen Sie uns dies im Designer einrichten.

Strg-Klicken und Ziehen von der Schaltfläche auf den TabBarController. Bei der Maus wird ein Kontextmenü angezeigt. Wir wollen einen modalen Segue verwenden.

Um jede unserer Registerkarten einzurichten, klicken Sie mit STRG von tabBarController auf jeden unserer Ansichtscontroller in der Reihenfolge von 1 bis drei, und wählen Sie die Registerkarte "Beziehung " im Kontextmenü aus, wie unten dargestellt:

Ihr Storyboard sollte dem folgenden Screenshot ähneln:

Wenn wir auf eines der Registerkartenleistenelemente klicken und den Eigenschaftenbereich erkunden, können Sie eine Reihe verschiedener Optionen sehen, wie unten dargestellt:

Wir können dies verwenden, um bestimmte Attribute wie das Signal, den Titel und den iOS-Bezeichner unter anderem zu bearbeiten.

Wenn wir die Anwendung jetzt speichern und ausführen, werden wir feststellen, dass die Schaltfläche wieder angezeigt wird, wenn die ViewController1-Instanz in den TabBarControllerController geladen wird. Lassen Sie uns dies beheben, indem Sie überprüfen, ob die aktuelle Ansicht über einen übergeordneten Ansichtscontroller verfügt. Wenn dies der Fall ist, wissen wir, dass wir uns innerhalb des TabBarController befinden, und daher sollte die Schaltfläche ausgeblendet werden. Fügen wir den folgenden Code zur ViewController1-Klasse hinzu:

public override void ViewDidLoad ()
{
    if (ParentViewController != null){
        aButton.Hidden = true;
    }
}

Wenn die Anwendung ausgeführt wird und der Benutzer auf die Schaltfläche auf dem ersten Bildschirm tippt, wird der UITabBarController geladen, wobei die Ansicht vom ersten Bildschirm auf der ersten Registerkarte platziert wird, wie unten dargestellt:

Zusammenfassung

In diesem Artikel wird beschrieben, wie Sie eine UITabBarController Anwendung verwenden. Wir haben erläutert, wie Controller in die einzelnen Registerkarten geladen werden und wie Eigenschaften auf Registerkarten wie Titel, Bild und Signal festgelegt werden. Anschließend haben wir anhand von Storyboards untersucht, wie sie zur Laufzeit geladen UITabBarController werden, wenn es sich nicht um das RootViewController Fenster handelt.

Last updated on 2017-03-21

Freigeben über