Как и каждая итерация iOS, iOS 9 предлагает множество новых функций. UIKit меняется с каждым выпуском iOS, но одно конкретное дополнение в iOS 9 изменит то, как разработчики в основном думают о создании пользовательских интерфейсов на iOS, UIStackView . В этом руководстве вы узнаете, как использовать UIStackView для создания пользовательских интерфейсов.
В этой статье предполагается, что вы знакомы с основами Auto Layout. Если этот предмет для вас является новым, то наше начальное руководство по автоматической компоновке — хорошее место для начала. Чтобы понять, почему представления стеков так полезны и как они работают, требуется четкое понимание автоматической разметки.
1. Demo Preview
Используя UIStackView , мы собираемся создать макет экрана, который предлагает пользователю оставить оценку для своего приложения. Пользователь может добавлять или удалять звезды в пользовательском интерфейсе, чтобы указать их рейтинг. Это будет выглядеть так, когда мы закончим.
Загрузите стартовый проект с GitHub и откройте его. Вы увидите, что внутри Main.Storyboard есть два стека.
Мы будем использовать два представления стека для разметки пользовательского интерфейса. Прежде чем мы начнем кодировать, давайте сначала кратко рассмотрим работу стека.
2. Обзор UIStackView
По своей сути, представление стека является интерфейсом для размещения нескольких подпредставлений, как вертикальных, так и горизонтальных. Если у вас есть опыт разработки под Android, он похож на LinearLayout управления LinearLayout .
Одним из основных преимуществ стекового представления является то, что оно автоматически создает ограничения Auto Layout для каждого добавляемого в него подпредставления. У вас также есть конечный контроль над размерами и позиционированием этих подпредставлений. Существуют параметры для настройки размеров представлений, где они должны быть расположены, а также того, сколько отступов должно быть между подпредставлениями.
Выкладывание контента
Чтобы просмотреть параметры стека, откройте Main.Storyboard и выберите один из стеков. В инспекторе атрибутов обратите внимание на параметры, перечисленные в представлении стека .
Ось определяет, упорядочивает ли представление стека свои подпредставления горизонтально или вертикально.Выравнивание контролирует, как фактические подпредставления должны быть выровнены.Распределение определяет размер подпредставлений, а Spacing контролирует минимальный интервал между подпредставлениями стекового представления.
Чтобы упростить эти термины, подумайте об этом так.Alignment управляет значениями X и Y, а Distribution —высотой и шириной . Два других значения также могут влиять на выравнивание.Относительная базовая линия, если отмечена, будет выводить вертикальное расстояние каждого подпредставления от его базовой линии.Относительные поля макета размещает подпредставления относительно стандартных полей макета, если они выбраны.
Еще одна важная вещь, которую следует помнить при работе со стековым представлением, это то, что он построен как контейнерное представление. Из-за этого это не рендеринг подкласса UIView . Это не рисовать на холст, как другие подклассы UIView . Это означает, что установка свойств, таких как backgroundColor или переопределение drawRect: метод, не повлияет на представление стека.
subviews и arrangedSubviewssubviews
Перед тем, как мы начнем работать с представлениями стека, я бы хотел остановиться на разнице между свойствами subViews и subViews представления стека. Если вы хотите добавить подпредставление для управления стека, вы можете сделать это, вызвав addArrangedSubview : или insertArrangedSubview:atIndex: Массив arrangedSubViewssubViews является подмножеством своего свойства subViews .
Чтобы удалить подпредставление, которым управляет представление стека, необходимо вызвать какremoveArrangedSubview: и removeFromSuperview . Удаление упорядоченного подпредставления гарантирует, что представление стека больше не будет управлять ограничениями этого представления. Это не исключает его из иерархии представлений. Это очень важно помнить.
Теперь, когда у нас есть четкое понимание того, как работает представление стека, давайте начнем использовать представление стека.
3. Настройка вертикального стека
Откройте Main.Storyboard и выберите вид верхнего стека. В инспекторе атрибутов внесите следующие изменения:
установить выравнивание по центру
установить Распределениеравным интервалом
установите интервал30
Это скажет стековому представлению попытаться добавить ограничения, которые центрируют все подпредставления по вертикали и размер их так, чтобы они равномерно заполняли ось стекового вида. Кроме того, это добавит 30 пунктов отступа к подпредставлениям.
Если подпредставления не могут уместиться в представлении стека, оно будет сокращать их в зависимости от их соответствующих приоритетов сопротивления сжатию. Это может произойти, если вы добавите подпредставления в представление стека во время выполнения, как мы увидим позже.
Если есть какая-то двусмысленность, представление стека отступит к сокращению подпредставлений, основанных на их индексе в его массиве arrangedSubviews Subviews, пока они не соответствуют границам представления стека.
Добавьте метку, представление изображения и кнопку в представление верхнего стека, перетащив их в контур документа. Убедитесь, что метка сверху, изображение в середине и кнопка внизу. Схема раскадровки должна выглядеть следующим образом после добавления этих подпредставлений:
Далее нам нужно отредактировать некоторые свойства только что добавленных подпредставлений, используя инспектор атрибутов. Для ярлыка измените его текст на «Как вам наше приложение?» и выберите Центрвыравнивания текста . Что касается вида изображения, введите «логотип» для изображения и ASpect Fit для режима содержимого . Для кнопки установите ее текст на «Добавить звездочку!».
Идите вперед и запустите приложение. Вы увидите, что с очень небольшим трудом вы добавили три подпредставления, которые реагируют на любые изменения в ориентации, классе размера и т. Д. Фактически вам даже не нужно было добавлять какие-либо ограничения вручную.
Во время работы приложения нажмите кнопку « Отладка иерархии представлений» в нижней части окна XCode, чтобы начать отладку в режиме реального времени .
Выберите любой из трех подпредставлений, которые вы добавили ранее. Посмотрите на инспектор размера и обратите внимание на ограничения, добавленные представлением стека. На рисунке ниже показаны ограничения, добавленные для кнопки.
5. Добавление звезд
Кнопка для добавления звездочек в наше макетное приложение еще не подключена. Давайте исправим это сейчас. Остановите приложение и откройте раскадровку. Создайте IBAction с именем addStar для события Touch Up Inside .
Добавьте следующий код в метод addStar(_:) :
1
2
3
4
5
6
7
@IBAction func addStar(sender: AnyObject) {
let starImgVw:UIImageView = UIImageView(image: UIImage(named: «star»))
Мы добавляем изображение звезды в горизонтальный вид стека с анимацией. Помните, поскольку представления стека управляют ограничениями Auto Layout для нас, нам нужно только вызвать layoutIfNeeded для создания анимации.
Создайте и снова запустите приложение и добавьте звездочку. Вы увидите, что конечный результат — это не то, на что мы надеялись.
Если вы посмотрите на Инспектор атрибутов с выбранным представлением нижнего стека, проблема должна быть ясна. Поскольку для выравнивания и распределения задано значение Fill , представление стека растягивает звезду, чтобы заполнить ее границы.
Это также вызовет больше проблем, когда будет добавлено больше звездочек. Мы хотим, чтобы звезды были центрированы, а не растянуты, чтобы соответствовать ширине стека. Измените выравнивание по центру и распределение для равного заполнения . Наконец, обновите метод addStar(_:) , установив режим содержимого представления изображения в Aspect Fit .
1
2
3
4
5
6
7
8
@IBAction func addStar(sender: AnyObject) {
let starImgVw:UIImageView = UIImageView(image: UIImage(named: «star»))
Создайте и запустите приложение еще раз. Добавьте несколько звездочек и обратите внимание, как представление стека правильно центрирует их вдоль своей оси.
6. Вложенные представления стека
Наше приложение не очень помогло бы без возможности удалять звезды. Откройте раскадровку и добавьте горизонтальное представление стека в иерархию представления верхнего стека. Убедитесь, что он расположен под изображением логотипа и над кнопкой.
Перетащите «Добавить звезду!» кнопка внутри вновь добавленного стека и добавьте вторую кнопку в новый вид стека. Измените заголовок кнопки на «Удалить звездочку» и выберите красный цвет текста. Структура документа теперь должна выглядеть следующим образом:
Измените атрибуты нового представления стека в Инспекторе атрибутов, внеся следующие изменения:
установить выравнивание по центру
установить Распределениеравным интервалом
установите интервал10
7. Удаление звезд
Создайте IBAction для кнопки «Удалить звезду» с именем removeStar для события Touch Up Inside .
Создайте и запустите приложение. Теперь вы сможете добавлять и удалять звезды. Измените ориентацию симулятора iOS или поверните тестирующее устройство, чтобы увидеть, как приложение ведет себя, настраивая его пользовательский интерфейс. Помните, что мы создали пользовательский интерфейс этого приложения, не добавляя вручную одно ограничение.
Помните, что вызов removeFromSuperview в removeStar(_:) необходим для удаления подпредставления из иерархии представлений. Напомним, что removeArrangedSubview(_:) только сообщает стековому представлению, что ему больше не нужно управлять ограничениями подпредставления. Однако подпредставление остается в иерархии представлений до тех пор, пока мы не удалим его из removeFromSuperview вызвав для него removeFromSuperview .
Вывод
Класс UIStackView значительно упрощает разработку пользовательских интерфейсов. Это хорошо, особенно когда оборудование, на котором работает приложение, может сильно различаться. С UIStackView разработчики могут тратить меньше времени на установку утомительных ограничений для простых сценариев, перенося тяжелую работу на UIKit.
Если вы застряли во время этого урока, не стесняйтесь загрузить готовый проект с GitHub .
