Olá, iOS – Guia de Início Rápido

  • Artigo

Aviso

O iOS Designer foi preterido no Visual Studio 2019 versão 16.8 e Visual Studio 2019 para Mac versão 8.8 e removido no Visual Studio 2019 versão 16.9 e Visual Studio para Mac versão 8.9. A maneira recomendada de criar interfaces de usuário do iOS é diretamente em um Mac executando o Construtor de Interfaces do Xcode. Para obter mais informações, consulte Criando interfaces de usuário com o Xcode.

Este guia descreve como criar um aplicativo que converte um número de telefone alfanumérico inserido pelo usuário em numérico e, em seguida, chama esse número. O aplicativo final tem esta aparência:

The Hello.iOS Quickstart app

Requisitos

O desenvolvimento do iOS com o Xamarin requer:

  • Um Mac executando o macOS High Sierra (10.13) ou superior.
  • A versão mais recente do SDK do iOS e do Xcode instalada da App Store.

O Xamarin.iOS funciona com a seguinte configuração:

  • Versão mais recente do Visual Studio para Mac que atenda às especificações acima.

O guia de Instalação do Mac do Xamarin.iOS está disponível para instruções de instalação passo a passo

O Xamarin.iOS funciona com a seguinte configuração:

  • A versão mais recente do Visual Studio 2019 ou Visual Studio 2017 Community, Professional ou Enterprise no Windows 10, emparelhada com um host de build do Mac que atenda às especificações acima.

O Guia de instalação do Xamarin.iOS no Windows está disponível para fornecer instruções de instalação passo a passo.

Antes de começar, baixe o Conjunto de ícones do Aplicativo Xamarin.

Passo a passo do Visual Studio para Mac

Este passo a passo descreve como criar um aplicativo chamado Phoneword que converte um número de telefone alfanumérico em um número de telefone numérico.

  1. Inicie o Visual Studio para Mac na pasta Aplicativos ou no Destaque:

    The Launch screen

    Na Tela de Inicialização, clique em Novo Projeto... para criar uma nova solução do Xamarin.iOS:

    iOS solution

  2. Na caixa de diálogo Nova Solução, escolha o modelo Aplicativo de Exibição Única do Aplicativo > iOS>, garantindo que o C# esteja selecionado. Clique em Avançar:

    Choose Single View Application

  3. Configure o aplicativo. Dê a ele o NomePhoneword_iOS e deixe o resto como padrão. Clique em Avançar:

    Enter the app name

  4. Deixe o Projeto e o Nome da Solução como está. Escolha o local do projeto aqui ou mantenha-o como padrão:

    Choose the location of the project

  5. Clique em Criar para criar a Solução.

  6. Abra o arquivo Main.storyboard clicando duas vezes no Painel de Solução. Certifique-se de abrir o arquivo usando o Visual Studio iOS Designer (clique com o botão direito do mouse no storyboard e selecione Abrir com > o iOS Designer). Isso oferece uma maneira de criar visualmente uma interface do usuário:

    The iOS Designer

    Observe que as classes de tamanho estão habilitadas por padrão. Consulte o guia Storyboards Unificados para saber mais sobre elas.

  7. No Painel de Caixa de Ferramentas, digite "rótulo" na barra de pesquisa e arraste um Rótulo para a superfície de design (a área no centro):

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

    Observação

    Você pode abrir o Bloco de Propriedades ou a Caixa de Ferramentas a qualquer momento navegando até Exibir > Pads.

  8. Pegue as alças dos Controles de Arraste (os círculos ao redor do controle) e torne o rótulo mais largo:

    Make the label wider

  9. Com o Rótulo selecionado na superfície de design, use o Painel de Propriedades para alterar a propriedade Texto do Rótulo para “Inserir um Phoneword:”

    Set the label to Enter a Phoneword

  10. Pesquise “campo de texto” dentro da Caixa de Ferramentas e arraste um Campo de Texto da Caixa de Ferramentas para a superfície de design e coloque-o no Rótulo. Ajuste a largura até o Campo de Texto ter a mesma largura que o Rótulo:

    Make the Text Field the same width as the Label

  11. Com o Campo de Texto selecionado na superfície de design, no Campo de Texto, altere a propriedade Nome na seção Identidade do Painel de Propriedades para PhoneNumberText e altere a propriedade Texto para "1-855-XAMARIN":

    Change the Title property to 1-855-XAMARIN

  12. Arraste um Botão da Caixa de Ferramentas para a superfície de design e coloque-o no Campo de Texto. Ajuste a largura de modo que o botão seja tão largo quanto o Campo de Texto e o Rótulo:

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

  13. Com o Botão selecionado na superfície de design, altere a propriedade Nome na seção Identidade do Painel de Propriedades para TranslateButton. Altere a propriedade Título “Traduzir”:

    Change the Title property to Translate

  14. Repita as duas etapas acima e arraste um Botão de Caixa de Ferramentas para a superfície de design e coloque-o sob o primeiro Botão. Ajuste a largura para que o Botão tenha a mesma largura que o primeiro Botão:

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

  15. Com o segundo Botão selecionado na superfície de design, altere a propriedade Nome na seção Identidade do Painel de Propriedades para CallButton. Alterar a propriedade Título para “Chamada”:

    Change the Title property to Call

    Salve as alterações navegando até Salvar arquivo > ou pressionando ⌘ + s.

  16. Alguma lógica precisa ser adicionada ao aplicativo para converter números de telefone de alfanuméricos para numéricos. Adicione um novo arquivo ao Projeto clicando com o botão direito do mouse no Phoneword_iOS Projeto no Solution Pad e escolhendo Add > New File... ou pressionando ⌘ + n:

    Add a new file to the Project

  17. Na caixa de diálogo Novo arquivo, selecione Classe vazia geral > e nomeie o novo arquivoPhoneTranslator:

    Select Empty Class and name the new file PhoneTranslator

  18. Isso cria uma nova classe C# vazia para nós. Remova todo o código de modelo e substitua-o pelo código a seguir:

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

    Salve o arquivo PhoneTranslator.cs e feche-o.

  19. Adicione código para conectar a interface do usuário. Para fazer isso, clique duas vezes em ViewController.cs no Painel de Solução para abri-lo:

    Add code to wire up the user interface

  20. Comece conectando TranslateButton. Na classe ViewController, localize o método ViewDidLoad e adicione o seguinte código sob a chamada 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;
    }
};

    Incluir using Phoneword_iOS; se o namespace do arquivo for diferente.

  21. Adicione código para responder quando o usuário pressiona o segundo botão, que se chama CallButton. Coloque o código a seguir abaixo do código para TranslateButton e adicione using Foundation; à parte superior do arquivo:

        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. Salve as alterações e, em seguida, compile o aplicativo escolhendo Build Build All ou pressionando ⌘ + B>. Se o aplicativo for compilado, uma mensagem de êxito aparecerá na parte superior do IDE:

    A success message will appear at the top of the IDE

    Se houver erros, repita as etapas anteriores e corrija-os até que o aplicativo seja compilado com êxito.

  23. Por fim, teste o aplicativo no Simulador do iOS. No canto superior esquerdo do IDE, escolha Depurar na primeira lista suspensa e iPhone XR iOS 12.0 (ou outro simulador disponível) na segunda lista suspensa e pressione Iniciar (o botão triangular que lembra um botão Reproduzir):

    Select a simulator and press start

    Observação

    No momento, devido a um requisito da Apple, pode ser necessário ter um certificado de desenvolvimento ou identidade de assinatura para poder compilar código para o dispositivo ou simulador. Siga as etapas no guia Provisionamento de Dispositivo para configurar isso.

  24. Isso inicializará o aplicativo no Simulador do iOS:

    The application running inside the iOS Simulator

    Não há suporte para chamadas telefônicas no Simulador de iOS; você verá uma caixa de diálogo de alerta quanto tentar fazer uma chamada:

    The alert dialog when trying to place a call

Passo a passo do Visual Studio

Este passo a passo descreve como criar um aplicativo chamado Phoneword que converte um número de telefone alfanumérico em um número de telefone numérico.

Observação

Este passo a passo usa o Visual Studio Enterprise 2017 em uma máquina virtual do Windows 10. Sua instalação pode diferir desta, desde que atenda aos requisitos acima, mas lembre-se de que algumas capturas de tela podem ser diferentes para sua instalação.

Observação

Antes de continuar com este passo a passo, você já deve estar conectado ao Mac do Visual Studio. Isso ocorre porque o Xamarin.iOS depende das ferramentas da Apple para criar e lançar aplicativos. Para obter a configuração, siga as etapas do guia Emparelhar com Mac.

  1. Inicialize o Visual Studio no menu Iniciar:

    The Start screen

    Crie uma nova solução Xamarin.iOS selecionando Arquivo > Novo > Projeto... > Visual C# > iPhone & iPad > iOS App (Xamarin):

    Select iOS App (Xamarin) project type

    Na próxima caixa de diálogo que aparece, selecione o modelo Aplicativo de Modo de Exibição Único e pressione OK para criar o projeto:

    Select Single View project template

  2. Confirme se o ícone do Xamarin Mac Agent na barra de ferramentas está verde.

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

    Caso contrário, significa que não há nenhuma conexão com o host do build do Mac, siga as etapas no guia de configuração para se conectar.

  3. Abra o arquivo Main.storyboard no iOS Designer clicando duas vezes no Gerenciador de Soluções:

    The iOS Designer

  4. Abra a guia Caixa de Ferramentas, digite "rótulo" na barra de pesquisa e arraste um Rótulo para a superfície de design (a área no centro):

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

  5. Em seguida, pegue as alças dos Controles de Arraste e torne o rótulo mais largo:

    Make the label wider

  6. Com o Rótulo selecionado na superfície de design, use as Janelas de Propriedades para alterar a propriedade Texto do Rótulo para “Inserir um Phoneword:”

    Change the Text property of the Label to Enter a Phoneword

    Observação

    Você pode abrir Propriedades ou a Caixa de Ferramentas a qualquer momento navegando para o menu Exibir.

  7. Pesquise “campo de texto” dentro da Caixa de Ferramentas e arraste um Campo de Texto da Caixa de Ferramentas para a superfície de design e coloque-o no Rótulo. Ajuste a largura até o Campo de Texto ter a mesma largura que o Rótulo:

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

  8. Com o Campo de Texto selecionado na superfície de design, no Campo de Texto, altere a propriedade Nome na seção Identidade de Propriedades para PhoneNumberText e altere a propriedade Texto para “1-855-XAMARIN”:

    Change the Text property to 1-855-XAMARIN

  9. Arraste um Botão da Caixa de Ferramentas para a superfície de design e coloque-o no Campo de Texto. Ajuste a largura de modo que o botão seja tão largo quanto o Campo de Texto e o Rótulo:

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

  10. Com o Botão selecionado na superfície de design, altere a propriedade Nome na seção Identidade de Propriedades para TranslateButton. Altere a propriedade Título “Traduzir”:

    Change the Title property to Translate

  11. Repita as duas etapas anteriores e arraste um Botão de Caixa de Ferramentas para a superfície de design e coloque-o sob o primeiro Botão. Ajuste a largura para que o Botão tenha a mesma largura que o primeiro Botão:

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

  12. Com o segundo Botão selecionado na superfície de design, altere a propriedade Nome na seção Identidade de Propriedades para CallButton. Alterar a propriedade Título para “Chamada”:

    Change the Title property to Call

    Salve as alterações navegando até Salvar tudo > ou pressionando Ctrl + s.

  13. Adicione algum código para converter números de telefone de alfanuméricos para numéricos. Para fazer isso, primeiro adicione um novo arquivo ao projeto clicando com o botão direito do mouse no projeto Phoneword no Gerenciador de Soluções e escolhendo Adicionar > Novo Item... ou pressionando Ctrl + Shift + A:

    Add some code to translate phone numbers from alphanumeric to numeric

  14. Na caixa de diálogo Adicionar Novo Item (clique com o botão direito do mouse no projeto, escolha Adicionar > Novo Item...), selecione Classe Apple > e nomeie o novo arquivoPhoneTranslator:

    Add a new class named PhoneTranslator

    Importante

    Selecione o modelo "class" que tem C# no ícone. Caso contrário, você não poderá fazer referência a essa nova classe.

  15. Isso cria uma nova classe C#. Remova todo o código de modelo e substitua-o pelo código a seguir:

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

    Salve o arquivo PhoneTranslator.cs e feche-o.

  16. Clique duas vezes em ViewController.cs no Gerenciador de Soluções para abri-lo de modo que a lógica pode ser adicionada a interações de alças com botões:

    Logic added to handle interactions with the buttons

  17. Comece conectando TranslateButton. Na classe ViewController, localize o método ViewDidLoad. Adicione o seguinte código de botão dentro de ViewDidLoad, abaixo da chamada 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;
        }
};

    Incluir using Phoneword; se o namespace do arquivo for diferente.

  18. Adicione código para responder quando o usuário pressiona o segundo botão, que se chama CallButton. Coloque o código a seguir abaixo do código para TranslateButton e adicione using Foundation; à parte superior do arquivo:

    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. Salve as alterações e compile o aplicativo escolhendo Build Build Solution ou pressionando Ctrl + Shift + B>. Se o aplicativo for compilado, uma mensagem de êxito aparecerá na parte inferior do IDE:

    A success message will appear at the bottom of the IDE

    Se houver erros, repita as etapas anteriores e corrija-os até que o aplicativo seja compilado com êxito.

  20. Por fim, teste o aplicativo no Simulador do iOS Remoto. Na barra de ferramentas de IDE, escolha Depurar e iPhone 8 Plus iOS x.x no menu suspenso e pressione Iniciar (o triângulo verde parecido com o botão Executar):

    Press Start

  21. Isso inicializará o aplicativo no Simulador do iOS:

    The application running inside the iOS Simulator

    Não há suporte para chamadas telefônicas no Simulador de iOS; uma caixa de diálogo de alerta será exibida ao tentar fazer uma chamada:

    An alert dialog will display when trying to place a call

Parabéns por concluir seu primeiro aplicativo Xamarin.iOS!

Agora é hora de examinar as ferramentas e as habilidades mostradas neste guia no Aprofundamento no Hello, iOS.