Привет, iOS (несколько экранов): краткое руководство

Статья
10/05/2018

Предупреждение

Поддержка конструктора iOS была прекращена в Visual Studio 2019 версии 16.8 и Visual Studio 2019 для Mac версии 8.8. В Visual Studio 2019 версии 16.9 и Visual Studio для Mac версии 8.9 этот конструктор удален. Создавать пользовательские интерфейсы iOS рекомендуется непосредственно на Mac с помощью Xcode Interface Builder. Дополнительные сведения см. в статье Проектирование пользовательских интерфейсов с помощью Xcode.

В этой части пошагового руководства вы добавите в приложение Phoneword второй экран с журналом телефонных номеров, на которые из приложения совершались звонки. Итоговое приложение будет иметь второй экран с журналом вызовов, как показано на следующем снимке экрана:

Прилагаемый подробный обзор описывает полученное приложение, а также затрагивает архитектуру, навигацию и другие новые понятия iOS, которые вам встретились.

Требования

Это руководство начинается с того момента, на котором заканчивается документ "Привет, iOS", поэтому вам нужно сначала изучить Привет, iOS: краткое руководство.

Пошаговое руководство для macOS

В этом пошаговом руководстве вы добавите в приложение Phoneword экран "Call History" (Журнал вызовов).

Откройте приложение Phoneword в Visual Studio для Mac.
Откройте файл Main.storyboard из Панели решения:
Перетащите контроллер навигации из панели элементов в область конструктора (чтобы уместить все элементы в этой области, может потребоваться уменьшить масштаб):
Перетащите элемент Sourceless Segue (Переход без источника) (это серая стрелка слева от контроллера представления) в контроллер навигации, чтобы изменить начальную точку приложения:
Выберите существующий контроллер корневого представления, щелкнув нижнюю панель, а затем нажмите клавишу DELETE, чтобы удалить его из области конструктора. Переместите сцену Phoneword к контроллеру навигации:
Задайте ViewController в качестве контроллера корневого представления у контроллера навигации. Нажмите и удерживайте клавишу CTRL и щелкните внутри контроллера навигации. Должна появиться синяя линия. Затем, продолжая удерживать клавишу CTRL, перетащите элементы из контроллера навигации в сцену Phoneword. Это называется перетаскиванием с удержанием клавиши CTRL:
В контекстном меню задайте связь Корень:

Теперь ViewController является контроллером корневого представления контроллера навигации:
Дважды щелкните Phoneword экрана заголовок панели и изменить заголовок для Phoneword:
Перетащите элемент Button из панели элементов и поместите его под элементом Call Button (Кнопка вызова). Перетащите маркеры, чтобы сделать новый элемент Button такой же ширины, что и элемент Call Button (Кнопка вызова):
На Панели свойств измените имя кнопки на CallHistoryButton, а заголовок — на Call History:
Создайте экран Call History (Журнал вызовов). Перетащите контроллер представления таблиц из панели элементов в область конструктора:
Затем выберите контроллер представления таблиц, щелкнув черную полосу в нижней части сцены. На Панели свойств измените класс контроллера представления таблиц на CallHistoryController и нажмите клавишу ВВОД:

Конструктор iOS создает пользовательский резервный класс CallHistoryController для управления иерархией представлений содержимого на этом экране. На Панели решения появляется файл CallHistoryController.cs:

Дважды щелкните файл CallHistoryController.cs, чтобы открыть его, и замените содержимое следующим кодом:

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

Сохраните приложение (⌘+S) и выполните его сборку (⌘+B), чтобы убедиться в отсутствии ошибок.

Создайте переход между сценой Phoneword и сценой Журнал вызовов. В сцене Phoneword выберите Кнопка журнала вызовов и, удерживая нажатой клавишу CTRL, перетащите из элемента Кнопка в сцену Журнал вызовов:

В контекстном меню Action Segue (Переход между действиями) выберите Показать.

Конструктор iOS добавляет переход между двумя сценами:
Добавьте Заголовок в контроллер представления таблиц, выбрав черную полосу в нижней части сцены и изменив Контроллер представления > Заголовок на Журнал вызовов на Панели свойств:
При запуске приложения Кнопка журнала вызовов откроет экран Журнал вызовов, однако представление таблиц будет пустым, так как отсутствует код для отслеживания и отображения телефонных номеров.

Это приложение сохраняет телефонные номера в виде списка строк.

Добавьте директиву using в верхней части ViewControllerSystem.Collections.Generic:
```
using System.Collections.Generic;
```

Измените класс ViewController с помощью следующего кода:

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

Здесь необходимо обратить внимание на несколько моментов.

Переменная translatedNumber перемещена из метода ViewDidLoad и сделана переменной уровня класса.
Код CallButton изменен, чтобы добавлять набранные номера в список телефонных номеров с помощью вызова PhoneNumbers.Add(translatedNumber).
Добавлен метод PrepareForSegue.

Сохраните изменения и выполните сборку приложения, чтобы убедиться в отсутствии ошибок.

Нажмите кнопку Запустить, чтобы запустить приложение в симуляторе iOS:

Поздравляем! Вы создали свое первое приложение Xamarin.iOS с несколькими экранами!

Пошаговое руководство для Windows

В этом пошаговом руководстве вы добавите в приложение Phoneword экран "Call History" (Журнал вызовов).

Откройте приложение Phoneword в Visual Studio. Не забывайте, что для подключения к Mac нужно использовать конструктор iOS и симулятор iOS.
Сначала измените пользовательский интерфейс. Откройте файл Main.storyboard в обозревателе решений и убедитесь, что в поле Просмотреть как задано значение iPhone 6:
Перетащите контроллер навигации из панели элементов в область конструктора:
Перетащите переход без источника (это серая стрелка слева от сцены Phoneword) из сцены Phoneword на контроллер навигации, чтобы изменить начальную точку приложения:
Выберите контроллер корневого представления, щелкнув черную полосу, а затем нажмите клавишу DELETE, чтобы удалить его из области конструктора. Переместите сцену Phoneword к контроллеру навигации:
Задайте ViewController в качестве контроллера корневого представления у контроллера навигации. Нажмите и удерживайте клавишу CTRL и щелкните внутри контроллера навигации. Должна появиться синяя линия. Затем, продолжая удерживать клавишу CTRL, перетащите элементы из контроллера навигации в сцену Phoneword. Это называется перетаскиванием с удержанием клавиши CTRL:
В контекстном меню задайте связь Корень:

Теперь ViewController является контроллером корневого представления у контроллера навигации.
Дважды щелкните Phoneword экрана заголовок панели и изменить заголовок для Phoneword:
Перетащите элемент Button из панели элементов и поместите его под элементом Call Button (Кнопка вызова). Перетащите маркеры, чтобы сделать новый элемент Button такой же ширины, что и элемент Call Button (Кнопка вызова):
В обозревателе свойств измените Имя с Button на CallHistoryButton и измените Заголовок на Call History (Журнал вызовов):
Создайте экран Call History (Журнал вызовов). Перетащите контроллер представления таблиц из панели элементов в область конструктора:
Выберите контроллер представления таблиц, щелкнув черную полосу в нижней части сцены. В обозревателе свойств измените класс контроллера представления таблиц на CallHistoryController и нажмите клавишу ВВОД:

Конструктор iOS создает пользовательский резервный класс CallHistoryController для управления иерархией представлений содержимого на этом экране. В обозревателе решений появляется файл CallHistoryController.cs:

Дважды щелкните файл CallHistoryController.cs, чтобы открыть его, и замените содержимое следующим кодом:

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

Сохраните приложение и выполните его сборку, чтобы убедиться в отсутствии ошибок. На данном этапе можно игнорировать любые предупреждения сборки.

Создайте переход между сценой Phoneword и сценой Журнал вызовов. В сцене Phoneword выберите Кнопку журнала вызовов и, удерживая нажатой клавишу CTRL, перетащите из элемента Кнопка в сцену Журнал вызовов:

В контекстном меню Action Segue (Переход между действиями) выберите Показать:

Конструктор iOS добавляет переход между двумя сценами:
Добавьте заголовок в контроллер представления таблицы, выбрав черную панель в нижней части сцены и изменив заголовок контроллера > представления на журнал вызовов в Обозреватель свойств:
При запуске приложения Кнопка журнала вызовов откроет экран Журнал вызовов, однако представление таблиц будет пустым, так как отсутствует код для отслеживания и отображения телефонных номеров.

Это приложение сохраняет телефонные номера в виде списка строк.

Добавьте директиву using в верхней части ViewControllerSystem.Collections.Generic:
```
using System.Collections.Generic;
```

Измените класс ViewController с помощью следующего кода:

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

Здесь необходимо обратить внимание на несколько моментов.

Переменная translatedNumber перемещена из метода ViewDidLoad в переменную уровня класса.
Код CallButton изменен, чтобы добавлять набранные номера в список телефонных номеров с помощью вызова PhoneNumbers.Add(translatedNumber).
Добавлен метод PrepareForSegue.

Сохраните изменения и выполните сборку приложения, чтобы убедиться в отсутствии ошибок.

Нажмите кнопку Запустить, чтобы запустить приложение в симуляторе iOS.

Поздравляем! Вы создали свое первое приложение Xamarin.iOS с несколькими экранами!

Теперь приложение может обрабатывать навигацию как с помощью переходов, так и в коде. Пришло время закрепить и углубить приобретенные знания и навыки — вас ждет раздел Привет, iOS (несколько экранов). Подробные сведения.

Рекомендации по работе с человеческим интерфейсом iOS

Поделиться через

Привет, iOS (несколько экранов): краткое руководство

Требования

Пошаговое руководство для macOS

Пошаговое руководство для Windows

Дополнительные ресурсы

Поделиться через

Привет, iOS (несколько экранов): краткое руководство

Требования

Пошаговое руководство для macOS

Пошаговое руководство для Windows

Связанные ссылки

Дополнительные ресурсы