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

Artigo
10/05/2018

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.

Esta parte do passo a passo adicionará uma segunda tela ao aplicativo Phoneword, que exibe um histórico dos números de telefone chamados com o aplicativo. O aplicativo final terá uma segunda tela exibindo o histórico de chamadas, como ilustrado pela seguinte captura de tela:

O Aprofundamento relacionado examinará o aplicativo compilado e discutirá a arquitetura, a navegação e outros novos conceitos de iOS que encontrarmos ao longo do caminho.

Requisitos

Esta guia retoma no ponto em que o documento Hello, iOS parou e exige a conclusão do Início rápido do Hello, iOS.

Passo a passo no macOS

Este passo a passo adicionará uma tela de Histórico de Chamadas ao nosso aplicativo Phoneword.

Abra o aplicativo Phoneword no Visual Studio para Mac.
Abra o arquivo Main.storyboard do Painel de Solução:
Arraste um controlador de navegação da Caixa de Ferramentas para a superfície de design (talvez seja necessário reduzir o zoom para encaixar tudo na superfície de design!):
Arraste o segue sem origem (a seta cinza à esquerda do controlador de exibição simples) para o controlador de navegação para alterar o ponto de partida do aplicativo:
Selecione o controlador de exibição de raiz existente clicando na barra inferior e pressione Excluir para removê-lo da superfície de design. Em seguida, mova a cena Phoneword ao lado do controlador de navegação:
Defina o ViewController como o Controlador de exibição raiz do controlador de navegação. Pressione a tecla Ctrl e clique dentro do controlador de navegação. Deve aparecer uma linha azul. Em seguida, ainda mantendo pressionada a tecla Ctrl, arraste do controlador de navegação para a cena Phoneword e solte. Isso se chama arrastar com Ctrl:
No pop-over, vamos definir as relações como Raiz:

Agora, o ViewController é o controlador de exibição raiz do controlador de navegação:
Na tela do Phoneword, clique duas vezes na barra de Título e altere o Título para Phoneword:
Arraste um botão da Caixa de Ferramentas e coloque-o sob o Botão Chamar. Arraste as alças para deixar o novo Botão com a mesma largura do Botão Chamar:
No Painel de Propriedades, altere o Nome do botão para CallHistoryButton e altere o Título para Histórico de Chamadas:
Crie a tela Histórico de Chamadas. Na Caixa de Ferramentas, arraste um controlador de exibição de tabela para a superfície de design:
Em seguida, selecione o controlador de exibição de tabela clicando na barra preta na parte inferior da cena. No Painel de Propriedades, altere a classe do controlador de exibição de tabela para CallHistoryController e pressione Enter:

O Designer do iOS gerará uma classe de suporte personalizada chamada CallHistoryController para gerenciar a hierarquia de exibição de conteúdo dessa tela. O arquivo CallHistoryController.cs aparecerá no Painel de Solução:

Clique duas vezes no arquivo CallHistoryController.cs para abri-lo e substitua os conteúdos pelo seguinte código:

using System;
using Foundation;
using UIKit;
using System.Collections.Generic;

namespace Phoneword_iOS
{
    public partial class CallHistoryController : UITableViewController
    {
        public List<string> PhoneNumbers { get; set; }

        static NSString callHistoryCellId = new NSString ("CallHistoryCell");

        public CallHistoryController (IntPtr handle) : base (handle)
        {
            TableView.RegisterClassForCellReuse (typeof(UITableViewCell), callHistoryCellId);
            TableView.Source = new CallHistoryDataSource (this);
            PhoneNumbers = new List<string> ();
        }

        class CallHistoryDataSource : UITableViewSource
        {
            CallHistoryController controller;

            public CallHistoryDataSource (CallHistoryController controller)
            {
                this.controller = controller;
            }

            public override nint RowsInSection (UITableView tableView, nint section)
            {
                return controller.PhoneNumbers.Count;
            }

            public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
            {
                var cell = tableView.DequeueReusableCell (CallHistoryController.callHistoryCellId);

                int row = indexPath.Row;
                cell.TextLabel.Text = controller.PhoneNumbers [row];
                return cell;
            }
        }
    }
}

Salve o aplicativo (⌘ + s) e compile-o (⌘ + b) para garantir que não haja erros.

Crie um segue (transição) entre uma cena do Phoneword e a cena do Histórico de Chamadas. Na Cena do Phoneword, selecione o Botão Histórico de Chamadas e pressione Ctrl e arraste do Botão para a cena Histórico de Chamadas:

No pop-over Segue de Ação, selecione Mostrar

O Designer do iOS adicionará um Segue entre as duas cenas:
Adicione um Título ao controlador de exibição de tabela selecionando a barra preta na parte inferior da cena e alterando o Título do controlador de exibição para Histórico de Chamadas no Painel de Propriedades:
Quando o aplicativo for executado, o Botão Histórico de Chamadas abrirá a tela Histórico de Chamadas, mas a exibição de tabela estará vazia porque não há nenhum código para controlar e exibir os números de telefone.

Esse aplicativo armazenará os números de telefone como uma lista de cadeias de caracteres.

Adicione uma using diretiva para System.Collections.Generic na parte superior do ViewController:
```
using System.Collections.Generic;
```

Modifique a classe ViewController com o código a seguir:

using System;
using System.Collections.Generic;
using Foundation;
using UIKit;

namespace Phoneword_iOS
{
  public partial class ViewController : UIViewController
  {
    string translatedNumber = "";

    public List<string> PhoneNumbers { get; set; }

    protected ViewController(IntPtr handle) : base(handle)
    {
      //initialize list of phone numbers called for Call History screen
      PhoneNumbers = new List<string>();
    }

    public override void ViewDidLoad()
    {
      base.ViewDidLoad();
      // Perform any additional setup after loading the view, typically from a nib.

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

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

        //Store the phone number that we're dialing in PhoneNumbers
        PhoneNumbers.Add(translatedNumber);

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

    public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
    {
      base.PrepareForSegue(segue, sender);

      // set the view controller that’s powering the screen we’re
      // transitioning to

      var callHistoryController = segue.DestinationViewController as CallHistoryController;

      //set the table view controller’s list of phone numbers to the
      // list of dialed phone numbers

      if (callHistoryController != null)
      {
        callHistoryController.PhoneNumbers = PhoneNumbers;
      }
    }
  }
}

Há alguns pontos a observar aqui:

A variável translatedNumber passou do método ViewDidLoad para uma variável no nível de classe.
O código CallButton foi modificado para adicionar números discados à lista de números de telefone chamando PhoneNumbers.Add(translatedNumber).
O método PrepareForSegue foi adicionado.

Salve e compile o aplicativo para garantir que não haja erros.

Pressione o botão Iniciar para inicializar o aplicativo dentro do Simulador de iOS:

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

Passo a passo no Windows

Este passo a passo adicionará uma tela de Histórico de Chamadas ao nosso aplicativo Phoneword.

Abra o aplicativo Phoneword no Visual Studio. Lembre-se de que é necessário conectar-se a um Mac para usar o Designer do iOS e o Simulador de iOS.
Comece editando a interface do usuário. Abra o arquivo Main.Storyboard no Gerenciador de Soluções, certificando-se de que Exibir como esteja definido como iPhone 6:
Arraste um controlador de navegação da Caixa de Ferramentas para a superfície de design:
Arraste o Segue sem origem (a seta cinza à esquerda da cena Phoneword) da cena Phoneword para o controlador de navegação para alterar o ponto de partida do aplicativo:
Selecione o Controlador de exibição raiz clicando na barra preta e pressione Excluir para removê-lo da superfície de design. Em seguida, mova a cena Phoneword ao lado do controlador de navegação:
Defina o ViewController como o controlador de exibição raiz do controlador de navegação. Pressione a tecla Ctrl e clique dentro do Controlador de Navegação. Deve aparecer uma linha azul. Em seguida, ainda mantendo pressionada a tecla Ctrl, arraste do Controlador de Navegação para a cena Phoneword e solte. Isso se chama arrastar com Ctrl:
No pop-over, vamos definir as relações como Raiz:

O ViewController agora é nosso controlador de exibição raiz do controlador de navegação.
Na tela do Phoneword, clique duas vezes na barra de Título e altere o Título para Phoneword:
Arraste um botão da Caixa de Ferramentas e coloque-o sob o Botão Chamar. Arraste as alças para deixar o novo Botão com a mesma largura do Botão Chamar:
No Gerenciador de Propriedades, altere o Nome do Botão para CallHistoryButton e altere o Título para Histórico de Chamadas:
Crie a tela Histórico de Chamadas. Na Caixa de Ferramentas, arraste um controlador de exibição de tabela para a superfície de design:
Selecione o controlador de exibição de tabela clicando na barra preta na parte inferior da cena. No Gerenciador de Propriedades, altere a classe controlador de exibição de tabela para CallHistoryController e pressione Enter:

O Designer do iOS gerará uma classe de suporte personalizada chamada CallHistoryController para gerenciar a hierarquia de exibição de conteúdo dessa tela. O arquivo CallHistoryController.cs aparecerá no Gerenciador de Soluções:

Clique duas vezes no arquivo CallHistoryController.cs para abri-lo e substitua os conteúdos pelo seguinte código:

using System;
using Foundation;
using UIKit;
using System.Collections.Generic;

namespace Phoneword
{
    public partial class CallHistoryController : UITableViewController
    {
        public List<String> PhoneNumbers { get; set; }

        static NSString callHistoryCellId = new NSString ("CallHistoryCell");

        public CallHistoryController (IntPtr handle) : base (handle)
        {
            TableView.RegisterClassForCellReuse (typeof(UITableViewCell), callHistoryCellId);
            TableView.Source = new CallHistoryDataSource (this);
            PhoneNumbers = new List<string> ();
        }

        class CallHistoryDataSource : UITableViewSource
        {
            CallHistoryController controller;

            public CallHistoryDataSource (CallHistoryController controller)
            {
                this.controller = controller;
            }

            // Returns the number of rows in each section of the table
            public override nint RowsInSection (UITableView tableView, nint section)
            {
                return controller.PhoneNumbers.Count;
            }

            public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
            {
                var cell = tableView.DequeueReusableCell (CallHistoryController.callHistoryCellId);

                int row = indexPath.Row;
                cell.TextLabel.Text = controller.PhoneNumbers [row];
                return cell;
            }
        }
    }
}

Salve o aplicativo e compile-o para garantir que não haja erros. Não tem problema ignorar os avisos de build por enquanto.

Crie um segue (transição) entre uma cena do Phoneword e a cena do Histórico de Chamadas. Na Cena do Phoneword, selecione o Botão Histórico de Chamadas e pressione Ctrl e arraste do Botão para a cena Histórico de Chamadas:

No pop-over Segue de Ação, selecione Mostrar:

O Designer do iOS adicionará um segue entre as duas cenas:
Adicione um Título ao controlador de exibição de tabela selecionando a barra preta na parte inferior da cena e alterando o Título do controlador > de exibição para Histórico de Chamadas no Gerenciador de Propriedades:
Quando o aplicativo for executado, o Botão Histórico de Chamadas abrirá a tela Histórico de Chamadas, mas a exibição de tabela estará vazia porque não há nenhum código para controlar e exibir os números de telefone.

Esse aplicativo armazenará os números de telefone como uma lista de cadeias de caracteres.

Adicione uma using diretiva para System.Collections.Generic na parte superior do ViewController:
```
using System.Collections.Generic;
```

Modifique a classe ViewController com o código a seguir:

using System;
using System.Collections.Generic;
using Foundation;
using UIKit;

namespace Phoneword_iOS
{
  public partial class ViewController : UIViewController
  {
    string translatedNumber = "";

    public List<string> PhoneNumbers { get; set; }

    protected ViewController(IntPtr handle) : base(handle)
    {
      //initialize list of phone numbers called for Call History screen
      PhoneNumbers = new List<string>();
    }

    public override void ViewDidLoad()
    {
      base.ViewDidLoad();
      // Perform any additional setup after loading the view, typically from a nib.

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

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

        //Store the phone number that we're dialing in PhoneNumbers
        PhoneNumbers.Add(translatedNumber);

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

    public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
    {
      base.PrepareForSegue(segue, sender);

      // set the view controller that’s powering the screen we’re
      // transitioning to

      var callHistoryController = segue.DestinationViewController as CallHistoryController;

      //set the table view controller’s list of phone numbers to the
      // list of dialed phone numbers

      if (callHistoryController != null)
      {
        callHistoryController.PhoneNumbers = PhoneNumbers;
      }
    }
  }
}

Há alguns pontos a observar aqui

A variável translatedNumber foi movida do método ViewDidLoad para uma variável no nível de classe.
O código CallButton foi modificado para adicionar números discados à lista de números de telefone chamando PhoneNumbers.Add(translatedNumber)
O método PrepareForSegue foi adicionado

Salve e compile o aplicativo para garantir que não haja erros.

Pressione o botão Iniciar para inicializar o aplicativo dentro do Simulador de iOS:

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

Agora, o aplicativo pode lidar com navegação usando tanto segues de storyboard quanto código. Agora é hora de examinar as ferramentas e as habilidades que acabamos de aprender no Aprofundamento na multitela do Hello, iOS.

Diretrizes da interface humana do iOS

Partilhar via

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

Requisitos

Passo a passo no macOS

Passo a passo no Windows

Recursos adicionais

Partilhar via

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

Requisitos

Passo a passo no macOS

Passo a passo no Windows

Links relacionados

Recursos adicionais