На последнем уроке вы узнали об общих представлениях и элементах управления. Теперь вы можете применить эти знания на практике.
В этом уроке вы будете использовать Interface Builder для создания начального приложения под названием Hello, с помощью которого вы сможете представиться. Вы спланируете контент для приложения и начнете создавать его, добавляя ярлыки и изображение профиля.
Что Вы Узнаете
- Как настроить представления с помощью конструктора интерфейсов
- Как настроить ярлык
- Как настроить вид изображения
Терминология
Связанные ресурсы
В этом уроке вы спланируете и создадите простое приложение под названием Hello, которое вы могли бы использовать, чтобы представиться. В процессе работы вы будете применять то, что узнали о некоторых распространенных представлениях в UIKit.
Планирование приложения
Большинство приложений начинаются с простой идеи, которую обычно можно изложить в одном коротком предложении. Подумайте о приложениях, которые вы используете каждый день. Возможно, они начали со следующих простых идей:
- “Отправляйте и получайте сообщения”.
- “Делитесь фотографиями с моими друзьями и семьей”.
- “Отправляйте короткие сообщения и просматривайте короткие сообщения, написанные другими пользователями”.
Как разработчик приложений, вы узнаете, как составить краткий обзор приложения или функции из одного предложения и спланировать, как воплотить его в жизнь.
В этом проекте ваша задача - создать приложение для представления себя. Это руководство даст вам представление о том, что следует включить, но приложение познакомит вас с этим. Привнесите свои собственные идеи и сделайте их своими.
Подумайте о том, как бы вы представились кому-то, кого раньше не встречали. Какую информацию вы хотели бы, чтобы кто-то знал о вас? Начните с того, что запишите свое имя, затем потратьте несколько минут на то, чтобы записать то, что вы могли бы рассказать о себе. Используйте следующие подсказки, которые помогут вам получить достаточно информации для вашего приложения.
- Кто ты? Что представляет собой ваша жизнь?
- Как выглядит день в вашей жизни?
- Если бы у вас было столько времени и денег, сколько вам нужно, что бы вы делали со своей жизнью?
- Каковы некоторые из ваших любимых занятий или занятий?
Включите любую другую информацию, которую, по вашему мнению, другие люди хотели бы знать.
Иногда информация, которую вы хотите отобразить в приложении, является согласованной и никогда не меняется. В программировании эта информация называется статическими данными. Планируя свое приложение, вы проводите мозговой штурм статических данных о себе. В будущих приложениях вы будете работать с изменяющимися данными, которые называются динамическими данными.
Пример
## About Me
My name is Cynthia Yao. I’m a dedicated student, I play lacrosse,
I love animals, and I’m looking for an internship in Marine
Biology.
Location: Half Moon Bay, California
Website: www.example.com
## Day in the Life
Eat breakfast
Go to school
Go to lacrosse practice
Eat dinner
Hang out with friends
Watch TV
## When I Grow Up
I want to sail around the world, spend time in new countries,
learn new languages, and meet awesome people everywhere I go.
## Favorites
Food: Ice cream
Sport: Lacrosse
Book: A Tale of Two Cities
Когда вы получаете уникальную для вас информацию, вы, вероятно, можете представить себе множество способов ее отображения и обмена ею с другими. Для этого проекта попробуйте подумать о том, как вы могли бы отобразить эту информацию на одном экране.
Поскольку вы все еще находитесь на этапе планирования, вам может оказаться полезным открыть Pages или Keynote и создать приблизительный набросок данных, которые вы хотите отобразить в своем приложении.
Вероятно, вы обнаружите, что вся информация, которую вы хотите включить, не поместится на одном экране устройства iOS, а это значит, что вам нужно включить прокрутку. В этом уроке вы создадите первую часть проекта, добавив свое имя, изображение профиля и несколько предложений о себе. В следующем уроке вы завершите вторую часть, используя более продвинутые функции компоновки в Interface Builder для добавления изображений и надписей в режиме прокрутки.
Создайте проект
Создайте новый проект Xcode, используя шаблон приложения iOS. При создании проекта убедитесь, что для параметра интерфейс установлено значение Раскадровка. Назовите проект "Hello" и сохраните его в папке вашего проекта. 1
Введите Свою Информацию
Откройте главную раскадровку Main. Вы будете использовать начальную сцену для добавления своей информации. Поскольку ваше приложение всегда будет отображать одни и те же данные, вы можете создавать статические данные непосредственно на своих экранах, используя метки или изображения в Interface Builder. В будущих уроках вы научитесь писать код для отображения динамических данных.
Выбирая шрифты, цвета и другие настройки отображения, делайте все возможное, чтобы презентация выглядела аккуратно и подходила для устройства iOS. Избегайте нечитаемых шрифтов, конфликтующих цветовых схем и запутанных макетов текста. 2
При размещении видов используйте руководства по компоновке для центрирования содержимого, соблюдайте поля и допускайте достаточное расстояние между объектами. Вы также захотите избежать размещения содержимого в строке состояния в верхней части экрана. 3
Добавить метки для отображения текста
Для каждого из текстовых элементов, которые вы хотите включить, перетащите объект метки из библиотеки в сцену. Как минимум, добавьте ярлыки для своего имени и одно или два предложения о себе. Вы можете добавить остальное, когда закончите этот проект на следующем уроке.
Выбирая по одной метке за раз в раскадровке, используйте инспектор атрибутов, чтобы задать текст метки и выбрать подходящий шрифт. Если вы хотите, чтобы метка отображалась в качестве заголовка, сделайте шрифт крупнее или жирнее, чем текст по умолчанию. Вы хотите использовать пользовательский шрифт? Откройте всплывающее меню "Шрифт" и выберите "Пользовательский", чтобы выбрать один из всех шрифтов, установленных на вашем Mac. 4
Поэкспериментируйте с различными атрибутами в инспекторе, чтобы увидеть, как каждый из них изменяет внешний вид ваших меток. Например, вы можете изменить выравнивание текста или количество строк, которые вы хотите отобразить в надписи. По умолчанию метки отображают только одну строку текста, что может привести к отсечению любого оставшегося текста в конце строки.
При работе со статической информацией вы можете продолжать увеличивать количество строк, пока не увидите, что метка может отображать весь ваш текст. Но есть лучший способ, который позволяет тексту растекаться на столько строк, сколько необходимо для отображения всего предоставленного вами текста.
Посмотрите документацию для UILabel и найдите символ numberOfLines. В разделе Описания вы увидите следующий текст:
Это свойство определяет максимальное количество строк, которые необходимо использовать,
чтобы поместить текст метки в ее ограничивающий прямоугольник. Значение
по умолчанию для этого свойства равно 1. Чтобы снять любое максимальное
ограничение и использовать столько строк, сколько необходимо, установите значение этого
свойства равным 0.
Свойство numberOfLines полезно, когда вы хотите, чтобы метка отображала текст, выходящий за пределы одной строки. Не стесняйтесь ознакомиться с документацией для UILabel, чтобы узнать о других стратегиях размещения текста в метке.
Завершите добавление текста ко всем ярлыкам, которые вы хотите включить в свое приложение Hello.
Добавить изображение
Ваше знакомство было бы неполным без вашей фотографии. Если у вас еще нет понравившегося изображения, вы можете воспользоваться приложением Photo Booth, чтобы сделать селфи. Убедитесь, что файл изображения находится у вас под рукой на рабочем столе или в Finder. Если у вас есть еще изображения, у вас будет возможность добавить их в приложение на следующем уроке.
Теперь продолжайте и добавьте файл изображения в свою сцену, чтобы приложение отображало его.
Вот как добавить изображение в ваш проект Xcode:
- Откройте область навигатора Navigator area. Убедитесь, что область навигатора слева открыта и что в навигаторе проекта отображается список ваших файлов. Если вы работаете на маленьком экране, возможно, вам захочется закрыть область инспектора справа.
- Выберите Assets. Xcode автоматически добавил этот каталог активов в ваш проект. Это лучшее место для хранения изображений, которые вы будете использовать в своем приложении.
- Перетащите файл изображения. Добавьте изображение в раскадровку и дайте ему имя в структуре документа. Изображение теперь является частью вашего приложения.
Теперь, когда вы добавили свое изображение, вы можете настроить представление изображения в конструкторе интерфейсов. Вернитесь к основной раскадровке Main. Из библиотеки перетащите объект просмотра изображения на сцену.
Используя инспектор атрибутов, выберите имя вашего изображения во всплывающем меню Изображения. Это позволит присвоить это изображение только что созданному вами виду изображения.
На предыдущем уроке вы узнали, что представление изображения похоже на рамку вокруг изображения, которое оно будет отображать. Размер представления изображения определяет общий потенциальный размер отображения изображения. Установив режим содержимого для просмотра изображения, вы можете управлять тем, будет ли изображение отображаться в рамке, потенциально оставляя пустое пустое пространство, будет ли оно растягиваться, чтобы поместиться в рамке, потенциально искажая изображение, или если оно будет растягиваться, чтобы заполнить весь кадр, потенциально обрезая часть изображения.
В таблице ниже вы можете увидеть наиболее распространенные параметры contentMode для квадратного UIImageView, отображающего неквадратное изображение.
Scale to Fill |
Aspect Fit |
Aspect Fill |
| Изменен в соответствии с границами представления изображения | Сохранить соотношение сторон, изменить размер, чтобы все изображение вписывалось в границы представления изображения | Сохранение соотношения сторон, изменение размера для заполнения границ вида изображения, переполнение рамки вида изображения |
 |
 |
 |
Выберите правильный режим содержимого для изображения, которое вы добавили в свой проект.
Устраните проблемы С Компоновкой
Неожиданная Вырезка
Возможно, вы сталкивались со случайными предупреждениями или ошибками в вашем макете. Не беспокойся об этом прямо сейчас. В следующем уроке вы узнаете, как их устранить и как использовать более продвинутые параметры компоновки, включая автоматическую компоновку, в Interface Builder.
|
|
|
Interface Builder позволяет вам изменять это поведение или выбирать, будет ли отображаться содержимое за пределами представления. 5
Ошибки размещения при разных размерах экрана
Когда вы узнаете об автоматической компоновке, вы узнаете, как масштабировать свой интерфейс для различных размеров устройств. Но пока убедитесь, что вы настроили свой интерфейс на тот же размер устройства, который вы используете в симуляторе. Это гарантирует, что вы увидите согласованное представление во всех ваших проектах.
Отображение Большего Количества Контента
Теперь вы создали простое приложение с несколькими ярлыками и одним изображением в одном представлении. В уроке "Автоматическая компоновка и виды стека" вы узнаете, как использовать расширенные инструменты компоновки для позиционирования видов и как использовать вид прокрутки для добавления дополнительного содержимого.
Лабораторная работа — обучение по экрану
Цель этой лаборатории - создать учебное пособие о хобби, которое вам нравится. Вы будете использовать Interface Builder для настройки представления с соответствующими изображениями и текстом.
Создайте новый проект, используя шаблон "Приложение" для iOS, и назовите его "Учебное пособие по хобби".
Шаг 1
Создайте проект и добавьте изображения
- Выберите от трех до шести изображений, которые объясняют что-то о вашем хобби.
- Добавьте изображения в свой проект, перетащив их в Ресурсы.
- Назначьте соответствующие имена для каждого изображения в каталоге ресурсов.
Шаг 2
Настройка видов изображений
- Добавьте вид изображения в раскадровке для каждого из изображений. Используйте руководства по компоновке, чтобы настроить чистый, хорошо сбалансированный интерфейс. 6
Назначьте изображения видам изображений с помощью инспектора атрибутов. 7
Шаг 3
Настройте метки
- Для каждого изображения добавьте метку и введите краткое описание изображения в виде текста. Используйте соответствующий шрифт. 8
Отличная работа! Ярлыки и представления изображений - два наиболее распространенных представления для отображения данных в приложении. Потренируйтесь использовать ярлыки и изображения по-новому для отображения различных видов информации. Обязательно сохраните свой проект в папке проекта.
Подключение к дизайну
В Рабочей тетради по дизайну приложений подумайте о том, как вы можете воплотить содержимое своего приложения в жизнь. Вы только что получили практический опыт использования Interface Builder. Нужно ли вам использовать ярлык в вашем приложении? Как насчет просмотра изображения? Делайте комментарии в разделе Карты или на новом пустом слайде в конце документа.
В примере приложения Go Green для рабочей книги ярлыки будут использоваться на главном экране для предоставления информации рядом с каждым значком или для предоставления справочной информации об использовании корзины.
Отрывок из книги
Develop in Swift Fundamentals
Apple Education
https://books.apple.com/ru/book/develop-in-swift-fundamentals/id1581182804