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

Следующий и, пожалуй, последний компонент пользовательского интерфейса, для которого мы собираемся написать ограничения, — это кнопка, расположенная в нижнем сером виде. Метод, который будет заниматься ее ограничениями, называется 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.

Глава 4. Создание и использование табличных видов

4.0. Введение

Табличный вид — это обычный вид с прокручиваемым контентом, который разделен на секции. Каждая такая секция, в свою очередь, подразделяется на строки. Каждая строка (Row) является экземпляром класса UITableViewCell. Вы можете создавать собственные варианты строк в табличном виде, делая подклассы этого класса.

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

Табличный вид можно наполнить данными, используя источник данных табличного вида. Вы можете получать различные события и управлять оформлением табличных видов с помощью объекта-делегата табличного вида. Источник данных для табличного вида определяется в протоколе UITableViewDataSource, а делегат табличного вида — в протоколе UITableViewDelegate.

Хотя экземпляр UITableView является подклассом от UIScrollView, табличные виды можно прокручивать только по вертикали. Это скорее благо, чем ограничение. В данной главе мы обсудим различные способы создания табличных видов, их настройки и управления ими.

Табличные виды можно использовать двумя способами:

• с помощью класса UITableViewController. Этот класс напоминает UIViewController (см. раздел 1.9) в том, что фактически это контроллер вида, но в нем отображается не обычный вид, а таблица. Красота этого класса заключается в том, что каждый его экземпляр уже соответствует протоколам UITableViewDelegate и UITableViewDataSource. Итак, по умолчанию контроллер табличного вида становится источником данных и одновременно делегатом того табличного вида, которым он управляет. Таким образом, чтобы реализовать, например, источник данных для табличного вида, вам всего лишь потребуется реализовать контроллер для табличного вида, а не устанавливать вручную контроллер вида в качестве источника данных для табличного вида;