Бестселлеры O`Reilly - iOS. Приемы программирования

• UIPushBehavior – позволяет имитировать в ваших видах толчки. Допустим, вы дотронулись пальцем до экрана, а потом стали постепенно двигать палец к его верхнему краю. Если к виду прикреплена кнопка, оснащенная толчковым поведением, то вы могли бы толкать эту кнопку пальцем, как если бы она лежала на столе;

• UISnapBehavior – обеспечивает прикрепление видов к тем или иным местам на экране.

Как было указано ранее, для каждого динамического поведения потребуется аниматор типа UIDynamicAnimator. Аниматор должен быть инициализирован с сущностью, которая в Apple называется опорным видом. Аниматор использует систему координат опорного вида для расчета результата различных поведений. Например, можно указать вид определенного контроллера вида в качестве опорного для динамического аниматора. В таком случае можно добавить к аниматору поведение столкновения и тем самым гарантировать, что добавляемые элементы не будут выпадать за пределы опорного вида. Таким образом вы сможете разместить в опорном виде все элементы пользовательского интерфейса, даже если на них действует поведение тяготения.

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

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

2.1. Добавление тяготения к компонентам пользовательского интерфейса

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

Инициализируйте объект типа UIGravityBehavior и добавьте к нему те компоненты пользовательского интерфейса, которые должны испытывать тяготение к этому объекту. Сделав это, создайте экземпляр UIDynamicAnimator, добавьте к аниматору поведение тяготения, а всю остальную работу аниматор сделает за вас.

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

Итак, определим аниматор и вид:

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIView *squareView;

@property (nonatomic, strong) UIDynamicAnimator *animator;

@end

@implementation ViewController

<# Оставшаяся часть кода вашего контроллера вида находится здесь #>

Далее создадим небольшой вид, присвоим ему цвет и поместим в центре вида нашего контроллера. Так мы получим экземпляр класса UIGravityBehavior, воспользовавшись методом-инициализатором initWithItems:. Этот инициализатор принимает массив объектов, соответствующих протоколу UIDynamicItem. По умолчанию этому протоколу соответствуют все экземпляры UIView, поэтому, как только вид готов, можно идти дальше:

– (void)viewDidAppear:(BOOL)animated{

[super viewDidAppear: animated];

/* Создаем маленький квадратный вид и добавляем его к self.view */

self.squareView = [[UIView alloc] initWithFrame:

CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)];

self.squareView.backgroundColor = [UIColor greenColor];

self.squareView.center = self.view.center;

[self.view addSubview: self.squareView];

/* Создаем аниматор и реализуем тяготение */

self.animator = [[UIDynamicAnimator alloc]

initWithReferenceView: self.view];

UIGravityBehavior *gravity = [[UIGravityBehavior alloc]

initWithItems:@[self.squareView]];

[self.animator addBehavior: gravity];

}

Если вы не хотите добавлять тяготение ко всем вашим видам, как только инициализируете это поведение, то можете добавить его позже с помощью метода экземпляра addItem:, относящегося к классу UIGravityBehavior. Этот метод также принимает объект, соответствующий указанному ранее протоколу.

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

Раздел 2.0.

2.2. Обнаружение столкновений между компонентами пользовательского интерфейса и реагирование на них

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

Инстанцируйте объект типа UICollisionBehavior и прикрепите его к объекту аниматора. Присвойте свойству translatesReferenceBoundsIntoBoundary поведения столкновений значение YES и убедитесь в том, что аниматор инициализирован с вышестоящим видом в качестве опорной сущности. Так вы гарантируете, что дочерние виды, на которые распространяется поведение столкновения (о чем мы вскоре поговорим), не будут выпадать за пределы вышестоящего вида.

Поведение столкновения, относящееся к типу UICollisionBehavior, затрагивает объекты, соответствующие протоколу UIDynamicItem. Все виды типа UIView уже ему соответствуют, поэтому вам придется лишь инстанцировать ваши виды и добавить их к поведению столкновения. Поведение столкновения требует определить на экране границы, которые будут непреодолимы для элементов, находящихся в аниматоре. Например, если вы зададите линию, которая будет идти из нижнего левого угла вашего опорного вида в нижний правый угол (соответственно, это будет линия, вплотную прилегающая к его нижнему краю), а также добавите к этому виду поведение тяготения, то виды, расположенные на экране, будут двигаться под действием тяготения вниз, но не смогут «провалиться» с экрана, так как столкнутся с его нижним краем, который задается поведением столкновения.

Если вы хотите, чтобы границы области, в которой действует поведение столкновения, совпадали с границами опорного вида, то присвойте свойству translatesReferenceBoundsIntoBoundary экземпляра поведения столкновения значение YES. Если хотите самостоятельно провести линии, соответствующие границам такой области, просто воспользуйтесь методом экземпляра addBoundaryWithIdentifier: fromPoint: toPoint:, относящимся к классу UICollisionBehavior.

В этом примере мы собираемся создать два цветных вида, один из которых расположен на другом. После этого добавим к аниматору поведение тяготения, чтобы эти виды не перекрывали друг друга. Кроме того, они не будут выходить за границы опорного вида (то есть вида контроллера).

Итак, для начала определим массив видов и аниматор:

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) NSMutableArray *squareViews;

@property (nonatomic, strong) UIDynamicAnimator *animator;

@end

@implementation ViewController

<# Остаток вашего кода находится здесь #>

Потом, когда вид появится на экране, зададим поведения столкновения и тяготения и добавим их к аниматору:

– (void)viewDidAppear:(BOOL)animated{

[super viewDidAppear: animated];

/* Создаем виды */

NSUInteger const NumberOfViews = 2;

self.squareViews = [[NSMutableArray alloc] initWithCapacity: NumberOfViews];

NSArray *colors = @[[UIColor redColor], [UIColor greenColor]];

CGPoint currentCenterPoint = self.view.center;

CGSize eachViewSize = CGSizeMake(50.0f, 50.0f);

for (NSUInteger counter = 0; counter < NumberOfViews; counter++){

UIView *newView =

[[UIView alloc] initWithFrame:

CGRectMake(0.0f, 0.0f, eachViewSize.width, eachViewSize.height)];

newView.backgroundColor = colors[counter];

newView.center = currentCenterPoint;

currentCenterPoint.y += eachViewSize.height + 10.0f;

[self.view addSubview: newView];

[self.squareViews addObject: newView];

}

self.animator = [[UIDynamicAnimator alloc]

initWithReferenceView: self.view];

/* Создаем тяготение */

UIGravityBehavior *gravity = [[UIGravityBehavior alloc]

initWithItems: self.squareViews];

[self.animator addBehavior: gravity];

/* Реализуем обнаружение столкновений */

UICollisionBehavior *collision = [[UICollisionBehavior alloc]

initWithItems: self.squareViews];

collision.translatesReferenceBoundsIntoBoundary = YES;

[self.animator addBehavior: collision];

}

Получим примерно такой же результат, как на рис. 2.1.

Рис. 2.1. Взаимодействующие поведения тяготения и столкновения

В этом примере показано, что поведение обнаружения столкновений работает отлично, если свойство translatesReferenceBoundsIntoBoundary имеет значение YES. Но что, если мы захотим очертить собственные границы столкновений? Здесь и пригодится метод экземпляра addBoundaryWithIdentifier: fromPoint: toPoint:, относящийся к поведению столкновения. Вот параметры, которые следует передать этому методу:

• addBoundaryWithIdentifier – строковый идентификатор для вашей границы. Он используется для того, чтобы впоследствии вы могли получить от границы информацию о столкновении. Вы могли бы передать такой же идентификатор методу boundaryWithIdentifier: и получить в ответ объект границы. Объект относится к типу UIBezierPath и может поддерживать довольно сложные, сильно искривленные границы. Но большинство программистов предпочитают указывать простые горизонтальные или вертикальные границы, что мы и сделаем;

• fromPoint – начальная точка границы, относится к типу CGPoint;

• toPoint – конечная точка границы, относится к типу CGPoint.

Итак, предположим, что вы хотите провести границу в нижней части опорного вида (в данном случае вида с контроллером), но не хотите, чтобы она совпадала с нижним краем. Вместо этого вам нужна граница, расположенная на 100 точек выше нижнего края. В таком случае свойство поведения столкновения translatesReferenceBoundsIntoBoundary не поможет, так как вы хотите задать иную границу, не совпадающую с пределами опорного вида. Нужно воспользоваться методом addBoundaryWithIdentifier: fromPoint: toPoint:, вот так:

/* Создаем обнаружение столкновений */

UICollisionBehavior *collision = [[UICollisionBehavior alloc]

initWithItems: self.squareViews];

[collision

addBoundaryWithIdentifier:@"bottomBoundary"

fromPoint: CGPointMake(0.0f, self.view.bounds.size.height – 100.0f)

toPoint: CGPointMake(self.view.bounds.size.width,

self.view.bounds.size.height – 100.0f)];

[self.animator addBehavior: collision];

Теперь, если мы объединим это поведение с тяготением, как делали раньше, то квадраты будут падать в опорном виде сверху вниз, но не достигнут его дна, так как проведенная нами нижняя граница находится немного выше. В рамках этого раздела я также хочу продемонстрировать возможность обнаружения столкновений между различными элементами, обладающими поведением столкновения. Класс UICollisionBehavior имеет свойство collisionDelegate, которое будет выступать в качестве делегата при обнаружении столкновений у элементов, обладающих поведением столкновения. Этот объект-делегат должен соответствовать протоколу UICollisionBehaviorDelegate. Данный протокол обладает некоторыми методами, которые мы можем реализовать. Вот два наиболее важных из этих методов:

• collisionBehavior: beganContactForItem: withBoundaryIdentifier: atPoint: – вызывается в делегате, когда один из элементов, обладающих поведением столкновения, ударяется об одну из границ, добавленных к этому поведению;

• collisionBehavior: endedContactForItem: withBoundaryIdentifier: atPoint: – вызывается, когда элемент, столкнувшийся с границей, отскочил от нее и, таким образом, контакт элемента с границей прекратился.

Чтобы продемонстрировать вам делегат в действии и показать, как его можно использовать, расширим приведенный пример. Как только квадратики достигают нижней границы опорного вида, мы делаем их красными, увеличиваем на 200 %, а потом заставляем рассыпаться, как при взрыве, и исчезать из виду:

NSString *const kBottomBoundary = @"bottomBoundary";

@interface ViewController () 

@property (nonatomic, strong) NSMutableArray *squareViews;

@property (nonatomic, strong) UIDynamicAnimator *animator;

@end

@implementation ViewController

– (void)collisionBehavior:(UICollisionBehavior*)paramBehavior

beganContactForItem:(id )paramItem

withBoundaryIdentifier:(id )paramIdentifier

atPoint:(CGPoint)paramPoint{

NSString *identifier = (NSString *)paramIdentifier;

if ([identifier isEqualToString: kBottomBoundary]){

[UIView animateWithDuration:1.0f animations: ^{

UIView *view = (UIView *)paramItem;

view.backgroundColor = [UIColor redColor];

view.alpha = 0.0f;

view.transform = CGAffineTransformMakeScale(2.0f, 2.0f);

} completion: ^(BOOL finished) {

UIView *view = (UIView *)paramItem;

[paramBehavior removeItem: paramItem];

[view removeFromSuperview];

}];

}

}

– (void)viewDidAppearBOOL)animated{

[super viewDidAppear: animated];

/* Создаем виды */

NSUInteger const NumberOfViews = 2;

self.squareViews = [[NSMutableArray alloc] initWithCapacity: NumberOfViews];

NSArray *colors = @[[UIColor redColor], [UIColor greenColor]];

CGPoint currentCenterPoint = CGPointMake(self.view.center.x, 0.0f);

CGSize eachViewSize = CGSizeMake(50.0f, 50.0f);

for (NSUInteger counter = 0; counter < NumberOfViews; counter++){

UIView *newView =

[[UIView alloc] initWithFrame:

CGRectMake(0.0f, 0.0f, eachViewSize.width, eachViewSize.height)];

newView.backgroundColor = colors[counter];

newView.center = currentCenterPoint;

currentCenterPoint.y += eachViewSize.height + 10.0f;

[self.view addSubview: newView];

[self.squareViews addObject: newView];

}

self.animator = [[UIDynamicAnimator alloc]

initWithReferenceView: self.view];

/* Создаем тяготение */

UIGravityBehavior *gravity = [[UIGravityBehavior alloc]

initWithItems: self.squareViews];

[self.animator addBehavior: gravity];

/* Создаем обнаружение столкновений */

UICollisionBehavior *collision = [[UICollisionBehavior alloc]

initWithItems: self.squareViews];

[collision

addBoundaryWithIdentifier: kBottomBoundary

fromPoint: CGPointMake(0.0f, self.view.bounds.size.height – 100.0f)

toPoint: CGPointMake(self.view.bounds.size.width,

self.view.bounds.size.height – 100.0f)];

collision.collisionDelegate = self;

[self.animator addBehavior: collision];

}

Объясню, что происходит в коде. Во-первых, мы создаем два вида и кладем их один на другой. Эти виды представляют собой два обычных разноцветных квадрата: второй находится на первом. Оба они добавлены к контроллеру вида. Как и в предыдущих примерах, мы добавляем к аниматору поведение тяготения. Это означает, что, как только анимация начнет действовать, виды станут как будто сползать по опорному виду сверху вниз. Мы не задаем границы опорного вида в качестве границ столкновения, а самостоятельно проводим границу столкновения, располагая ее в 100 точках над нижней границей экрана. У нас получается невидимая линия, проходящая по экрану слева направо. Она не позволяет видам бесконечно падать вниз и выходить за пределы опорного вида.

Кроме того, как видите, мы задаем вид с контроллером в качестве делегата поведения столкновения. Таким образом, он получает обновления от этого поведения, сообщающие, произошло ли столкновение и если произошло, то когда. Как только вы узнаете о факте столкновения, то, вероятно, захотите определить, было ли это столкновение с границей (например, созданной нами) или с одним из элементов сцены. Например, если вы создали в опорном виде множество виртуальных стен, а маленькие виды-квадраты могут сталкиваться с этими стенами, то можете реализовать иной эффект (скажем, взрыв), зависящий от того, с чем именно произошло столкновение. О том, с каким элементом произошло столкновение, вы сможете узнать из делегатного метода, вызываемого в контроллере вида и дающего идентификатор той границы, с которой столкнулся элемент. Зная, какой это был объект, мы можем решить, что делать дальше.

В примере мы сравниваем идентификатор, получаемый от поведения столкновения, с константой kBottomBoundary, которую присвоили барьеру при создании этого барьера. Создаем для объекта такую анимацию: квадрат под действием тяготения движется по экрану вниз, вплоть до установленной нами границы. Граница гарантирует, что квадрат остановится на расстоянии 100 точек от нижнего края экрана, на проведенной линии.

Одним из самых интересных свойств класса UIGravityBehavior является collisionMode. Это свойство описывает, как столкновение должно обрабатываться в аниматоре. Например, в предыдущем примере мы рассмотрели типичное столкновение, добавленное в аниматор без изменения значения collisionMode. В данном случае это поведение регистрирует столкновения между квадратиками, а также между квадратиками и теми границами, которые мы провели в опорном виде. Однако мы можем модифицировать это поведение, изменив значение упомянутого свойства. Вот значения, которые можно для него задать:

• UICollisionBehaviorModeItems – при таком значении поведение будет регистрировать столкновения между динамическими элементами – в данном случае между движущимися квадратиками;

• UICollisionBehaviorModeBoundaries – при этом значении регистрируются столкновения между динамическими элементами и установленными нами границами, расположенными в опорном виде;

• UICollisionBehaviorModeEverything – при таком значении регистрируются любые столкновения, независимо от того, участвуют в них сами элементы, элементы и границы или что-либо еще. Это значение для данного свойства задается по умолчанию.

Можно комбинировать рассмотренные ранее значения с помощью побитового оператора ИЛИ и создавать сочетания режимов столкновения, соответствующие поставленным перед вами бизнес-требованиям.

Рекомендую поэкспериментировать со значениями свойства collisionMode и в предыдущем примере задать для этого свойства значение UICollisionBehaviorModeBoundaries, а потом запустить приложение. Вы увидите, как оба квадратика упадут в нижнюю часть экрана, окажутся на проведенной границе, но не столкнутся, а вдвинутся друг в друга. Дело в том, что код просто проигнорирует столкновение между ними.

Раздел 2.1.

2.3. Анимирование компонентов пользовательского интерфейса с помощью толчков

Требуется визуально перебрасывать виды с одного места на экране на другое.

Инициализируйте объект поведения типа UIPushBehavior с помощью относящегося к нему метода initWithItems: mode: и передайте ему значение UIPushBehaviorModeContinuous. Как только будете готовы толкать элементы под углом, вызовите для толчка метод setAngle:. Этот метод задает угол (в радианах) для данного поведения. Затем потребуется установить магнитуду, то есть силу толчка. Эта величина задается с помощью относящегося к толчку поведения setMagnitude:. Магнитуда рассчитывается следующим образом: магнитуда величиной 1 точка соответствует ускорению 100 точек/с2, прилагаемому к целевым видам.

Толчки, прилагаемые к экранным элементам, очень полезны – особенно толчки, вызывающие непрерывное движение. Допустим, вы разрабатываете приложение-фотоальбом для iPad. В верхней части экрана создали три слайда, каждый из которых соответствует странице альбома, созданной пользователем. В нижней части экрана располагаются различные картинки, которые пользователь может перетаскивать и раскладывать на страницах. Один из способов, позволяющих реализовать для пользователя такую возможность, – добавление к опорному виду регистратора жестов касания (tap gesture recognizer), создание которого рассмотрено в разделе 10.5. Этот регистратор обеспечивает отслеживание пользовательских жестов касания и позволяет перемещать изображения на целевой слайд. Процесс выглядит как перетаскивание. Другой, пожалуй, более оптимальный способ решения этой задачи – использование толчкового поведения, которое разработчики Apple включили в UIKit.

Толчковое поведение относится к типу UIPushBehavior и обладает магнитудой и углом. Угол измеряется в радианах, а магнитуда в 1 точку приводит к ускорению движения, равному 100 точек/с2. Толчковые поведения создаются точно так же, как и любые другие: сначала их необходимо инициализировать, а потом добавить к аниматору типа UIDynamicAnimator.

В этом примере мы собираемся создать вид и поместить его в центре более крупного вида контроллера. Мы подключим к аниматору поведение столкновений, благодаря чему маленький вид не будет вылетать за пределы большого вида (с контроллером). О том, как работать со столкновениями, мы поговорили в разделе 2.2. Затем добавим регистратор жестов касания (см. раздел 10.5) к контроллеру вида. Этот регистратор будет уведомлять нас о каждом жесте касания, произошедшем на экране.

Когда касание будет зарегистрировано, рассчитаем угол между точкой касания и центром маленького квадратного вида. Так мы получим угол, выраженный в радианах, под которым сможем толкнуть этот квадратный вид. Затем рассчитаем расстояние между точкой касания и центром маленького вида, полученное значение используем в качестве магнитуды толчка. Таким образом, магнитуда будет тем больше, чем дальше от центра квадратного вида находится точка касания.

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

Рис. 2.2. Расчет угла между двумя точками

Итак, начнем с определения всех важных свойств нашего контроллера вида:

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIView *squareView;

@property (nonatomic, strong) UIDynamicAnimator *animator;

@property (nonatomic, strong) UIPushBehavior *pushBehavior;

@end

@implementation ViewController

<# Остальной ваш код находится здесь #>

В этом примере мы добавим к аниматору поведение столкновения и толчковое поведение. Толчковое поведение добавляется к классу в качестве свойства, а поведение столкновений – просто как локальная переменная. Дело в том, что, как только мы добавим к аниматору поведение столкновения, именно аниматор будет вычислять все столкновения с границами опорного вида и нам больше не придется ссылаться на это поведение столкновений. Однако если говорить о толчковом поведении, то при обработке касаний придется обновлять это толчковое поведение, чтобы графический элемент подталкивался к точке касания. Вот почему нам требуется связь касания с толчковым поведением, но не требуется такая связь со столкновениями.

Далее напишем метод, создающий маленький квадратный вид и помещающий его в центре большого вида с контроллером:

– (void) createSmallSquareView{

self.squareView =

[[UIView alloc] initWithFrame:

CGRectMake(0.0f, 0.0f, 80.0f, 80.0f)];

self.squareView.backgroundColor = [UIColor greenColor];

self.squareView.center = self.view.center;

[self.view addSubview: self.squareView];

}

Затем применим регистратор жестов касания, чтобы обнаруживать прикосновения к виду с контроллером:

– (void) createGestureRecognizer{

UITapGestureRecognizer *tapGestureRecognizer =

[[UITapGestureRecognizer alloc] initWithTarget: self