Экраны запуска для приложений Xamarin.iOS

В этой статье объясняется, как создать экран запуска приложения для всех устройств iOS при любом разрешении и ориентации с помощью единой раскадровки.

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

Поддержка конструктора 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. Дополнительные сведения см. в статье Проектирование пользовательских интерфейсов с помощью Xcode.

До iOS 8 создание экрана запуска для приложения iOS требует от разработчика предоставить ресурс изображения для каждого из различных форм-факторов и разрешений устройств, в которых приложение может работать. Однако с момента выпуска iOS 8 было возможно использовать единый раскадровочный экран для создания экрана запуска, который выглядит правильно во всех случаях.

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

Управление экранами запуска с помощью раскадровки

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

Visual Studio для Mac

1. В Visual Studio для Mac создайте проект, выбрав > "Создать файл" и выбрав одно представление приложения:

   

   • По умолчанию новый проект содержит файл LaunchScreen.storyboard , определяющий интерфейс экрана запуска.
   • Чтобы добавить раскадровку экрана запуска в существующий проект, щелкните правой кнопкой мыши имя проекта на панели решения и нажмите кнопку "Добавить > новый файл", а затем нажмите кнопку "Запустить экран":

   

   • Назовите файл LaunchScreen или другое имя выбранного файла.

2. Настройте проект для использования соответствующего раскадровки для его экрана запуска:

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

   

   • По умолчанию новый проект настроен на использование LaunchScreen.storyboard в качестве экрана запуска.

3. Добавьте изображение в каталог активов Assets.xcassets , чтобы он был доступен для использования на экране запуска. Дополнительные сведения см. в разделе "Добавление изображений в набор образов каталога активов" руководства по отображению изображения.

4. Откройте launchScreen.storyboard для редактирования, дважды щелкнув его на панели решений.

5. Выберите устройство и ориентацию, на котором можно просмотреть раскадровку экрана запуска в конструкторе iOS. Откройте панель выбора устройства на нижней панели инструментов и выберите i Телефон 4S и Книжная.

   

   • Обратите внимание, что выбор устройства и ориентация изменяют только способ предварительного просмотра конструктора iOS. Независимо от выбранного здесь выбора, новые добавленные ограничения применяются ко всем устройствам и ориентациям, если кнопка "Изменить признаки " не использовалась для указания в противном случае.

6. Задайте цвет фона основного представления контроллера представления. Выберите представление, щелкнув в середине контроллера представления и настройте цвет фона с помощью панели свойств:

   

7. Добавьте представление изображения на экран запуска и задайте исходное изображение:

   • Перетащите представление изображения из панели элементов в центр представления.
   • Выбрав представление изображения, в разделе "Мини-приложение" панели свойств задайте свойству Image значение "Набор изображений", который уже добавлен в каталог активов.xcassets. Изменение положения и размер представления изображения по мере необходимости:

   

8. Добавьте метку под представлениемизображения и используйте панель свойств для задания его атрибутов:

   

9. Переключитесь в режим редактирования ограничений с помощью правой кнопки на панели инструментов ограничений:

   

10. Добавьте ограничения в представление изображения, задав высоту и ширину и центрируя его по горизонтали и вертикали:

    

    • Дополнительные сведения о добавлении ограничений см. в разделе "Автострока" с помощью конструктора Xamarin для iOS.

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

    

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

    

13. Сохраните изменения в раскадровке. Запустите приложение на симуляторе или устройстве, и экран запуска будет отображаться при запуске приложения.

Visual Studio

1. Создание проекта В Visual Studio выберите "Файл > нового > проекта > Visual C# > i Телефон & iPad > iOS App (Xamarin):

   

   Выберите шаблон приложения с одним представлением и нажмите кнопку ОК:

   

2. Если ресурсы > LaunchScreen.xib существуют в Обозреватель решений, удалите его, щелкнув файл правой кнопкой мыши и выбрав "Удалить". Этот файл будет заменен раскадровкой на следующем шаге.

3. Создайте раскадровки для использования в качестве экрана запуска. В Обозреватель решений щелкните проект правой кнопкой мыши и выберите "Добавить > новый элемент", а затем пустой раскадровки. Присвойте этому раскадровкам LaunchScreen.storyboard и нажмите кнопку "Добавить".

   

4. Настройте проект для использования LaunchScreen.storyboard в качестве раскадровки экрана запуска:

   • В обозревателе решений дважды щелкните файл Info.plist, чтобы открыть его для редактирования.
   • На вкладке "Визуальные ресурсы" установите для экрана запуска значениеLaunchScreen.

   

5. Добавьте изображение в каталог активов в проекте, чтобы он был доступен для использования на экране запуска:

   • В Обозреватель решений щелкните правой кнопкой мыши каталоги активов и выберите "Добавить каталог активов". Присвойте этому новому ресурсу каталога активов:

   

   • Добавьте новый набор изображений в каталог активов, как описано в разделе "Добавление изображений в набор образов каталога активов" руководства по отображению образа.

6. Откройте launchScreen.storyboard для редактирования, дважды щелкнув его в Обозреватель решений.

   • Чтобы изменить файл раскадровки, Visual Studio требует активного подключения к узлу сборки Mac. Дополнительные сведения см. в руководстве по Подключение в Mac.

7. Выберите устройство и ориентацию, на котором можно просмотреть раскадровку экрана запуска в конструкторе iOS. Откройте панель выбора устройства на нижней панели инструментов и выберите i Телефон 4S и Книжная:

   

   • Обратите внимание, что выбор устройства и ориентация изменяют только способ предварительного просмотра конструктора iOS. Независимо от выбранного здесь выбора, новые добавленные ограничения применяются ко всем устройствам и ориентациям, если кнопка "Изменить признаки " не использовалась для указания в противном случае.

8. Добавьте контроллер представления в раскадровку, перетащив один из элементов в область конструктора:

   

9. Задайте цвет фона основного представления контроллера представления. Выберите представление, щелкнув в середине контроллера представления и настройте цвет фона с помощью окна свойств:

   

10. Добавьте представление изображения на экран запуска и задайте исходное изображение:

    • Перетащите представление изображения из панели элементов в центр представления.
    • Если представление изображения по-прежнему выбрано, в разделе "Мини-приложение" окна "Свойства" задайте свойство Image Set уже добавлено в каталог активов. Изменение положения и размер представления изображения по мере необходимости:

    

11. Добавьте метку под представлением изображения:

    • Перетащите метку из панели элементов в область конструктора, поместив ее под представлением изображения.
    • Задайте атрибуты для метки с помощью окна свойств:

    

12. Переключитесь в режим редактирования ограничений с помощью правой кнопки на панели инструментов ограничений:

    

13. Добавьте ограничения в представление изображения, задав высоту и ширину и центрируя его по горизонтали и вертикали:

    

    • Сведения о добавлении ограничений см. в разделе "Автострока" с помощью конструктора Xamarin для iOS.

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

    

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

    

16. Сохраните изменения в раскадровке. Запустите приложение на симуляторе или устройстве, и экран запуска будет отображаться при запуске приложения.

Примечание.

Раскадровка, используемая в качестве экрана запуска, должна включать только простые встроенные элементы пользовательского интерфейса и не может выполнять вычисления или производные от пользовательского класса.

Дополнительные сведения о создании экрана запуска с помощью единой раскадровки см. в разделе "Экраны динамического запуска" руководства по унифицированным раскадровкам.

Переход на раскадровки экрана запуска

Visual Studio для Mac

При обновлении существующего приложения для использования раскадровки для экранов запуска щелкните правой кнопкой мыши имя проекта в Обозреватель решений и выберите "Добавить>новый файл...". Выберите экран запуска iOS>и нажмите кнопку "Создать":

Затем дважды щелкните Info.plist файл в Обозреватель решений, чтобы открыть его для редактирования. В разделе "Экран запуска" выберите новый файл раскадровки, созданный выше.

Чтобы использовать новый раскадровки в качестве экрана запуска, сделайте следующее:

1. Дважды щелкните Info.plist файл в Обозреватель решений, чтобы открыть его для редактирования.

2. Прокрутите страницу до раздела "Образы универсального запуска" редактора, откройте раскрывающийся список "Экран запуска" и выберите имя раскадровки, созданной выше:

   

Visual Studio

1. Щелкните правой кнопкой мыши имя проекта в Обозреватель решений и выберите "Добавить>новый файл...".

   

2. Введите имя экрана запуска и нажмите кнопку "Добавить ".

   

3. В Обозреватель решений дважды щелкните созданный файл раскадровки, чтобы открыть его для редактирования.

4. Убедитесь, что для класса size задано значение any:any и view As is Generic:

   

5. Сборка экрана запуска из классов размера, простых элементов пользовательского интерфейса (например UIImageView) и изображений, включенных в пакет приложения:

   

6. Сохраните изменения в раскадровке.

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

• Экраны динамического запуска (пример)
• Унифицированная раскадровка
• Основные сведения о конструкторе iOS
• Добавление изображений в набор образов каталога активов
• Автоматическая разметка с помощью конструктора Xamarin для iOS
• Рекомендации по интерфейсу человека: экран запуска