Inicio rápido de Hello, iOS

  • Artículo

Advertencia

iOS Designer quedó en desuso en la versión 16.8 de Visual Studio 2019 y la 8.8 de Visual Studio 2019 para Mac, y se ha eliminado de la versión 16.9 de Visual Studio 2019 y la 8.9 de Visual Studio para Mac. La manera recomendada de compilar interfaces de usuario de iOS es directamente en un equipo Mac que ejecute Interface Builder de Xcode. Para obtener más información, consulte Diseño de interfaces de usuario con Xcode.

Esta guía describe cómo crear una aplicación que convierte un número de teléfono alfanumérico escrito por el usuario en un número de teléfono numérico y, después, llama a ese número. La aplicación final tiene este aspecto:

The Hello.iOS Quickstart app

Requisitos

El desarrollo de iOS con Xamarin requiere:

  • Un equipo Mac que ejecute macOS High Sierra (10.13) o una versión posterior.
  • La versión más reciente de Xcode y el SDK de iOS instalada desde el App Store.

Xamarin.iOS funciona con la siguiente configuración:

  • Versión más reciente de Visual Studio para Mac que se ajuste a las especificaciones anteriores.

La guía de instalación de Mac para Xamarin.iOS está disponible para obtener instrucciones de instalación paso a paso

Xamarin.iOS funciona con la siguiente configuración:

  • La versión más reciente de Visual Studio 2019 o Visual Studio 2017 Community, Professional o Enterprise en Windows 10, emparejada con un host de compilación de Mac que se ajuste a las especificaciones anteriores.

Se puede consultar la guía de instalación de Xamarin.iOS Windows para obtener instrucciones de instalación paso a paso.

Antes de comenzar, descargue el conjunto de iconos de aplicación de Xamarin.

Tutorial de Visual Studio para Mac

En este tutorial se muestra cómo crear una aplicación llamada Phoneword que convierte un número de teléfono alfanumérico en un número de teléfono numérico.

  1. Inicie Visual Studio para Mac desde la carpeta Aplicaciones o desde Spotlight:

    The Launch screen

    En la pantalla Inicio, haga clic en Nuevo proyecto... para crear una nueva solución de Xamarin.iOS:

    iOS solution

  2. En el cuadro de diálogo Nueva solución, elija la plantilla Aplicación > de vista única de aplicación de iOS>, asegurándose de que C# está seleccionada. Haga clic en Siguiente:

    Choose Single View Application

  3. Configure la aplicación. Asígnele el nombrePhoneword_iOS y deje todo lo demás en su valor predeterminado. Haga clic en Siguiente:

    Enter the app name

  4. Deje el nombre del proyecto y de la solución tal como están. Elija la ubicación del proyecto aquí o manténgala con el valor predeterminado:

    Choose the location of the project

  5. Haga clic en Crear para crear la solución.

  6. Haga doble clic en el archivo Main.storyboard en el Panel de solución para abrirlo. Asegúrese de abrir el archivo con el Diseñador de iOS de Visual Studio (haga clic con el botón derecho en el guión gráfico y seleccione Abrir con > iOS Designer). Esto proporciona una manera de crear visualmente una interfaz de usuario:

    The iOS Designer

    Tenga en cuenta que las clases de tamaño están habilitadas de forma predeterminada. Vea la guía Guiones gráficos unificados para más información sobre ellos.

  7. En el panel del cuadro de herramientas, escriba "etiqueta" en la barra de búsqueda y arrastre una etiqueta a la superficie de diseño (el área en el centro):

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

    Nota:

    Puede abrir el Panel de propiedades o el Cuadro de herramientas en cualquier momento; para ello, vaya a Ver > paneles.

  8. Seleccione los manipuladores de los Controles de arrastre (los círculos que rodean el control) y aumente el ancho de la etiqueta:

    Make the label wider

  9. Con la Etiqueta seleccionada en la superficie de diseño, use el Panel de propiedades para cambiar la propiedad Texto de la Etiqueta por "Escriba una Phoneword:"

    Set the label to Enter a Phoneword

  10. Busque "campo de texto" dentro del Cuadro de herramientas y arrastre un Campo de texto desde el Cuadro de herramientas a la superficie de diseño y colóquelo bajo la Etiqueta. Ajuste el ancho hasta que el Campo de texto tenga el mismo ancho que la Etiqueta:

    Make the Text Field the same width as the Label

  11. Con el Campo de texto seleccionado en la superficie de diseño, cambie la propiedad Nombre del Campo de texto en la sección Identidad del Panel de propiedades por PhoneNumberText y cambie la propiedad Texto por "1-855-XAMARIN":

    Change the Title property to 1-855-XAMARIN

  12. Arrastre un Botón desde el Cuadro de herramientas hasta la superficie de diseño y colóquelo debajo del Campo de texto. Ajuste el ancho para que el Botón tenga el mismo ancho que el Campo de texto y la Etiqueta:

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

  13. Con el Botón seleccionado en la superficie de diseño, cambie la propiedad Nombre en la sección Identidad del Panel de propiedades a TranslateButton. Cambie la propiedad Título a "Traducir":

    Change the Title property to Translate

  14. Repita los dos pasos anteriores y arrastre un Botón desde el Cuadro de herramientas a la superficie de diseño y colóquelo debajo del primer Botón. Ajuste el ancho de modo que el Botón sea tan ancho como el primer Botón:

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

  15. Con el segundo Botón seleccionado en la superficie de diseño, cambie la propiedad Nombre en la sección Identidad del Panel de propiedades a CallButton. Cambie la propiedad Título a "Llamar":

    Change the Title property to Call

    Guarde los cambios; para ello, vaya a Guardar archivo > o presione ⌘ + s.

  16. Debe agregarse lógica a la aplicación para convertir números de teléfono de formato alfanumérico a numérico. Agregue un nuevo archivo al proyecto haciendo clic con el botón derecho en el proyecto de Teléfono word_iOS en el Panel de solución y seleccionando Agregar > nuevo archivo... o presionando ⌘ + n:

    Add a new file to the Project

  17. En el cuadro de diálogo Nuevo archivo, seleccione Clase vacía general > y asigne al nuevo archivo PhoneTranslatorel nombre :

    Select Empty Class and name the new file PhoneTranslator

  18. Esto crea una nueva clase de C#. Quite todo el código de plantilla y sustitúyalo por el siguiente código:

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

    Guarde el archivo PhoneTranslator.cs y ciérrelo.

  19. Agregue código para conectar la interfaz de usuario. Para hacer esto, haga doble clic en ViewController.cs en el Panel de solución para abrirlo:

    Add code to wire up the user interface

  20. Empiece por la conexión del TranslateButton. En la clase ViewController, busque el método ViewDidLoad y agregue el código siguiente debajo de la llamada 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;
    }
};

    Incluya using Phoneword_iOS; si el espacio de nombres del archivo es diferente.

  21. Agregue código para responder cuando el usuario pulse el segundo botón, que se denomina CallButton. Coloque el código siguiente debajo del código para el TranslateButton y agregue using Foundation; a la parte superior del archivo:

        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. Guarde los cambios y, a continuación, compile la aplicación seleccionando Compilar > todo o presionando ⌘ + B. Si la aplicación se compila, aparecerá un mensaje de operación correcta en la parte superior del IDE:

    A success message will appear at the top of the IDE

    Si hay errores, repase los pasos anteriores y corrija cualquier error hasta que la aplicación se compile correctamente.

  23. Por último, pruebe la aplicación en el Simulador de iOS. En la esquina superior izquierda del IDE, elija Depurar en la primera lista desplegable, iPhone XR iOS 12.0 (u otro simulador disponible) en la segunda lista desplegable y haga clic en Iniciar (el botón triangular similar a un botón de reproducción):

    Select a simulator and press start

    Nota:

    En este momento, debido a un requisito de Apple, puede ser necesario tener un certificado de desarrollo o una identidad de firma para compilar el código para el dispositivo o el simulador. Siga los pasos de la guía Aprovisionamiento de dispositivos para configurar esta opción.

  24. Esto iniciará la aplicación dentro del Simulador de iOS:

    The application running inside the iOS Simulator

    No se admiten llamadas de teléfono en el simulador de iOS. Verá un cuadro de diálogo de alerta cuando intente realizar una llamada:

    The alert dialog when trying to place a call

Tutorial de Visual Studio

En este tutorial se muestra cómo crear una aplicación llamada Phoneword que convierte un número de teléfono alfanumérico en un número de teléfono numérico.

Nota:

En este tutorial se utiliza Visual Studio Enterprise 2017 en una máquina virtual de Windows 10. Su configuración puede diferir, mientras cumpla los requisitos anteriores, pero tenga en cuenta que algunas capturas de pantalla pueden parecer diferentes a las de su instalación.

Nota:

Antes de continuar con este tutorial, se debe haber conectado ya a su Mac desde Visual Studio. Esto sucede porque Xamarin.iOS se basa en las herramientas de Apple para compilar e iniciar aplicaciones. Para realizar la configuración, siga los pasos de la guía Emparejar con Mac.

  1. Inicie Visual Studio desde el menú Inicio:

    The Start screen

    Cree una nueva solución de Xamarin.iOS seleccionando Archivo > nuevo > proyecto... > Visual C# > i Teléfono & iPad > iOS App (Xamarin):

    Select iOS App (Xamarin) project type

    En el siguiente cuadro de diálogo que aparece, seleccione la plantilla Aplicación de vista única y presione Aceptar para crear el proyecto:

    Select Single View project template

  2. Confirme que el icono del agente de Mac Xamarin en la barra de herramientas es verde.

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

    Si no es así, no hay ninguna conexión a su host de compilación de Mac. Siga los pasos descritos en la guía de configuración para conectarse.

  3. Abra el archivo Main.storyboard en el diseñador de iOS haciendo doble clic en él en el Explorador de soluciones:

    The iOS Designer

  4. Abra la pestaña Cuadro de herramientas, escriba "etiqueta" en la barra de búsqueda y arrastre una etiqueta a la superficie de diseño (el área en el centro):

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

  5. A continuación, seleccione los manipuladores de los Controles de arrastre y aumente el ancho de la etiqueta:

    Make the label wider

  6. Con la Etiqueta seleccionada en la superficie de diseño, use la Ventana Propiedades para cambiar la propiedad Texto de la Etiqueta por "Escriba una Phoneword:"

    Change the Text property of the Label to Enter a Phoneword

    Nota:

    Puede mostrar las Propiedades o el Cuadro de herramientas en cualquier momento si navega al menú Vista.

  7. Busque "campo de texto" dentro del Cuadro de herramientas y arrastre un Campo de texto desde el Cuadro de herramientas a la superficie de diseño y colóquelo bajo la Etiqueta. Ajuste el ancho hasta que el Campo de texto tenga el mismo ancho que la Etiqueta:

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

  8. Con el Campo de texto seleccionado en la superficie de diseño, cambie la propiedad Nombre del Campo de texto en la sección Identidad de las Propiedades por PhoneNumberText y cambie la propiedad Texto por "1-855-XAMARIN":

    Change the Text property to 1-855-XAMARIN

  9. Arrastre un Botón desde el Cuadro de herramientas hasta la superficie de diseño y colóquelo debajo del Campo de texto. Ajuste el ancho para que el Botón tenga el mismo ancho que el Campo de texto y la Etiqueta:

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

  10. Con el Botón seleccionado en la superficie de diseño, cambie la propiedad Nombre en la sección Identidad de las Propiedades a TranslateButton. Cambie la propiedad Título a "Traducir":

    Change the Title property to Translate

  11. Repita los dos pasos anteriores y arrastre un Botón desde el Cuadro de herramientas a la superficie de diseño y colóquelo debajo del primer Botón. Ajuste el ancho de modo que el Botón sea tan ancho como el primer Botón:

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

  12. Con el segundo Botón seleccionado en la superficie de diseño, cambie la propiedad Nombre en la sección Identidad de las Propiedades a CallButton. Cambie la propiedad Título a "Llamar":

    Change the Title property to Call

    Para guardar los cambios, vaya a Archivo > guardar todo o presione Ctrl + s.

  13. Agregue código para convertir números de teléfono de formato alfanumérico a numérico. Para ello, agregue primero un nuevo archivo al proyecto haciendo clic con el botón derecho en el proyecto de Teléfono word en el Explorador de soluciones y seleccionando Agregar > nuevo elemento... o presionando Ctrl + Mayús + A:

    Add some code to translate phone numbers from alphanumeric to numeric

  14. En el cuadro de diálogo Agregar nuevo elemento (haga clic con el botón derecho en el proyecto, elija Agregar > nuevo elemento...), seleccione Clase de Apple > y asigne el nombre al nuevo archivo PhoneTranslator:

    Add a new class named PhoneTranslator

    Importante

    Asegúrese de que selecciona la plantilla "clase" con C# en el icono. De lo contrario, no podrá hacer referencia a esta nueva clase.

  15. Esto crea una nueva clase de C#. Quite todo el código de plantilla y sustitúyalo por el siguiente código:

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

    Guarde el archivo PhoneTranslator.cs y ciérrelo.

  16. Haga doble clic en ViewController.cs en el Explorador de soluciones para abrirlo y poder agregar lógica para controlar las interacciones con los botones:

    Logic added to handle interactions with the buttons

  17. Empiece por la conexión del TranslateButton. En la clase ViewController, busque el método ViewDidLoad. Agregue lo siguiente al código del botón dentro de ViewDidLoad, debajo de la llamada 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;
        }
};

    Incluya using Phoneword; si el espacio de nombres del archivo es diferente.

  18. Agregue código para responder cuando el usuario pulse el segundo botón, que se denomina CallButton. Coloque el código siguiente debajo del código para el TranslateButton y agregue using Foundation; a la parte superior del archivo:

    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. Guarde los cambios y, a continuación, compile la aplicación seleccionando Compilar > solución de compilación o presionando Ctrl + Mayús + B. Si la aplicación se compila, aparecerá un mensaje de operación correcta en la parte inferior del IDE:

    A success message will appear at the bottom of the IDE

    Si hay errores, repase los pasos anteriores y corrija cualquier error hasta que la aplicación se compile correctamente.

  20. Por último, pruebe la aplicación en el simulador remoto de iOS. En la barra de herramientas del IDE, elija Depurar e iPhone 8 Plus iOS x.x en los menús desplegables y pulse Iniciar (el triángulo verde que se parece a un botón de reproducción):

    Press Start

  21. Esto iniciará la aplicación dentro del Simulador de iOS:

    The application running inside the iOS Simulator

    No se admiten llamadas de teléfono en el simulador de iOS. Se mostrará un cuadro de diálogo de alerta cuando intente realizar una llamada:

    An alert dialog will display when trying to place a call

Enhorabuena por completar su primera aplicación de Xamarin.iOS.

Ahora es el momento de analizar minuciosamente las herramientas y los conocimientos mostrados en esta guía en Hello, iOS: análisis detallado.