Erstellen von Benutzeroberflächenobjekten in Xamarin.iOS

  • Artikel

Apple gruppiert verwandte Funktionen in "Frameworks", die Xamarin.iOS-Namespaces entsprechen. UIKit ist der Namespace, der alle Benutzeroberflächensteuerelemente für iOS enthält.

Wenn Ihr Code auf ein Benutzeroberflächensteuerelement, z. B. eine Bezeichnung oder Schaltfläche, verweisen muss, sollten Sie die folgende using-Anweisung einschließen:

using UIKit;

Alle in diesem Kapitel erläuterten Steuerelemente befinden sich im UIKit-Namespace, und jeder Benutzersteuerelementklassenname hat das UI Präfix.

Sie können Ui-Steuerelemente und Layouts auf drei Arten bearbeiten:

  • Xamarin iOS Designer: Verwenden Sie den integrierten Layout-Designer von Xamarin, um Bildschirme zu entwerfen. Doppelklicken Sie auf Storyboard- oder XIB-Dateien, um sie mit dem integrierten Designer zu bearbeiten.
  • Xcode Interface Builder – Ziehen Sie Steuerelemente mit Interface Builder auf Ihre Bildschirmlayouts. Öffnen Sie das Storyboard oder die XIB-Datei in Xcode, indem Sie im Projektmappenpad mit der rechten Maustaste auf die Datei klicken und Mit > Xcode Interface Builder öffnen auswählen.
  • Verwenden von C# – Steuerelemente können auch programmgesteuert mit Code erstellt und der Ansichtshierarchie hinzugefügt werden.

Neue Storyboard- und XIB-Dateien können hinzugefügt werden, indem Sie mit der rechten Maustaste auf ein iOS-Projekt klicken und Neue Datei hinzufügen > ... auswählen.

Unabhängig davon, welche Methode Sie verwenden, können Eigenschaften und Ereignisse weiterhin mit C# in Ihrer Anwendungslogik bearbeitet werden.

Verwenden von Xamarin iOS-Designer

Doppelklicken Sie auf eine Storyboarddatei, um mit dem Erstellen Ihrer Benutzeroberfläche im iOS-Designer zu beginnen. Steuerelemente können wie unten dargestellt aus der Toolbox auf die Entwurfsoberfläche gezogen werden:

Wenn auf der Entwurfsoberfläche ein Steuerelement ausgewählt ist, zeigt das Eigenschaftenpad die Attribute für dieses Steuerelement an. Das Feld Widgetidentitätsname >>, das im folgenden Screenshot aufgefüllt wird, wird als Outletname verwendet. So können Sie auf das Steuerelement in C# verweisen:

Eigenschaften-Widgetpad

Weitere Informationen zur Verwendung des iOS-Designers finden Sie im Leitfaden Einführung in die iOS-Designer.

Verwenden des Xcode-Schnittstellen-Generators

Wenn Sie mit der Verwendung von Interface Builder nicht vertraut sind, lesen Sie die Interface Builder-Dokumente von Apple.

Um ein Storyboard in Xcode zu öffnen, klicken Sie mit der rechten Maustaste, um auf das Kontextmenü für die Storyboarddatei zuzugreifen, und wählen Sie aus, um mit dem Xcode Interface Builder zu öffnen:

Steuerelemente können aus der unten dargestellten Objektbibliothek auf die Entwurfsoberfläche gezogen werden:

Xcode-Objektbibliothek

Wenn Sie Ihre Benutzeroberfläche mit Interface Builder entwerfen, müssen Sie für jedes Steuerelement, auf das Sie in C# verweisen möchten, ein Outlet erstellen. Dies geschieht, indem Sie den Assistenten-Editor mithilfe der mittleren Editor-Schaltfläche auf der Xcode-Symbolleistenschaltfläche aktivieren:

Schaltfläche

Klicken Sie auf ein Benutzeroberflächenobjekt. dann strg Ziehen Sie in die H-Datei. Halten Sie zum Ziehen steuern die Taste gedrückt, klicken Sie dann auf das Benutzeroberflächenobjekt, für das Sie die Steckdose (oder Aktion) erstellen, und halten Sie es gedrückt. Halten Sie die STRG-TASTE gedrückt, während Sie in die Headerdatei ziehen. Beenden Sie das Ziehen unter die @interface Definition. Eine blaue Linie sollte mit einem Untertitel Outlet oder Outlet Collection einfügen angezeigt werden, wie im folgenden Screenshot dargestellt.

Wenn Sie den Klick loslassen, werden Sie aufgefordert, einen Namen für das Outlet anzugeben, mit dem eine C#-Eigenschaft erstellt wird, auf die im Code verwiesen werden kann:

Erstellen einer Steckdose

Weitere Informationen zur Integration von Xcode Interface Builder in Visual Studio für Mac finden Sie im Dokument zur Xib-Codegenerierung.

Verwenden von C#

Wenn Sie sich entscheiden, ein Benutzeroberflächenobjekt programmgesteuert mit C# zu erstellen (z. B. in einem Ansichts- oder Ansichtscontroller), führen Sie die folgenden Schritte aus:

  • Deklarieren Sie ein Feld auf Klassenebene für das Benutzeroberflächenobjekt. Erstellen Sie das Steuerelement selbst einmal, z. B. in ViewDidLoad . Auf das Objekt kann dann während der gesamten Lebenszyklusmethoden des Ansichtscontrollers verwiesen werden (z. B. ViewWillAppear).
  • Erstellen Sie einen CGRect , der den Rahmen des Steuerelements (seine X- und Y-Koordinaten auf dem Bildschirm sowie seine Breite und Höhe) definiert. Sie müssen sicherstellen, dass Sie über eine using CoreGraphics -Direktive verfügen.
  • Rufen Sie den Konstruktor auf, um das Steuerelement zu erstellen und zuzuweisen.
  • Legen Sie alle Eigenschaften oder Ereignishandler fest.
  • Rufen Sie auf Add() , um das Steuerelement der Ansichtshierarchie hinzuzufügen.

Hier sehen Sie ein einfaches Beispiel für das Erstellen eines UILabel in einem Ansichtscontroller mit C#:

UILabel label1;
public override void ViewDidLoad () {
    base.ViewDidLoad ();
    var frame = new CGRect(10, 10, 300, 30);
    label1 = new UILabel(frame);
    label1.Text = "New Label";
    View.Add (label1);
}

Verwenden von C# und Storyboards

Wenn Ansichtscontroller zur Entwurfsoberfläche hinzugefügt werden, werden zwei entsprechende C#-Dateien im Projekt erstellt. In diesem Beispiel ControlsViewController.csControlsViewController.designer.cs und wurden automatisch erstellt:

Partielle ViewController-Klasse

Die ControlsViewController.cs Datei ist für Ihren Code vorgesehen. Hier werden die View Lebenszyklusmethoden wie ViewDidLoad und ViewWillAppear implementiert, und Sie können eigene Eigenschaften, Felder und Methoden hinzufügen.

Wird ControlsViewController.designer.cs Code generiert, der eine partielle Klasse enthält. Wenn Sie ein Steuerelement auf der Entwurfsoberfläche in Visual Studio für Mac benennen oder ein Outlet oder eine Aktion in Xcode erstellen, wird der Designerdatei (designer.cs) eine entsprechende Eigenschaft oder partielle Methode hinzugefügt. Der folgende Code zeigt ein Beispiel für Code, der für zwei Schaltflächen und eine Textansicht generiert wurde, wobei eine der Schaltflächen auch ein TouchUpInside -Ereignis aufweist.

Diese Elemente der partiellen Klasse ermöglichen es Ihrem Code, auf die Steuerelemente zu verweisen und auf die Aktionen zu reagieren, die auf der Entwurfsoberfläche deklariert sind:

[Register ("ControlsViewController")]
    partial class ControlsViewController
    {
        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UIButton Button1 { get; set; }

        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UIButton Button2 { get; set; }

        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UITextField textfield1 { get; set; }

        [Action ("button2_TouchUpInside:")]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        partial void button2_TouchUpInside (UIButton sender);

        void ReleaseDesignerOutlets ()
        {
            if (Button1 != null) {
                Button1.Dispose ();
                Button1 = null;
            }
            if (Button2 != null) {
                Button2.Dispose ();
                Button2 = null;
            }
            if (textfield1 != null) {
                textfield1.Dispose ();
                textfield1 = null;
            }
        }
    }
}

Die designer.cs Datei sollte nicht manuell bearbeitet werden. Die IDE (Visual Studio für Mac oder Visual Studio) ist dafür verantwortlich, dass sie mit dem Storyboard synchronisiert wird.

Wenn Benutzeroberflächenobjekte programmgesteuert zu einem View oder ViewControllerhinzugefügt werden, instanziieren und verwalten Sie die Objektverweise selbst, sodass keine Designerdatei erforderlich ist.