iOS. Приемы программирования Нахавандипур Вандад

NSString *const kHConstraint = @"H:|-[_bottomGrayView]-|";

NSString *const kVConstraint =

@"V:|-[_topGrayView]-[_bottomGrayView(==100)]";

/* Горизонтальные ограничения */

[constraints addObjectsFromArray:

[NSLayoutConstraint constraintsWithVisualFormat: kHConstraint

options:0

metrics: nil

views: views]

];

/* Вертикальные ограничения */

[constraints addObjectsFromArray:

[NSLayoutConstraint constraintsWithVisualFormat: kVConstraint

options:0

metrics: nil

views: views]

];

[self.bottomGrayView.superview addConstraints: constraints];

}

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

Следующий и, пожалуй, последний компонент пользовательского интерфейса, для которого мы собираемся написать ограничения, — это кнопка, расположенная в нижнем сером виде. Метод, который будет заниматься ее ограничениями, называется applyConstraintsToButtonOnBottomGrayView. Перед тем как его реализовать, обсудим требования, которым должны соответствовать ограничения для нижней кнопки:

• кнопка должна быть вертикально центрирована в нижнем сером виде;

• ее левый край должен быть выровнен по правому краю кнопки, находящейся в верхнем сером виде;

• с ней не должны применяться строго определенные значения высоты и ширины; ее высота и ширина должны зависеть от содержимого — в данном случае от текста Button, который мы на ней записываем.

— (void) applyConstraintsToButtonOnBottomGrayView{

NSDictionary *views = NSDictionaryOfVariableBindings(_topButton,

_bottomButton);

NSString *const kHConstraint = @"H:[_topButton][_bottomButton]";

/* Горизонтальные ограничения */

[self.bottomGrayView.superview addConstraints:

[NSLayoutConstraint constraintsWithVisualFormat: kHConstraint

options:0

metrics: nil

views: views]

];

/* Вертикальные ограничения */

[self.bottomButton.superview addConstraint:

[NSLayoutConstraint constraintWithItem: self.bottomButton

attribute: NSLayoutAttributeCenterY

relatedBy: NSLayoutRelationEqual

toItem: self.bottomGrayView

attribute: NSLayoutAttributeCenterY

multiplier:1.0f

constant:0.0f]

];

}

Наконец, мы должны удостовериться в том, что контроллер вида сообщает среде времени исполнения, что он может обрабатывать любые варианты ориентации. Ведь именно этот аспект наиболее сильно интересовал нас в данном разделе. Поэтому мы переопределим метод supportedInterfaceOrientations в виде UIViewController:

— (NSUInteger) supportedInterfaceOrientations{

return UIInterfaceOrientationMaskAll;

}

Итак, работа с этим контроллером вида завершена. Запустим приложение и посмотрим, как оно работает при книжной ориентации (рис. 3.7).

Рис. 3.7. Приложение отображает компоненты пользовательского интерфейса в книжной ориентации согласно требованиям, которые мы предъявили

А теперь момент истины! Будет ли оно работать в альбомном режиме? Попробуем (рис. 3.8).

Рис. 3.8. Как и ожидалось, тот же самый код отлично работает и при альбомной ориентации экрана

Отлично! Все получилось.

См. также

Раздел 3.0.

3.4. Конфигурирование ограничений автоматической компоновки в конструкторе интерфейсов

Постановка задачи

Требуется задействовать весь потенциал конструктора интерфейсов для создания ограничений при работе с пользовательским интерфейсом.

Решение

Выполните следующие шаги.

1. Откройте в конструкторе интерфейсов файл XIB или файл раскадровки, который вы собираетесь редактировать.

2. Убедитесь, что в конструкторе интерфейсов вы выбрали объект вида, в котором собираетесь активизировать автоматическую компоновку. Просто щелкните на этом объекте.

3. Щелкните на элементе меню View — Utilities — Show File Inspector (Вид — Утилиты — Показать инспектор файлов).

4. Убедитесь, что в элементе File Inspector (Инспектор файлов) в разделе Interface Builder Document (Документ конструктора интерфейсов) установлен флажок Use Autolayout (Использовать автоматическую компоновку) (рис. 3.9).

Рис. 3.9. Активизируем автоматическую компоновку в конструкторе интерфейсов

Обсуждение

Конструктор интерфейсов значительно упрощает для программиста создание ограничений, причем наше участие в этом сводится к минимуму. До того как в iOS появилась возможность автоматической компоновки, приходилось, как правило, пользоваться специальными ориентировочными панелями (guideline bars). Эти панели появлялись на экране, пока вы перемещали компоненты пользовательского интерфейса. Ориентировочные панели были связаны с масками для автоматической подгонки размеров, которые вы могли создавать и в коде, точно так же, как ограничения. Но после того, как в конструкторе интерфейсов будет установлен флажок Use Autolayout (Использовать автоматическую компоновку), ориентировочные панели приобретут несколько иное значение. Теперь они сообщают о тех ограничениях, которые создает для вас в фоновом режиме сам конструктор интерфейсов.

Немного поэкспериментируем. Создадим в Xcode приложение с одним видом (Single View Application). Таким образом, будет создано приложение, содержащее всего один контроллер вида. Этот контроллер вида будет относиться к классу ViewController, а. xib-файл для него будет называться ViewController.xib. Просто щелкните на этом файле, чтобы конструктор интерфейсов открыл его. Убедитесь, что в инспекторе файлов установлен флажок Use Autolayout (Использовать автоматическую компоновку) так, как описано в подразделе «Решение» этого раздела.

Теперь просто найдите в библиотеке объектов кнопку (Button) и перетащите ее в центр экрана. Дождитесь, пока в конструкторе интерфейсов появятся ориентировочные панели, по которым будет понятно, что центр кнопки соответствует центру экрана. В меню Edit (Правка) установите флажок Show Document Outline (Показать структуру документа). Если у вас в конструкторе интерфейсов уже открыт раздел Document Outline (Структура документа), то вместо Show Document Outline (Показать структуру документа) на этом месте будет отображаться надпись Hide Document Outline (Скрыть структуру документа) — в таком случае ничего делать не надо. Теперь найдите в разделе Document Outline (Структура документа) новый подраздел, отмеченный голубым цветом. Он был создан специально для вас и называется Constraints (Ограничения). Раскройте ограничения, созданные конструктором интерфейсов для этой кнопки. То, что вы теперь увидите, должно напоминать рис. 3.10.

Рис. 3.10. Конструктор интерфейсов создал ограничения компоновки

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

См. также

Раздел 3.0.

Читать бесплатно другие книги:

Рассмотрены основы информатики и описаны современные аппаратные средства персонального компьютера. С...
Молодые парни из экстремистской организации «Русский трибунал» объявили партизанскую войну «предател...
Покончив с несчастливым браком, Грейс решила, что больше никогда не доверится мужчине и не поставит ...
Лиз Сазерленд только мечтала о том, чтобы черная полоса ее жизни когда-нибудь сменилась белой. Пробл...
В старину ставили храмы на полях сражений в память о героях и мучениках, отдавших за Родину жизнь. Н...
В учебном пособии представлены вариативные авторские методики воспитания и развития волевых качеств ...