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

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];