Share via

Creazione di oggetti interfaccia utente in Xamarin.iOS

  • Articolo

Apple raggruppa parti di funzionalità correlate in "framework" che equivalgono agli spazi dei nomi Xamarin.iOS. UIKit è lo spazio dei nomi che contiene tutti i controlli dell'interfaccia utente per iOS.

Ogni volta che il codice deve fare riferimento a un controllo dell'interfaccia utente, ad esempio un'etichetta o un pulsante, ricordarsi di includere l'istruzione using seguente:

using UIKit;

Tutti i controlli descritti in questo capitolo si trovano nello spazio dei nomi UIKit e ogni nome della classe di controllo utente ha il UI prefisso .

È possibile modificare i controlli e i layout dell'interfaccia utente in tre modi:

  • Progettazione Xamarin iOS : usare la finestra di progettazione layout predefinita di Xamarin per progettare schermate. Fare doppio clic su storyboard o file XIB da modificare con la finestra di progettazione predefinita.
  • Xcode Interface Builder : trascinare i controlli nei layout dello schermo con Interface Builder. Aprire lo storyboard o il file XIB in Xcode facendo clic con il pulsante destro del mouse sul file nel riquadro della soluzione e scegliendo Apri con > Xcode Interface Builder.
  • Usando C# - I controlli possono anche essere costruiti a livello di codice con codice e aggiunti alla gerarchia di visualizzazione.

È possibile aggiungere nuovi file Storyboard e XIB facendo clic con il pulsante destro del mouse su un progetto iOS e scegliendo Aggiungi > nuovo file....

Indipendentemente dal metodo usato, le proprietà dei controlli e gli eventi possono comunque essere modificati con C# nella logica dell'applicazione.

Uso di Xamarin iOS Designer

Per iniziare a creare l'interfaccia utente in iOS Designer, fare doppio clic su un file storyboard. I controlli possono essere trascinati nell'area di progettazione dalla casella degli strumenti , come illustrato di seguito:

Quando un controllo viene selezionato nell'area di progettazione, il riquadro proprietà mostrerà gli attributi per tale controllo. Il campo Nome identità > widget>, popolato nello screenshot seguente, viene usato come nome dell'outlet. Questo è il modo in cui è possibile fare riferimento al controllo in C#:

Riquadro widget proprietà

Per un approfondimento sull'uso della finestra di progettazione iOS, vedere la guida Introduzione alla finestra di progettazione iOS .

Uso di Xcode Interface Builder

Se non si ha familiarità con l'uso di Interface Builder, vedere i documenti di Interface Builder di Apple.

Per aprire uno Storyboard in Xcode, fare clic con il pulsante destro del mouse per accedere al menu di scelta rapida per il file storyboard e scegliere di aprire con Xcode Interface Builder:

I controlli possono essere trascinati nell'area di progettazione dalla libreria di oggetti illustrata di seguito:

Libreria di oggetti Xcode

Quando si progetta l'interfaccia utente con Interface Builder, è necessario creare un outlet per ogni controllo a cui si vuole fare riferimento in C#. Questa operazione viene eseguita attivando l'Editorassistente usando il pulsante Editor centrale sul pulsante della barra degli strumenti Xcode:

Pulsante Editor assistente

Fare clic su un oggetto interfaccia utente; quindi trascinare il controllo nel file .h. Per controllare Trascina, tenere premuto il tasto di controllo, quindi fare clic e tenere premuto l'oggetto interfaccia utente per cui si sta creando l'uscita (o l'azione). Tenere premuto il tasto di controllo mentre si trascina nel file di intestazione. Completare il trascinamento sotto la @interface definizione. Dovrebbe essere visualizzata una linea blu con un didascalia Inserisci outlet o Outlet Collection, come illustrato nello screenshot seguente.

Quando si rilascia il clic verrà richiesto di specificare un nome per l'Outlet, che verrà usato per creare una proprietà C# a cui è possibile fare riferimento nel codice:

Creazione di un punto di uscita

Per altre informazioni sull'integrazione di Interface Builder di Xcode con Visual Studio per Mac, vedere il documento Generazione di codice Xib.

Uso di C#

Se si decide di creare un oggetto interfaccia utente a livello di codice usando C# (ad esempio, in una visualizzazione o in un controller di visualizzazione), seguire questa procedura:

  • Dichiarare un campo a livello di classe per l'oggetto interfaccia utente. Creare il controllo stesso una sola volta, ViewDidLoad ad esempio. È quindi possibile fare riferimento all'oggetto in tutti i metodi del ciclo di vita del controller di visualizzazione , ad esempio ViewWillAppear.
  • Creare un oggetto CGRect che definisce la cornice del controllo (le relative coordinate X e Y sullo schermo, nonché la larghezza e l'altezza). È necessario assicurarsi di disporre di una using CoreGraphics direttiva per questa operazione.
  • Chiamare il costruttore per creare e assegnare il controllo.
  • Impostare eventuali proprietà o gestori eventi.
  • Chiamare Add() per aggiungere il controllo alla gerarchia di visualizzazione.

Di seguito è riportato un semplice esempio di creazione di in UILabel un controller di visualizzazione con 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);
}

Uso di C# e storyboard

Quando i controller di visualizzazione vengono aggiunti all'area di progettazione, nel progetto vengono creati due file C# corrispondenti. In questo esempio ControlsViewController.cs e ControlsViewController.designer.cs sono stati creati automaticamente:

Classe parziale ViewController

Il ControlsViewController.cs file è destinato al codice. In questo caso vengono implementati i metodi del View ciclo di vita, ViewDidLoad ad esempio e ViewWillAppear , in cui è possibile aggiungere proprietà, campi e metodi personalizzati.

Il ControlsViewController.designer.cs codice viene generato contenente una classe parziale. Quando si assegna un nome a un controllo nell'area di progettazione in Visual Studio per Mac o si crea un outlet o un'azione in Xcode, una proprietà corrispondente o un metodo parziale, viene aggiunto al file di progettazione (designer.cs). Il codice seguente mostra un esempio di codice generato per due pulsanti e una visualizzazione testo, in cui uno dei pulsanti ha anche un TouchUpInside evento.

Questi elementi della classe parziale consentono al codice di fare riferimento ai controlli e rispondere alle azioni dichiarate nell'area di progettazione:

[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;
            }
        }
    }
}

Il designer.cs file non deve essere modificato manualmente. L'IDE (Visual Studio per Mac o Visual Studio) è responsabile della sincronizzazione con lo Storyboard.

Quando gli oggetti dell'interfaccia utente vengono aggiunti a livello di codice a un View oggetto o ViewController, si crea un'istanza e si gestiscono manualmente i riferimenti all'oggetto e pertanto non è necessario alcun file di progettazione.