Hello, iOS - Guida introduttiva

  • Articolo

Avviso

IOS Designer è stato deprecato in Visual Studio 2019 versione 16.8 e Visual Studio 2019 per Mac versione 8.8 e rimosso in Visual Studio 2019 versione 16.9 e Visual Studio per Mac versione 8.9. Il modo consigliato per creare interfacce utente iOS è direttamente in un Mac che esegue Interface Builder di Xcode. Per altre informazioni, vedere Progettazione di interfacce utente con Xcode.

Questa guida descrive come creare un'applicazione che converte un numero di telefono alfanumerico immesso dall'utente in un numero di telefono numerico e lo chiama. L'applicazione finale ha l'aspetto seguente:

The Hello.iOS Quickstart app

Requisiti

Lo sviluppo di app iOS con Xamarin richiede:

  • Mac che esegue macOS High Sierra (10.13) o versione successiva.
  • La versione più recenti di Xcode e di iOS SDK installata da App Store.

Xamarin.iOS è compatibile con la configurazione seguente:

  • Versione più recente di Visual Studio per Mac con le specifiche indicate in precedenza.

Per istruzioni dettagliate sull'installazione, è disponibile la guida all'installazione di Xamarin.iOS in Mac

Xamarin.iOS è compatibile con la configurazione seguente:

  • Versione più recente di Visual Studio 2019 o Visual Studio 2017, Community, Professional o Enterprise in Windows 10, associato a un host di compilazione Mac con le specifiche indicate in precedenza.

Per istruzioni dettagliate sull'installazione, è disponibile la guida all'installazione di Xamarin.iOS in Windows.

Prima di iniziare, scaricare il set di icone per app Xamarin.

Procedura dettagliata per Visual Studio per Mac

Questa procedura dettagliata descrive come creare un'applicazione, Phoneword, che converte un numero di telefono alfanumerico in un numero di telefono numerico.

  1. Avviare Visual Studio per Mac dalla cartella Applicazioni o da Spotlight:

    The Launch screen

    Nella schermata di avvio fare clic su Nuovo progetto per creare una nuova soluzione Xamarin.iOS:

    iOS solution

  2. Nella finestra di dialogo Nuova soluzione scegliere il modello Applicazione > visualizzazione singola app iOS>, assicurandosi che sia selezionato C#. Fare clic su Avanti:

    Choose Single View Application

  3. Configurare l'app. Assegnarle il nomePhoneword_iOS e lasciare tutte le altre impostazioni predefinite. Fare clic su Avanti:

    Enter the app name

  4. Lasciare invariati i nomi del progetto e della soluzione. Scegliere il percorso del progetto o mantenere l'impostazione predefinita:

    Choose the location of the project

  5. Fare clic su Crea per creare la Soluzione.

  6. Aprire il file Main.storyboard facendo doppio clic su di esso nel riquadro della soluzione. Assicurarsi di aprire il file usando Visual Studio iOS Designer (fare clic con il pulsante destro del mouse sullo storyboard e scegliere Apri con > progettazione iOS). Ciò consente di creare un'interfaccia utente in modo visivo:

    The iOS Designer

    Si noti che le classi di dimensioni sono abilitate per impostazione predefinita. Per altre informazioni su di esse, fare riferimento alla guida Unified Storyboards (Storyboard unificati).

  7. Nel riquadro Casella degli strumenti digitare "etichetta" nella barra di ricerca e trascinare un elemento Etichetta nell'area di progettazione (l'area al centro):

    Drag a Label onto the design surface the area in the center

    Nota

    È possibile visualizzare il riquadro delle proprietà o la casella degli strumenti in qualsiasi momento passando a Visualizza > riquadri.

  8. Afferrare i punti di controllo dei controlli di trascinamento (i cerchi intorno al controllo) e ingrandire l'elemento:

    Make the label wider

  9. Dopo aver selezionato l'elemento Etichetta nell'area di progettazione, usare il riquadro delle proprietà per modificare la proprietà Testo dell'elemento Etichetta in "Enter a Phoneword:" (Immettere una Phoneword)

    Set the label to Enter a Phoneword

  10. Cercare "campo di testo" all'interno della casella degli strumenti e trascinare un Campo di testo dalla casella degli strumenti nell'area di progettazione e posizionarlo sotto l'elemento Etichetta. Regolare la larghezza in modo che il Campo di testo sia della stessa larghezza dell'Etichetta:

    Make the Text Field the same width as the Label

  11. Dopo aver selezionato il Campo di testo nell'area di progettazione, modificare la proprietà Nomedel Campo di testo nella sezione Identità del riquadro Proprietà in PhoneNumberText e modificare la proprietà Testo in "1-855-XAMARIN":

    Change the Title property to 1-855-XAMARIN

  12. Trascinare un oggetto Pulsante dalla casella degli strumenti all'area di progettazione e inserirlo sotto il widget Campo di testo. Regolare la larghezza in modo che il Pulsante sia largo come il Campo di testo e l'Etichetta:

    Adjust the width so the Button is as wide as the Text Field and Label

  13. Dopo aver selezionato il Pulsante nell'area di progettazione, modificare la proprietà Nome nella sezione Identità del riquadro delle proprietà in TranslateButton. Modificare la proprietà Titolo in "Translate" (Converti):

    Change the Title property to Translate

  14. Ripetere i due passaggi precedenti e trascinare un oggetto Pulsante dalla casella degli strumenti all'area di progettazione e inserirlo sotto il primo Pulsante. Regolare la larghezza in modo che il Pulsante sia largo come il primo Pulsante:

    Adjust the width so the Button is as wide as the first Button

  15. Dopo aver selezionato il secondo Pulsante nell'area di progettazione, modificare la proprietà Nome nella sezione Identità del riquadro delle proprietà in CallButton. Modificare la proprietà Titolo in "Call" (Chiama):

    Change the Title property to Call

    Salvare le modifiche passando a Salva file > o premendo ⌘ + s.

  16. È necessario aggiungere della logica all'app per convertire i numeri di telefono da alfanumerici a numerici. Aggiungere un nuovo file al progetto facendo clic con il pulsante destro del mouse sul Telefono word_iOS Progetto nel riquadro della soluzione e scegliendo Aggiungi > nuovo file... o premendo ⌘ + n:

    Add a new file to the Project

  17. Nella finestra di dialogo Nuovo file selezionare General Empty Class (Classe vuota generale>) e denominare il nuovo file PhoneTranslator:

    Select Empty Class and name the new file PhoneTranslator

  18. Viene creata una nuova classe C# vuota. Rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System.Text;
using System;

namespace Phoneword_iOS
{
    public static class PhoneTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw)) {
                return "";
            } else {
                raw = raw.ToUpperInvariant();
            }

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c)) {
                    newNumber.Append(c);
                } else {
                    var result = TranslateToNumber(c);
                    if (result != null) {
                        newNumber.Append(result);
                    }
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }

        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c)) {
                return 2;
            } else if ("DEF".Contains(c)) {
                return 3;
            } else if ("GHI".Contains(c)) {
                return 4;
            } else if ("JKL".Contains(c)) {
                return 5;
            } else if ("MNO".Contains(c)) {
                return 6;
            } else if ("PQRS".Contains(c)) {
                return 7;
            } else if ("TUV".Contains(c)) {
                return 8;
            } else if ("WXYZ".Contains(c)) {
                return 9;
            }
            return null;
        }
    }
}

    Salvare il file PhoneTranslator.cs e chiuderlo.

  19. Aggiungere codice per associare l'interfaccia utente. A tale scopo, fare doppio clic su ViewController.cs nel riquadro della soluzione per aprirlo:

    Add code to wire up the user interface

  20. Iniziare associando TranslateButton. Nella classe ViewController trovare il metodo ViewDidLoad e aggiungere il codice seguente sotto la chiamata di base.ViewDidLoad():

    string translatedNumber = "";

TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
    // Convert the phone number with text to a number
    // using PhoneTranslator.cs
    translatedNumber = PhoneTranslator.ToNumber(
        PhoneNumberText.Text);

    // Dismiss the keyboard if text field was tapped
    PhoneNumberText.ResignFirstResponder ();

    if (translatedNumber == "") {
        CallButton.SetTitle ("Call ", UIControlState.Normal);
        CallButton.Enabled = false;
    } else {
        CallButton.SetTitle ("Call " + translatedNumber,
            UIControlState.Normal);
        CallButton.Enabled = true;
    }
};

    Includere using Phoneword_iOS; se lo spazio dei nomi del file è diverso.

  21. Aggiungere il codice relativo alla pressione dell'utente sul secondo pulsante, denominato CallButton. Inserire il codice seguente sotto il codice per TranslateButton e aggiungere using Foundation; all'inizio del file:

        CallButton.TouchUpInside += (object sender, EventArgs e) => {
        // Use URL handler with tel: prefix to invoke Apple's Phone app...
        var url = new NSUrl ("tel:" + translatedNumber);

        // ...otherwise show an alert dialog
        if (!UIApplication.SharedApplication.OpenUrl (url)) {
            var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
            alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
            PresentViewController (alert, true, null);
        }
    };

  22. Salvare le modifiche e quindi compilare l'applicazione scegliendo Compila > tutto o premendo ⌘ + B. Se l'applicazione viene compilata, verrà visualizzato un messaggio di esito positivo nella parte superiore dell'IDE:

    A success message will appear at the top of the IDE

    Se sono presenti errori, rivedere i passaggi precedenti e correggere eventuali errori fino a quando l'applicazione non viene compilata correttamente.

  23. Testare infine l'applicazione nel simulatore iOS. Nella parte superiore sinistra dell'IDE scegliere Debug dal primo elenco a discesa e iPhone XR iOS 12.0 (o un altro simulatore disponibile) dal secondo elenco a discesa e premere Avvia (il pulsante triangolare simile al pulsante Riproduci):

    Select a simulator and press start

    Nota

    Al momento, a causa di un requisito Apple, per compilare codice per un dispositivo o un simulatore potrebbe essere necessario un certificato di sviluppo o un'identità di firma. Per soddisfare questo requisito, seguire i passaggi nella guida Provisioning dei dispositivi.

  24. Verrà avviata l'applicazione all'interno del simulatore iOS:

    The application running inside the iOS Simulator

    Le chiamate telefoniche non sono supportate nel simulatore iOS. Verrà invece visualizzata una finestra di dialogo di avviso quando si tenta di effettuare una chiamata:

    The alert dialog when trying to place a call

Procedura dettagliata in Visual Studio

Questa procedura dettagliata descrive come creare un'applicazione, Phoneword, che converte un numero di telefono alfanumerico in un numero di telefono numerico.

Nota

questa procedura dettagliata usa Visual Studio Enterprise 2017 in una macchina virtuale Windows 10. La configurazione usata può essere diversa da quella usata qui, purché i requisiti sopra riportati siano soddisfatti. Tenere presente tuttavia che alcune schermate potrebbero essere diverse.

Nota

Prima di procedere con questa procedura dettagliata, è necessario connettersi al Mac da Visual Studio. Ciò è dovuto al fatto che Xamarin.iOS si basa sugli strumenti di Apple per compilare e avviare applicazioni. Per eseguire la configurazione, seguire i passaggi nella guida Associazione al Mac.

  1. Avviare Visual Studio dal menu Start:

    The Start screen

    Creare una nuova soluzione Xamarin.iOS selezionando File > Nuovo > progetto... > Visual C# i Telefono & iPad iOS App (Xamarin):Visual C# i Telefono & iPad iOS App (Xamarin):Visual C# i Telefono & iPad > iOS App (Xamarin):Visual C# > i

    Select iOS App (Xamarin) project type

    Nella finestra di dialogo successiva selezionare il modello App visualizzazione singola e premere OK per creare il progetto:

    Select Single View project template

  2. Verificare che l'icona Xamarin Mac Agent sulla barra degli strumenti sia verde.

    Confirm that the Xamarin Mac Agent icon in the toolbar is green

    Se non lo è, significa che non è disponibile la connessione all'host di compilazione Mac. Per connettersi, seguire i passaggi nella guida alla configurazione.

  3. Aprire il file Main.storyboard in iOS Designer facendo doppio clic su di esso in Esplora soluzioni:

    The iOS Designer

  4. Aprire la scheda Casella degli strumenti, digitare "etichetta" nella barra di ricerca e trascinare un elemento Etichetta nell'area di progettazione (l'area al centro):

    Drag a Label onto the design surface the area in the center

  5. Afferrare quindi i punti di controllo dei controlli di trascinamento e ingrandire l'elemento:

    Make the label wider

  6. Dopo aver selezionato l'elemento Etichetta nell'area di progettazione, usare la finestra Proprietà per modificare la proprietà Testo dell'elemento Etichetta in "Enter a Phoneword:" (Immettere una Phoneword)

    Change the Text property of the Label to Enter a Phoneword

    Nota

    È possibile visualizzare le proprietà o la casella degli strumenti in qualsiasi momento passando al menu Visualizza.

  7. Cercare "campo di testo" all'interno della casella degli strumenti e trascinare un Campo di testo dalla casella degli strumenti nell'area di progettazione e posizionarlo sotto l'elemento Etichetta. Regolare la larghezza in modo che il Campo di testo sia della stessa larghezza dell'Etichetta:

    Adjust the width until the Text Field is the same width as the Label

  8. Dopo aver selezionato il Campo di testo nell'area di progettazione, modificare la proprietà Nomedel Campo di testo nella sezione Identità di Proprietà in PhoneNumberText e modificare la proprietà Testo in "1-855-XAMARIN":

    Change the Text property to 1-855-XAMARIN

  9. Trascinare un oggetto Pulsante dalla casella degli strumenti all'area di progettazione e inserirlo sotto il widget Campo di testo. Regolare la larghezza in modo che il Pulsante sia largo come il Campo di testo e l'Etichetta:

    Adjust the width so the Button is as wide as the Text Field and Label

  10. Dopo aver selezionato il Pulsante nell'area di progettazione, modificare la proprietà Nome nella sezione Identità di Proprietà in TranslateButton. Modificare la proprietà Titolo in "Translate" (Converti):

    Change the Title property to Translate

  11. Ripetere i due passaggi precedenti e trascinare un oggetto Pulsante dalla casella degli strumenti all'area di progettazione e inserirlo sotto il primo Pulsante. Regolare la larghezza in modo che il Pulsante sia largo come il primo Pulsante:

    Adjust the width so the Button is as wide as the first Button

  12. Dopo aver selezionato il secondo Pulsante nell'area di progettazione, modificare la proprietà Nome nella sezione Identità di Proprietà in CallButton. Modificare la proprietà Titolo in "Call" (Chiama):

    Change the Title property to Call

    Salvare le modifiche passando a File Salva tutto o premendo CTRL+S>.

  13. Aggiungere codice per convertire i numeri di telefono da alfanumerici a numerici. A tale scopo, aggiungere prima di tutto un nuovo file al progetto facendo clic con il pulsante destro del mouse sul progetto Telefono word nel Esplora soluzioni e scegliendo Aggiungi > nuovo elemento... o premendo CTRL+ MAIUSC+ A:

    Add some code to translate phone numbers from alphanumeric to numeric

  14. Nella finestra di dialogo Aggiungi nuovo elemento (fare clic con il pulsante destro del mouse sul progetto, scegliere Aggiungi > nuovo elemento...), selezionare Apple > Class e denominare il nuovo file PhoneTranslator:

    Add a new class named PhoneTranslator

    Importante

    Assicurarsi di selezionare il modello "Classe" con C# nell'icona. In caso contrario non è possibile fare riferimento a questa nuova classe.

  15. Viene creata una nuova classe C#. Rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System.Text;
using System;

namespace Phoneword
{
    public static class PhoneTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw)) {
                return "";
            } else {
                raw = raw.ToUpperInvariant();
            }

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c)) {
                    newNumber.Append(c);
                } else {
                    var result = TranslateToNumber(c);
                    if (result != null) {
                        newNumber.Append(result);
                    }
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }

        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c)) {
                return 2;
            } else if ("DEF".Contains(c)) {
                return 3;
            } else if ("GHI".Contains(c)) {
                return 4;
            } else if ("JKL".Contains(c)) {
                return 5;
            } else if ("MNO".Contains(c)) {
                return 6;
            } else if ("PQRS".Contains(c)) {
                return 7;
            } else if ("TUV".Contains(c)) {
                return 8;
            } else if ("WXYZ".Contains(c)) {
                return 9;
            }
            return null;
        }
    }
}

    Salvare il file PhoneTranslator.cs e chiuderlo.

  16. Fare doppio clic su ViewController.cs in Esplora soluzioni per aprirlo e aggiungere la logica per la gestione delle interazioni con i pulsanti:

    Logic added to handle interactions with the buttons

  17. Iniziare associando TranslateButton. Nella classe ViewController trovare il metodo ViewDidLoad. Aggiungere il codice seguente per il pulsante all'interno di ViewDidLoad, sotto la chiamata a base.ViewDidLoad():

    string translatedNumber = "";

TranslateButton.TouchUpInside += (object sender, EventArgs e) => {

    // Convert the phone number with text to a number
    // using PhoneTranslator.cs
    translatedNumber = PhoneTranslator.ToNumber(PhoneNumberText.Text);

    // Dismiss the keyboard if text field was tapped
    PhoneNumberText.ResignFirstResponder ();

    if (translatedNumber == "") {
        CallButton.SetTitle ("Call", UIControlState.Normal);
        CallButton.Enabled = false;
        }
    else {
        CallButton.SetTitle ("Call " + translatedNumber, UIControlState.Normal);
        CallButton.Enabled = true;
        }
};

    Includere using Phoneword; se lo spazio dei nomi del file è diverso.

  18. Aggiungere il codice relativo alla pressione dell'utente sul secondo pulsante, denominato CallButton. Inserire il codice seguente sotto il codice per TranslateButton e aggiungere using Foundation; all'inizio del file:

    CallButton.TouchUpInside += (object sender, EventArgs e) => {
    var url = new NSUrl ("tel:" + translatedNumber);

        // Use URL handler with tel: prefix to invoke Apple's Phone app,
        // otherwise show an alert dialog

    if (!UIApplication.SharedApplication.OpenUrl (url)) {
                    var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
                    alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
                    PresentViewController (alert, true, null);
                }
};

  19. Salvare le modifiche e quindi compilare l'applicazione scegliendo Compila soluzione o premendo CTRL+MAIUSC+B.> Se l'applicazione viene compilata, verrà visualizzato un messaggio di operazione riuscita nella parte inferiore dell'IDE:

    A success message will appear at the bottom of the IDE

    Se sono presenti errori, rivedere i passaggi precedenti e correggere eventuali errori fino a quando l'applicazione non viene compilata correttamente.

  20. Testare infine l'applicazione nel simulatore iOS remoto. Sulla barra degli strumenti dell'IDE scegliere Debug e iPhone 8 Plus iOS x.x dai menu a discesa e premere Avvia (il triangolo verde simile al pulsante Riproduci):

    Press Start

  21. Verrà avviata l'applicazione all'interno del simulatore iOS:

    The application running inside the iOS Simulator

    Le chiamate telefoniche non sono supportate nel simulatore iOS. Verrà invece visualizzata una finestra di dialogo di avviso quando si tenta di effettuare una chiamata:

    An alert dialog will display when trying to place a call

La prima applicazione Xamarin.iOS è stata completata.

È ora possibile analizzare nel dettaglio gli strumenti e le competenze illustrate in questa guida in Hello, iOS: approfondimenti.