Краткое руководство по приложению "Привет, 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.

Это руководство описывает создание приложения, которое преобразует введенный пользователем буквенно-цифровой телефонный номер в числовой телефонный номер и затем набирает его. Окончательный вариант приложения выглядит примерно так:

Требования

Для разработки на iOS с помощью Xamarin требуется следующее:

Компьютер Mac под управлением macOS High Sierra 10.13 или последующей версии.
Последняя версия Xcode и пакета SDK iOS из App Store.

Xamarin.iOS работает со следующими конфигурациями:

Последняя версия Visual Studio для Mac, удовлетворяющая указанным выше требованиям.

Пошаговые инструкции по установке см. в руководстве по установке Xamarin.iOS на Mac.

Xamarin.iOS работает со следующими конфигурациями:

Последняя версия Visual Studio 2019 или Visual Studio 2017 Community, Professional или Enterprise на базе Windows 10 или более поздней версии, связанная с узлом сборки Mac, удовлетворяющим указанным выше требованиям.

Пошаговые инструкции по установке см. в руководстве по установке Xamarin.iOS в Windows.

Перед началом работы скачайте набор значков приложения Xamarin.

Пошаговое руководство по Visual Studio для Mac

Это пошаговое руководство описывает создание приложения Phoneword, которое преобразует буквенно-цифровой телефонный номер в числовой.

Запустите Visual Studio для Mac из папки Applications (Приложения) или из Spotlight:

На экране запуска нажмите кнопку Новый проект... , чтобы создать новое решение Xamarin.iOS:
В диалоговом окне "Новое решение" выберите шаблон приложения единого представления приложения > iOS>, гарантируя выбор C# . Щелкните Далее.
Настройте приложение. Присвойте ему имя Phoneword_iOS, а для остальных параметров сохраните значения по умолчанию. Щелкните Далее.
Оставьте имеющееся имя для проекта и решения. Выберите расположение проекта или оставьте значение по умолчанию:
Нажмите кнопку Создать, чтобы создать Решение.
Откройте файл Main.storyboard, дважды щелкнув его на Панели решения. Убедитесь, что файл открыт с помощью конструктора iOS Visual Studio (щелкните правой кнопкой мыши раскадровки и выберите "Открыть с помощью > конструктора iOS"). Это позволяет создавать пользовательский интерфейс визуально:

Обратите внимание на то, что классы размера включены по умолчанию. Чтобы узнать о них подробнее, см. руководство по унифицированным раскадровкам.
Откройте панель элементов, введите "метка" в поле поиска и перетащите элемент Метка в область конструктора (в центре):

Примечание.

Вы можете открыть панель свойств или панель элементов в любое время, перейдя к панели просмотра>.
Используя маркеры перетаскивания элементов управления (кружки вокруг элемента управления), сделайте метку шире:
Выбрав элемент Метка в области конструктора, используйте Панель свойств, чтобы изменить свойство Текст элемента Метка на "Enter a Phoneword" (Введите слово-номер):
Выполните поиск строки "текстовое поле" на панели элементов и перетащите элемент Текстовое поле с панели элементов в область конструктора, поместив его под элементом Метка. Измените ширину, чтобы элемент Текстовое поле был такой же ширины, что и Метка:
Выбрав элемент Текстовое поле в области конструктора, измените для текстового поля свойство Имя в разделе "Удостоверение" на панели свойств, указав новое значение PhoneNumberText, а для свойства Текст введите "1-855-XAMARIN":
Перетащите элемент Кнопка из панели элементов в область конструктора и поместите его под элементом Текстовое поле. Настройте ширину элемента Кнопка, чтобы выровнять его с элементами Текстовое поле и Метка:
Выбрав элемент Кнопка в области конструктора, измените свойство Имя в разделе УдостоверениеПанели свойств на TranslateButton. Измените значение свойства Заголовок на "Translate" (Преобразовать):
Повторите два предыдущих действия, перетащите элемент Кнопка из панели элементов в область конструктора и поместите его под первым элементом Кнопка. Настройте ширину элемента Кнопка, чтобы выровнять его с первым элементом Кнопка:
Выбрав второй элемент Кнопка в области конструктора, измените свойство Имя в разделе УдостоверениеПанели свойств на CallButton. Измените значение свойства Заголовок на "Call" (Вызов):

Сохраните изменения, перейдя к файлу > сохранения или нажав клавиши ctrl + s.
В приложение нужно добавить логику для преобразования телефонных номеров из буквенно-цифровых в цифровые. Добавьте новый файл в проект, щелкнув правой кнопкой мыши проект Phoneword_iOS на панели решения и нажав кнопку "Добавить > новый файл" или нажав клавиши " + n:
В диалоговом окне "Новый файл" выберите "Общий > пустой класс" и назовите новый файлPhoneTranslator:

Создается пустой класс C#. Удалите код шаблона и замените его следующим:

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

Сохраните файл PhoneTranslator.cs и закройте его.

Добавьте код для подключения пользовательского интерфейса. Для этого дважды щелкните файл ViewController.cs на Панели решения, чтобы открыть его:

Начните с подключения TranslateButton. Найдите метод ViewDidLoad в классе ViewController и добавьте следующий код под вызовом 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;
    }
};

Включите using Phoneword_iOS;, если пространство имен файла отличается.

Добавьте код, реагирующий на нажатие пользователем второй кнопки, которая называется CallButton. Поместите следующий код после кода для TranslateButton и добавьте using Foundation; в начало файла:

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

Сохраните изменения, а затем создайте приложение, выбрав "Построить > все " или нажав клавишу " " + B". Если приложение компилируется, в верхней части интегрированной среды разработки появится сообщение об успешном выполнении:

При наличии ошибок просмотрите предыдущие шаги и исправьте все ошибки, пока сборка приложения не будет проходить успешно.
Наконец, протестируйте приложение в симуляторе iOS. В верхнем левом углу интегрированной среды разработки выберите значение Отладка в первом раскрывающемся списке и iPhone XR iOS 12.0 или другой доступный симулятор во втором, а затем нажмите кнопку Запустить (треугольная кнопка, которая напоминает кнопку воспроизведения):

Примечание.

Сейчас, в связи с требованиями Apple, при создании кода для устройства или симулятора может потребоваться сертификат разработки или удостоверение подписывания. Чтобы настроить их, следуйте указаниям в руководстве по подготовке устройств.
В результате приложение запускается в симуляторе iOS:

Симулятор iOS не поддерживает телефонные звонки; при попытке выполнить вызов отображается диалоговое окно предупреждения:

Пошаговое руководство по Visual Studio

Примечание.

В этом пошаговом руководстве используется Visual Studio Enterprise 2017 на виртуальной машине Windows 10. Ваша конфигурация может отличаться при условии соблюдения приведенных выше требований, но имейте в виду, что некоторые снимки экрана могут отличаться от вашей конфигурации.

Примечание.

Прежде чем продолжить работу с пошаговым руководством, вам нужно подключиться к компьютеру Mac из Visual Studio. Это вызвано тем, что Xamarin.iOS использует инструменты Apple при сборке и запуске приложений. Настройка описана в инструкциях из руководства по связыванию с компьютером Mac.

Запустите Visual Studio из меню Пуск:

Создайте новое решение Xamarin.iOS, выбрав файл > нового > проекта... > Visual C# > iPhone и iPad iOS > App (Xamarin):

В следующем диалоговом окне выберите шаблон Приложение с одним представлением и нажмите OK, чтобы создать проект:
Убедитесь, что значок агента Mac Xamarin на панели инструментов отображается зеленым цветом.

Если это не так, то есть отсутствует подключение к компьютеру сборки Mac, выполните инструкции из руководства по выбору конфигурации, чтобы настроить подключение.
Откройте файл Main.storyboard в конструкторе iOS, дважды щелкнув его в обозревателе решений:
Откройте вкладку Панель элементов, введите "метка" в поле поиска и перетащите элемент Метка в область конструктора (в центре):
Захватите маркеры перетаскивания и растяните метку в стороны:
Выбрав элемент Метка в области конструктора, используйте окна свойств, чтобы изменить свойство Текст элемента Метка на "Enter a Phoneword" (Введите слово-номер):

Примечание.

Вы можете открыть Свойства или Панель элементов в любое время. Для этого перейдите в меню Вид.
Выполните поиск строки "текстовое поле" на панели элементов и перетащите элемент Текстовое поле с панели элементов в область конструктора, поместив его под элементом Метка. Измените ширину, чтобы элемент Текстовое поле был такой же ширины, что и Метка:
Выбрав элемент Текстовое поле в области конструктора, измените егосвойствоИмя в разделе "Удостоверение" свойств на PhoneNumberText, а также измените свойство Текст на "1-855-XAMARIN":
Перетащите элемент Кнопка из панели элементов в область конструктора и поместите его под элементом Текстовое поле. Настройте ширину элемента Кнопка, чтобы выровнять его с элементами Текстовое поле и Метка:
Выбрав элемент Кнопка в области конструктора, измените свойство Имя в разделе Удостоверениесвойств на TranslateButton. Измените значение свойства Заголовок на "Translate" (Преобразовать):
Повторите два предыдущих действия, перетащите элемент Кнопка из панели элементов в область конструктора и поместите его под первым элементом Кнопка. Настройте ширину элемента Кнопка, чтобы выровнять его с первым элементом Кнопка:
Выбрав второй элемент Кнопка в области конструктора, измените свойство Имя в разделе Удостоверениесвойств на CallButton. Измените значение свойства Заголовок на "Call" (Вызов):

Сохраните изменения, перейдя к файлу > "Сохранить все" или нажав клавиши CTRL+s.
Добавьте код, который преобразует телефонные номера из буквенно-цифровой записи в цифровую. Для этого сначала добавьте новый файл в проект, щелкнув правой кнопкой мыши проект Phoneword в Обозреватель решений и выбрав "Добавить > новый элемент" или нажав клавиши CTRL+SHIFT+A:
В диалоговом окне "Добавить новый элемент" (щелкните проект правой кнопкой мыши, выберите "Добавить > новый элемент..."), выберите класс Apple > и назовите новый файлPhoneTranslator:

Внимание

Убедитесь, что выбран шаблон класса, в значке которого указан C#. В противном случае ссылка на этот класс может быть невозможна.

Создается класс C#. Удалите код шаблона и замените его следующим:

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

Сохраните файл PhoneTranslator.cs и закройте его.

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

Начните с подключения TranslateButton. В классе ViewController найдите метод ViewDidLoad. Добавьте следующий код кнопки внутрь ViewDidLoad, под вызовом 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;
        }
};

Включите using Phoneword;, если пространство имен файла отличается.

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

Сохраните изменения, а затем создайте приложение, выбрав "Построить решение сборки>" или нажав клавиши CTRL+SHIFT+B. Если приложение компилируется, сообщение об успешном выполнении появится в нижней части интегрированной среды разработки:

При наличии ошибок просмотрите предыдущие шаги и исправьте все ошибки, пока сборка приложения не будет проходить успешно.
Наконец, протестируйте приложение в удаленном симуляторе iOS. На панели инструментов интегрированной среды разработки выберите Отладка и iPhone 8 Plus iOS x.x в раскрывающихся меню и щелкните значок Запустить (зеленый треугольник, похожий на кнопку воспроизведения):
В результате приложение запускается в симуляторе iOS:

Симулятор iOS не поддерживает телефонные звонки; при попытке выполнить вызов отображается диалоговое окно предупреждения: