3.0. Введение
Выравнивание компонентов пользовательского интерфейса всегда было для программиста большой проблемой. В большинстве контроллеров видов в сложных приложениях для iOS содержится множество кода, решающего такие якобы тривиальные задачи, как упорядочение на экране фрейма с графическими элементами, выравнивание компонентов по горизонтали и вертикали и обеспечение того, что компоненты будут нормально выглядеть в различных версиях iOS. Причем проблема не только в этом, ведь многие программисты желают пользоваться одними и теми же контроллерами видов на разных устройствах, например на iPhone и iPad. Из-за этого код дополнительно усложняется. Apple упростила для нас решение таких задач, предоставив возможность автоматической компоновки (Auto Layout). Автоматическая компоновка, давно применявшаяся в OS X, теперь реализована и в iOS. Чуть позже мы подробно поговорим об автоматической компоновке, но для начала я позволю себе краткое введение и расскажу, для чего она нужна.
Допустим, у вас есть кнопка, которая обязательно должна находиться в центре экрана. Отношение между центром кнопки и центром вида, в котором она находится, можно упрощенно описать следующим образом:
• свойство кнопки center.x равно свойству вида center.x;
• свойство кнопки center.y равно свойству вида center.y.
Разработчики Apple заметили, что многие проблемы, связанные с позиционированием элементов пользовательского интерфейса, решаемы с помощью простой формулы:
object1.property1 = (object2.property2 * multiplier) + constant value
Например, воспользовавшись этой формулой, я могу без труда центрировать кнопку в ее вышестоящем виде, вот так:
button.center.x = (button.superview.center.x * 1) + 0
button.center.y = (button.superview.center.y * 1) + 0
С помощью этой же формулы вы можете делать некоторые по-настоящему отличные вещи при разработке пользовательского интерфейса приложений для iOS — вещи, которые ранее были просто неосуществимы. В iOS SDK вышеупомянутая формула обернута в класс, который называется NSLayoutConstraint. Каждый экземпляр этого класса соответствует ровно одному ограничению. Например, если вы хотите расположить кнопку в центре вида, владеющего этой кнопкой, то требуется центрировать координаты x и y этой кнопки. Таким образом, речь идет о создании двух ограничений. Но далее в этой главе мы познакомимся с языком визуального форматирования (Visual Format Language). Он отлично дополняет язык программирования для iOS и еще сильнее упрощает работу с макетами пользовательского интерфейса.
Ограничения можно создавать с помощью так называемых перекрестных видов. Например, если в одном виде у вас находится две кнопки и вы хотите, чтобы по вертикали между ними было 100 точек свободного пространства, то нужно создать ограничение, благодаря которому выполнялось бы это правило, но добавить его к общему родителю обеих этих кнопок. Скорее всего, это владеющий ими вид. Вот эти правила.
• Если ограничение находится между двумя видами, которые располагаются в общем родительском виде (то есть у обоих этих видов один и тот же вышестоящий родительский вид), добавьте ограничения к родительскому виду.
• Если ограничение находится между видом и его родительским видом, добавьте ограничение к родительскому виду.
• Если ограничение находится между двумя видами, которые не располагаются в общем родительском виде, добавьте это ограничение к общему предку интересующих вас видов.
На рис. 3.1 показано, как именно действуют эти ограничения.
Рис. 3.1. Отношения между ограничениями и видами, к которым эти ограничения должны добавляться
Ограничения создаются с помощью метода класса constraintWithItem: attribute: related By: toItem: attribute: multiplier: constant:, который относится к классу NSLayoutConstraint. Этот метод принимает следующие параметры:
• constraintWithItem — параметр типа id. Он соответствует объекту object1 в формуле, рассмотренной ранее;
• attribute — этот параметр представляет свойство property1 в вышеупомянутой формуле и должен относиться к типу NSLayoutAttribute;
• relatedBy — параметр соответствует знаку равенства в нашей формуле. Значение этого параметра относится к типу NSLayoutRelation и, как вы вскоре убедитесь, может выступать не только в качестве знака равенства, но и в роли знаков «больше» и «меньше». Мы подробно обсудим эти нюансы в данной главе;
• toItem — это параметр типа id. Он соответствует объекту object2 в формуле, рассмотренной ранее;
• attribute — параметр представляет свойство property2 в вышеупомянутой формуле и должен относиться к типу NSLayoutAttribute;
• multiplier — это параметр типа CGFloat, представляющий множитель в нашей формуле;
• constant — параметр также относится к типу CGFloat и представляет константу в формуле.
После создания ограничений вы сможете просто добавить их к соответствующему виду (рис. 3.1), воспользовавшись одним из следующих методов класса UIView:
• addConstraint: — метод позволяет добавить к виду одно ограничение типа NSLayoutConstraint;
• addConstraints: — этот метод позволяет добавить к виду массив ограничений. Ограничения должны относиться к типу NSLayoutConstraint, но в данном случае они будут обернуты в массив типа NSArray.
Автоматическая компоновка позволяет решать разнообразные задачи, в чем вы убедитесь в оставшейся части этой главы. Тем не менее чем подробнее вы будете знакомиться с этой темой, тем очевиднее будет становиться следующий факт: применяя автоматическую компоновку, вы вынуждены создавать все новые ограничения типа NSLayoutConstraint. Из-за этого ваш код будет разрастаться, а поддержка его — постоянно усложняться. Именно поэтому компания Apple разработала язык визуального форматирования, на котором можно описывать ограничения, пользуясь обычными символами ASCII. Например, если у вас есть две кнопки и вы хотите, чтобы по горизонтали эти кнопки всегда отстояли друг от друга на 100 точек, то нужно написать на языке визуального форматирования подобный код:
[button1]-100-[button2]
Ограничения, выражаемые на языке визуального форматирования, создаются с помощью метода класса constraintsWithVisualFormat: options: metrics: views:, относящегося к классу NSLayoutConstraint. Вот краткое описание каждого из параметров этого метода:
• constraintsWithVisualFormat — выражение на языке визуального форматирования, записанное как NSString;
• options — параметр типа NSLayoutFormatOptions. При работе с языком визуального форматирования этому параметру обычно передается значение 0;
• metrics — словарь констант, которые вы используете в выражении на языке визуального форматирования. Пока ради упрощения примеров будем передавать этому параметру значение nil;
• views — это словарь видов, для которых вы написали ограничение в первом параметре данного метода. Чтобы создать такой словарь, просто воспользуйтесь функцией NSDictionaryOfVariableBindings из языка C и передайте этому методу ваши новые объекты. Ключи в этом словаре — это названия видов, которые вы должны использовать в первом параметре метода. Не переживайте, если пока все это кажется странным и даже бессмысленным. Вскоре все будет понятно! Как только вы изучите несколько примеров, сразу получится стройная картина.
Вооружившись базовой информацией, не забивая голову ничем лишним, перейдем к практическим разделам. В качестве зарядки поупражняемся немного с ограничениями. Готовы? Поехали!
3.1. Размещение компонентов пользовательского интерфейса в центре экрана
Постановка задачи
Требуется поместить компонент пользовательского интерфейса в центре экрана. Иными словами, мы собираемся расположить вид в центре его вышестоящего вида с помощью ограничений.
Решение
Создайте два ограничения: одно для выравнивания позиции center.x целевого вида по позиции center.x вышестоящего вида, другое — для выравнивания позиции center.y целевого вида по позиции center.y вышестоящего вида.
Обсуждение
Начнем с создания простой кнопки, которую выровняем по центру экрана. Как было указано в подразделе «Решение» текущего раздела, для этого всего лишь требуется гарантировать, что координаты x и y центра нашей кнопки будут соответствовать координатам x и y центра того вида, в котором находится кнопка. Для этого мы напишем два ограничения и добавим их к виду, включающему нашу кнопку (вышестоящему виду этой кнопки). Вот простой код, позволяющий добиться такого эффекта:
#import «ViewController.h»
@interface ViewController ()
@property (nonatomic, strong) UIButton *button;
@end
@implementation ViewController
— (void)viewDidLoad{
[super viewDidLoad];
/* 1) Создаем кнопку */
self.button = [UIButton buttonWithType: UIButtonTypeSystem];
self.button.translatesAutoresizingMaskIntoConstraints = NO;
[self.button setTitle:@"Button" forState: UIControlStateNormal];
[self.view addSubview: self.button];
UIView *superview = self.button.superview;
/* 2) Создаем ограничение для центрирования кнопки по горизонтали */
NSLayoutConstraint *centerXConstraint =
[NSLayoutConstraint constraintWithItem: self.button
attribute: NSLayoutAttributeCenterX
relatedBy: NSLayoutRelationEqual
toItem: superview
attribute: NSLayoutAttributeCenterX
multiplier:1.0f
constant:0.0f];
/* 3) Создаем ограничение для центрирования кнопки по вертикали */
NSLayoutConstraint *centerYConstraint =
[NSLayoutConstraint constraintWithItem: self.button
attribute: NSLayoutAttributeCenterY
relatedBy: NSLayoutRelationEqual
toItem: superview
attribute: NSLayoutAttributeCenterY
multiplier:1.0f
constant:0.0f];
/* Добавляем ограничения к вышестоящему виду кнопки */
[superview addConstraints:@[centerXConstraint, centerYConstraint]];
}
@end
Этот контроллер вида пытается сообщить iOS, что он поддерживает все возможные ориентации интерфейса, применимые на этом устройстве. Этот факт подтверждает, что кнопка действительно будет расположена в центре экрана, независимо от типа устройства и его ориентации. Тем не менее, прежде чем этот метод начнет действовать, вы должны убедиться, что активировали все необходимые виды ориентации внутри самого проекта. Для этого перейдите в Xcode к свойствам целевого проекта, откройте вкладку General (Общие), а в ней найдите раздел Device Orientation (Ориентация устройства). Затем активизируйте все возможные виды ориентации (рис. 3.2).
Рис. 3.2. Активизируем в Xcode все виды ориентации, поддерживаемые для целевого проекта
Теперь, если запустить это приложение на устройстве или эмуляторе, вы увидите на экране обычную кнопку. Сколько бы вы ни вращали устройство, кнопка никуда не сдвигается с центра экрана. Мы смогли достичь этого, не написав ни строки кода для настройки фрейма кнопки, а также без прослушивания каких-либо изменений ориентации и без корректирования положения кнопки. Фактически здесь были применены только возможности автоматической компоновки (рис. 3.3). Этот подход выигрышен по той простой причине, что наш код теперь будет работать на любом устройстве, независимо от его ориентации и разрешения экрана. Напротив, если бы мы программировали фрейм для компонентов пользовательского интерфейса, то пришлось бы создавать отдельные фреймы для каждого целевого устройства во всех интересующих нас ориентациях, поскольку на разных устройствах с iOS могут использоваться экраны с довольно несхожими разрешениями. В частности, приложение, написанное в этом разделе, будет отлично работать и на iPad, и на iPhone, причем кнопка будет находиться в центре экрана независимо от ориентации устройства и разрешения его экрана.
Рис. 3.3. Кнопка остается в центре экрана при любой ориентации
См. также
Разделы 3.0 и 3.2.
3.2. Определение горизонтальных и вертикальных ограничений на языке визуального форматирования
Постановка задачи
Требуется возможность определять ограничения, изменяющие способ выравнивания элемента пользовательского интерфейса по горизонтали или по вертикали в его вышестоящем виде.
Решение
В строке форматирования ограничения пользуйтесь указателем ориентации H:, чтобы задать выравнивание по горизонтали, и указателем V: для выравнивания по вертикали.
Обсуждение
Я не буду утверждать, что язык визуального форматирования прост для понимания, — напротив, он довольно запутан. Поэтому приведу несколько примеров работы с ним, которые, надеюсь, прояснят ситуацию. Во всех этих примерах мы будем изменять горизонтальное выравнивание кнопки на экране.
1. Кнопка должна находиться на расстоянии 100 точек от каждого из краев ее вышестоящего вида:
H:|-100-[_button]-100-|
2. Кнопка должна находиться на расстоянии 100 точек или менее от левого края вышестоящего вида. Кроме того, ее ширина должна быть не меньше 50 точек, а расстояние между кнопкой и правым краем вышестоящего вида должно составлять 100 точек или менее:
H:|-(<=100)-[_button(>=50)]-(<=100)-|
3. Кнопка должна находиться на стандартном расстоянии от левого края вышестоящего вида (стандартные расстояния определяются Apple) и иметь ширину не менее 100, но не более 200 точек:
H:|-[_button(>=100,<=200)]
Как видите, может понадобиться некоторое время, чтобы привыкнуть к правилам форматирования. Но, как только вы усвоите основы этого процесса, он постепенно начнет укладываться у вас в голове. Аналогичные правила применяются и к выравниванию по вертикали, при котором используется указатель ориентации V:, например:
V:[_button]-(>=100)-|
При таком ограничении кнопка «прилипнет» к верхнему краю вышестоящего вида (не забывайте, что это ограничение действует по вертикали, так как начинается с V) и будет находиться на расстоянии не менее 100 точек от его нижнего края.
Итак, опробуем изученный материал на практике. Напишем на языке визуального форматирования ограничения, позволяющие сделать примерно такой же интерфейс, как на рис. 3.4.
Рис. 3.4. Интерфейс, который мы хотим получить, опираясь на наши ограничения и пользуясь языком визуального форматирования
Чтобы дизайнерам было проще принимать решения, а сами приложения выглядели более единообразно, Apple регламентирует стандартные расстояния (пробелы), которые следует оставлять между компонентами пользовательского интерфейса. Эти стандарты описаны в документе iOS Human Interface Guidelines.
Прежде чем вплотную заняться написанием кода, опишем ограничения, которые необходимо реализовать в соответствии с предыдущим рисунком.
• Поле для адреса электронной почты имеет стандартное расстояние по вертикали до верхней границы вида.
• Поле для подтверждения адреса электронной почты имеет стандартное расстояние по вертикали до поля с адресом электронной почты.
• Кнопка Register (Зарегистрировать) имеет стандартное расстояние по вертикали до поля для подтверждения адреса электронной почты.
• Все компоненты центрированы по горизонтали относительно родительского (вышестоящего) вида.
• Поля для адреса электронной почты и подтверждения этого адреса имеют стандартное расстояние по горизонтали от левого и правого краев вышестоящего вида.
• Ширина кнопки является фиксированной и составляет 128 точек.
Рассмотрим код, необходимый для реализации всех этих требований. Для начала просто определим все ограничения на языке визуального форматирования и поместим эти определения выше вида с контроллером:
/* Ограничения для поля с адресом электронной почты */
NSString *const kEmailTextFieldHorizontal = @"H:|-[_textFieldEmail]-|";
NSString *const kEmailTextFieldVertical = @"V:|-[_textFieldEmail]";
/* Ограничения для поля, в котором подтверждается адрес электронной почты */
NSString *const kConfirmEmailHorizontal = @"H:|-[_textFieldConfirmEmail]-|";
NSString *const kConfirmEmailVertical =
@"V:[_textFieldEmail]-[_textFieldConfirmEmail]";
/* Ограничение для регистрационной кнопки */
NSString *const kRegisterVertical =
@"V:[_textFieldConfirmEmail]-[_registerButton]";
Здесь мы видим, что оба текстовых поля сопровождаются применяемыми к ним по горизонтали и вертикали ограничениями, описанными на языке визуального форматирования. Кнопка регистрации, в свою очередь, имеет только ограничение по вертикали, также описанное на языке визуального форматирования. Почему? Оказывается, что на языке визуального форматирования невозможно выразить центрирование компонента пользовательского интерфейса по горизонтали. Для решения этой задачи воспользуемся приемом, изученным в разделе 3.1. Но пусть это вас не смущает — все равно стоит пользоваться языком визуального форматирования и наслаждаться его потенциалом. Да, он несовершенен, но это не повод от него отказываться.
Теперь определим компоненты пользовательского интерфейса как закрытые (приватные) свойства в файле реализации контроллера вида:
@interface ViewController ()
@property (nonatomic, strong) UITextField *textFieldEmail;
@property (nonatomic, strong) UITextField *textFieldConfirmEmail;
@property (nonatomic, strong) UIButton *registerButton;
@end
@implementation ViewController
<# Оставшаяся часть вашего кода находится здесь #>
Что дальше? Теперь нужно сконструировать сами компоненты пользовательского интерфейса в файле реализации контроллера вида. Итак, напишем два удобных метода, которые нам в этом помогут. Опять же не забывайте: мы не собираемся здесь задавать фреймы этих компонентов. Позже нам в этом поможет автоматическая компоновка:
— (UITextField *) textFieldWithPlaceholder:(NSString *)paramPlaceholder{
UITextField *result = [[UITextField alloc] init];
result.translatesAutoresizingMaskIntoConstraints = NO;
result.borderStyle = UITextBorderStyleRoundedRect;
result.placeholder = paramPlaceholder;
return result;
}
— (void) constructUIComponents{
self.textFieldEmail =
[self textFieldWithPlaceholder:@"Email"];
self.textFieldConfirmEmail =
[self textFieldWithPlaceholder:@"Confirm Email"];
self.registerButton = [UIButton buttonWithType: UIButtonTypeSystem];
self.registerButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.registerButton setTitle:@"Register" forState: UIControlStateNormal];
}
Метод textFieldWithPlaceholder: просто создает текстовые поля, содержащие заданный подстановочный текст, а метод constructUIComponents, в свою очередь, создает два текстовых поля, пользуясь вышеупомянутым методом и кнопкой. Вы, вероятно, заметили, что мы присвоили свойству translatesAutoresizingMaskIntoConstraints всех наших компонентов пользовательского интерфейса значение NO. Так мы помогаем UIKit не перепутать маски автоматической подгонки размеров с ограничениями автоматической компоновки. Как вы знаете, можно задавать маски автоматической подгонки размеров для компонентов пользовательского интерфейса и контроллеров видов как в коде, так и в конструкторе интерфейсов. Об этом мы говорили в главе 1. Устанавливая здесь значение NO, мы гарантируем, что UIKit ничего не перепутает и не будет автоматически преобразовывать маски автоматической подгонки размера в ограничения автоматической компоновки. Эту функцию необходимо задавать, если вы смешиваете свойства автоматической компоновки компонентов с ограничениями макета. Как правило, следует устанавливать это значение у всех компонентов пользовательского интерфейса в NO всякий раз, когда вы работаете с ограничениями автоматической компоновки. Исключение составляют случаи, в которых вы специально приказываете UIKit преобразовать маски автоматической подгонки размеров в ограничения автоматической компоновки.
Мы создаем компоненты пользовательского интерфейса, но вполне очевидно, что методу viewDidLoad контроллера вида необходимо добавить к виду все три компонента пользовательского интерфейса. Почему бы не написать еще один небольшой метод, который будет заниматься именно этим?
— (void) addUIComponentsToView:(UIView *)paramView{
[paramView addSubview: self.textFieldEmail];
[paramView addSubview: self.textFieldConfirmEmail];
[paramView addSubview: self.registerButton];
}
Итак, почти все готово. Следующая крупная задача — создать методы, которые позволят сконструировать и собрать все ограничения в массив. У нас также есть удобный четвертый метод, который собирает все ограничения от всех трех компонентов пользовательского интерфейса и объединяет их в общий большой массив. Вот как мы его реализуем:
— (NSArray *) emailTextFieldConstraints{
NSMutableArray *result = [[NSMutableArray alloc] init];
NSDictionary *viewsDictionary =
NSDictionaryOfVariableBindings(_textFieldEmail);
[result addObjectsFromArray:
[NSLayoutConstraint constraintsWithVisualFormat: kEmailTextFieldHorizontal
options:0
metrics: nil
views: viewsDictionary]
];
[result addObjectsFromArray:
[NSLayoutConstraint constraintsWithVisualFormat: kEmailTextFieldVertical
options:0
metrics: nil
views: viewsDictionary]
];
return [NSArray arrayWithArray: result];
}
— (NSArray *) confirmEmailTextFieldConstraints{
NSMutableArray *result = [[NSMutableArray alloc] init];
NSDictionary *viewsDictionary =
NSDictionaryOfVariableBindings(_textFieldConfirmEmail, _textFieldEmail);
[result addObjectsFromArray:
[NSLayoutConstraint constraintsWithVisualFormat: kConfirmEmailHorizontal
options:0
metrics: nil
views: viewsDictionary]
];
[result addObjectsFromArray:
[NSLayoutConstraint constraintsWithVisualFormat: kConfirmEmailVertical
options:0
metrics: nil
views: viewsDictionary]
];
return [NSArray arrayWithArray: result];
}
— (NSArray *) registerButtonConstraints{
NSMutableArray *result = [[NSMutableArray alloc] init];
NSDictionary *viewsDictionary =
NSDictionaryOfVariableBindings(_registerButton, _textFieldConfirmEmail);
[result addObject:
[NSLayoutConstraint constraintWithItem: self.registerButton
attribute: NSLayoutAttributeCenterX
relatedBy: NSLayoutRelationEqual
toItem: self.view
attribute: NSLayoutAttributeCenterX
multiplier:1.0f
constant:0.0f]
];
[result addObjectsFromArray:
[NSLayoutConstraint constraintsWithVisualFormat: kRegisterVertical
options:0
metrics: nil
views: viewsDictionary]
];
return [NSArray arrayWithArray: result];
}
— (NSArray *)constraints{
NSMutableArray *result = [[NSMutableArray alloc] init];
[result addObjectsFromArray: [self emailTextFieldConstraints]];
[result addObjectsFromArray: [self confirmEmailTextFieldConstraints]];
[result addObjectsFromArray: [self registerButtonConstraints]];
return [NSArray arrayWithArray: result];
}
Фактически здесь мы имеем метод экземпляра constraints, относящийся к контроллеру вида; этот метод собирает ограничения от всех трех компонентов пользовательского интерфейса, а потом возвращает их все как один большой массив. Теперь переходим к основной части контроллера — методу viewDidLoad:
— (void)viewDidLoad{
[super viewDidLoad];
[self constructUIComponents];
[self addUIComponentsToView: self.view];
[self.view addConstraints: [self constraints]];
}
Этот метод просто собирает пользовательский интерфейс, добавляя сам к себе все компоненты пользовательского интерфейса и связанные с ними ограничения. При этом он использует методы, написанные нами ранее. Отлично, но что мы увидим на экране, когда запустим эту программу? Мы уже видели, как этот интерфейс выглядит на устройстве, работающем в книжной ориентации (см. рис. 3.4). А теперь повернем устройство и посмотрим, что получится при альбомной ориентации (рис. 3.5).
Рис. 3.5. Ограничения функционируют в альбомном режиме не хуже, чем в книжном
См. также
Разделы 3.0 и 3.1.
3.3. Применение ограничений при работе с перекрестными видами
Постановка задачи
Требуется выровнять компонент пользовательского интерфейса относительно другого компонента пользовательского интерфейса, притом что родительские элементы у этих компонентов разные.
Решение
Ориентируясь на рис. 3.1, убедитесь, что вам удалось найти ближайший общий вышестоящий вид, являющийся родителем для интересующих вас компонентов пользовательского интерфейса. Затем добавьте ограничения к этому вышестоящему виду.
Обсуждение
Прежде чем углубляться в детали, разберемся, в чем же заключаются ограничения перекрестных видов. Мне кажется, что суть проблемы удобнее изобразить на картинке, а не описывать словами, — предлагаю вашему вниманию рис. 3.6.
Рис. 3.6. Важные ограничения, налагаемые перекрестными видами на две кнопки
На этом рисунке к видам применяется немало ограничений. Разберем их по порядку, разложив все по полочкам.
• Есть основной вид с контроллером, в этом виде расположены еще два серых вида. Оба они должны отстоять от левой и правой границ вида с контроллером на стандартные расстояния. В частности, должно сохраняться стандартное расстояние между верхним серым видом и верхней границей вышестоящего вида. Между двумя серыми видами по вертикали также должно сохраняться стандартное пространство.
• Нужна кнопка, которая будет вертикально центрирована относительно обоих серых видов.
• Кнопка, расположенная в верхнем сером виде, слева должна быть удалена от края своего вышестоящего вида на стандартное расстояние.
• Левая сторона кнопки, находящейся в нижнем сером виде, должна быть выровнена по правой стороне той кнопки, что находится в верхнем сером виде. Это и есть ограничение для перекрестных видов, которое интересует нас в данном разделе.
• Серые виды должны автоматически изменять размер по мере того, как меняется ориентация вида с контроллером.
• Высота обоих серых видов должна составлять по 100 точек.
Итак, начнем. Чтобы выполнить все перечисленные задачи, вначале обратимся к методу viewDidLoad контроллера вида. Всегда стоит продумывать максимально чистый способ объединения методов. Конечно, в данном примере мы оперируем довольно большим количеством ограничений и видов. Как же нам не захламлять метод viewDidLoad контроллера вида? Вот так:
— (void)viewDidLoad{
[super viewDidLoad];
[self createGrayViews];
[self createButtons];
[self applyConstraintsToTopGrayView];
[self applyConstraintsToButtonOnTopGrayView];
[self applyConstraintsToBottomGrayView];
[self applyConstraintsToButtonOnBottomGrayView];
}
Мы просто распределили стоящие перед нами задачи по разным методам, которые вскоре реализуем. Продолжим — определим виды в файле реализации контроллера вида как расширение интерфейса:
#import «ViewController.h»
@interface ViewController ()
@property (nonatomic, strong) UIView *topGrayView;
@property (nonatomic, strong) UIButton *topButton;
@property (nonatomic, strong) UIView *bottomGrayView;
@property (nonatomic, strong) UIButton *bottomButton;
@end
@implementation ViewController
<# Оставшаяся часть вашего кода находится здесь #>
Далее следует реализовать метод createGrayViews. Как понятно из названия, этот метод отвечает за создание серых видов:
— (UIView *) newGrayView{
UIView *result = [[UIView alloc] init];
result.backgroundColor = [UIColor lightGrayColor];
result.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview: result];
return result;
}
— (void) createGrayViews{
self.topGrayView = [self newGrayView];
self.bottomGrayView = [self newGrayView];
}
Пока несложно? Оба серых вида добавляются к контроллеру нашего вида. Отлично. Что дальше? Теперь нужно реализовать метод createButtons, поскольку он вызывается в методе viewDidLoad контроллера вида. Этот метод должен просто создать кнопки и поместить каждую в ассоциированном с ней сером виде:
— (UIButton *) newButtonPlacedOnView:(UIView *)paramView{
UIButton *result = [UIButton buttonWithType: UIButtonTypeSystem];
result.translatesAutoresizingMaskIntoConstraints = NO;
[result setTitle:@"Button" forState: UIControlStateNormal];
[paramView addSubview: result];
return result;
}
— (void) createButtons{
self.topButton = [self newButtonPlacedOnView: self.topGrayView];
self.bottomButton = [self newButtonPlacedOnView: self.bottomGrayView];
}
Опять же в методе createButtons мы видим, что после создания серых видов и кнопок нужно применить ограничения к этим видам и кнопкам. Начнем с применения ограничений к верхнему серому виду. Эти ограничения должны обеспечивать соблюдение следующих условий:
• верхний вид должен находиться на стандартном расстоянии от вида с контроллером по левому и верхнему краю;
• высота этого серого вида должна составлять 100 точек.
— (void) applyConstraintsToTopGrayView{
NSDictionary *views =
NSDictionaryOfVariableBindings(_topGrayView);
NSMutableArray *constraints = [[NSMutableArray alloc] init];
NSString *const kHConstraint = @"H:|-[_topGrayView]-|";
NSString *const kVConstraint = @"V:|-[_topGrayView(==100)]";
/* Горизонтальные ограничения */
[constraints addObjectsFromArray:
[NSLayoutConstraint constraintsWithVisualFormat: kHConstraint
options:0
metrics: nil
views: views]
];
/* Вертикальные ограничения */
[constraints addObjectsFromArray:
[NSLayoutConstraint constraintsWithVisualFormat: kVConstraint
options:0
metrics: nil
views: views]
];
[self.topGrayView.superview addConstraints: constraints];
}
Здесь следует остановиться на том, как создается вертикальное ограничение верхнего серого вида. Как видите, мы задаем высоту верхнего вида равной 100 точкам и записываем эту информацию в формате (==100). Среда времени исполнения интерпретирует это значение именно как высоту, поскольку здесь есть указатель V:. Он сообщает среде времени исполнения о следующем: те числа, которые мы сообщаем системе, как-то связаны с высотой и вертикальным выравниванием целевого вида, а не с его шириной и горизонтальным выравниванием.
Далее займемся установкой ограничений для кнопки, находящейся в верхнем сером виде. Это делается с помощью метода applyConstraintsToButtonOnTopGrayView. Кнопка должна будет соответствовать перечисленным далее ограничениям:
• она должна быть вертикально центрирована в верхнем сером виде;
• она должна быть удалена на стандартное расстояние от левого и верхнего края этого серого вида.
У нее не должно быть жестко заданных высоты и ширины; эти значения будут зависеть от содержимого кнопки, в данном случае — от текста Button, который мы решили на ней написать:
— (void) applyConstraintsToButtonOnTopGrayView{
NSDictionary *views = NSDictionaryOfVariableBindings(_topButton);
NSMutableArray *constraints = [[NSMutableArray alloc] init];
NSString *const kHConstraint = @"H:|-[_topButton]";
/* Горизонтальные ограничения */
[constraints addObjectsFromArray:
[NSLayoutConstraint constraintsWithVisualFormat: kHConstraint
options:0
metrics: nil
views: views]
];
/* Вертикальные ограничения */
[constraints addObject:
[NSLayoutConstraint constraintWithItem: self.topButton
attribute: NSLayoutAttributeCenterY
relatedBy: NSLayoutRelationEqual
toItem: self.topGrayView
attribute: NSLayoutAttributeCenterY
multiplier:1.0f
constant:0.0f]
];
[self.topButton.superview addConstraints: constraints];
}
Итак, работа с верхним серым видом и находящейся в нем кнопкой завершена. Переходим к нижнему серому виду и его кнопке. Сейчас начнем работать с методом ConstraintsToBottomGrayView. Он будет задавать ограничения для нижнего серого вида. Просто напомню, что для этого вида нам требуется создать следующие ограничения:
• вид удален на стандартное расстояние от верхнего и левого края вышестоящего вида с контроллером;
• вид удален на стандартное расстояние от нижней границы верхнего серого вида;
• высота нижнего серого вида составляет 100 точек.
— (void) applyConstraintsToBottomGrayView{
NSDictionary *views =
NSDictionaryOfVariableBindings(_topGrayView,
_bottomGrayView);
NSMutableArray *constraints = [[NSMutableArray alloc] init];
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.