iOS. Приемы программирования Нахавандипур Вандад
@property (nonatomic, strong) UIDynamicAnimator *animator;
@end
@implementation ViewController
<# Оставшаяся часть вашего кода находится здесь #>
Далее напишем удобный метод, с помощью которого сможем создавать виды с заранее заданными центральной точкой и цветом фона. Этот метод мы используем для создания двух очень похожих видов с разными центральными точками и окрашенных в разные фоновые цвета:
— (UIView *) newViewWithCenter:(CGPoint)paramCenter
backgroundColor:(UIColor *)paramBackgroundColor{
UIView *newView =
[[UIView alloc] initWithFrame:
CGRectMake(0.0f, 0.0f, 50.0f, 50.0f)];
newView.backgroundColor = paramBackgroundColor;
newView.center = paramCenter;
return newView;
}
Теперь, как только основной вид отобразится на экране, создадим два этих вида и также выведем их на дисплей:
UIView *topView = [self newViewWithCenter: CGPointMake(100.0f, 0.0f)
backgroundColor: [UIColor greenColor]];
UIView *bottomView = [self newViewWithCenter: CGPointMake(100.0f, 50.0f)
backgroundColor: [UIColor redColor]];
[self.view addSubview: topView];
[self.view addSubview: bottomView];
Далее добавим к видам поведение тяготения — этому мы научились в разделе 2.1:
self.animator = [[UIDynamicAnimator alloc]
initWithReferenceView: self.view];
/* Создаем тяготение */
UIGravityBehavior *gravity = [[UIGravityBehavior alloc]
initWithItems:@[topView, bottomView]];
[self.animator addBehavior: gravity];
Мы не хотим, чтобы виды выпадали за пределы экрана, достигнув его дна. Поэтому воспользуемся знаниями, приобретенными в разделе 2.2, и зададим для аниматора нижнюю границу, а также запрограммируем поведение столкновения:
/* Создаем обнаружение столкновений */
UICollisionBehavior *collision = [[UICollisionBehavior alloc]
initWithItems:@[topView, bottomView]];
collision.translatesReferenceBoundsIntoBoundary = YES;
[self.animator addBehavior: collision];
Наконец, очень важно добавить видам динамическое поведение, чтобы сделать верхний вид менее эластичным, чем нижний:
/* Теперь указываем эластичность элементов */
UIDynamicItemBehavior *moreElasticItem = [[UIDynamicItemBehavior alloc]
initWithItems:@[bottomView]];
moreElasticItem.elasticity = 1.0f;
UIDynamicItemBehavior *lessElasticItem = [[UIDynamicItemBehavior alloc]
initWithItems:@[topView]];
lessElasticItem.elasticity = 0.5f;
[self.animator addBehavior: moreElasticItem];
[self.animator addBehavior: lessElasticItem];
Итак, можете запустить приложение и посмотреть, как виды будут отскакивать от нижней границы экрана, как только ударятся об нее (рис. 2.4).
Рис. 2.4. Один вид эластичнее другого
См. также
Раздел 2.0.
Глава3. Автоматическая компоновка и язык визуального форматирования
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];
Читать бесплатно другие книги:
