Hello, iOS - Guida introduttiva

Articolo
10/05/2018

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:

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.

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

Nella schermata di avvio fare clic su Nuovo progetto per creare una nuova soluzione Xamarin.iOS:
Nella finestra di dialogo Nuova soluzione scegliere il modello Applicazione > visualizzazione singola app iOS>, assicurandosi che sia selezionato C#. Fare clic su Avanti:
Configurare l'app. Assegnarle il nomePhoneword_iOS e lasciare tutte le altre impostazioni predefinite. Fare clic su Avanti:
Lasciare invariati i nomi del progetto e della soluzione. Scegliere il percorso del progetto o mantenere l'impostazione predefinita:
Fare clic su Crea per creare la Soluzione.
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:

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

Nota

È possibile visualizzare il riquadro delle proprietà o la casella degli strumenti in qualsiasi momento passando a Visualizza > riquadri.
Afferrare i punti di controllo dei controlli di trascinamento (i cerchi intorno al controllo) e ingrandire l'elemento:
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)
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:
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":
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:
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):
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:
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):

Salvare le modifiche passando a Salva file > o premendo ⌘ + s.
È 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:
Nella finestra di dialogo Nuovo file selezionare General Empty Class (Classe vuota generale>) e denominare il nuovo file PhoneTranslator:

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.

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

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.

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

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:

Se sono presenti errori, rivedere i passaggi precedenti e correggere eventuali errori fino a quando l'applicazione non viene compilata correttamente.
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):

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.
Verrà avviata l'applicazione all'interno del simulatore iOS:

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:

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.

Avviare Visual Studio dal menu Start:

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

Nella finestra di dialogo successiva selezionare il modello App visualizzazione singola e premere OK per creare il progetto:
Verificare che l'icona Xamarin Mac Agent sulla barra degli strumenti sia verde.

Se non lo è, significa che non è disponibile la connessione all'host di compilazione Mac. Per connettersi, seguire i passaggi nella guida alla configurazione.
Aprire il file Main.storyboard in iOS Designer facendo doppio clic su di esso in Esplora soluzioni:
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):
Afferrare quindi i punti di controllo dei controlli di trascinamento e ingrandire l'elemento:
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)

Nota

È possibile visualizzare le proprietà o la casella degli strumenti in qualsiasi momento passando al menu Visualizza.
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:
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":
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:
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):
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:
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):

Salvare le modifiche passando a File Salva tutto o premendo CTRL+S>.
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:
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:

Importante

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

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.

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

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.

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

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:

Se sono presenti errori, rivedere i passaggi precedenti e correggere eventuali errori fino a quando l'applicazione non viene compilata correttamente.
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):
Verrà avviata l'applicazione all'interno del simulatore iOS:

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: