Текст книги "iOS. Приемы программирования"

Глава 17. Графика и анимация

17.0. Введение

Не сомневаюсь, что вам доводилось видеть программы для iPhone и iPad с очень красивой графикой. Кроме того, вы, наверное, встречали забавную анимацию в играх и других программах. При совместном использовании среды времени исполнения iOS и фреймворков программирования Cocoa Touch можно создавать самые разнообразные графические и анимационные эффекты с помощью сравнительно простого кода. Разумеется, качество этой графики и анимации частично зависит от эстетического вкуса программиста и его коллег-художников. Но в этой главе вы увидите, как много можно сделать в области графики и анимации, обладая весьма скромными навыками программирования.

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

В Cocoa Touch приложение состоит из окон (Window) и видов (View). Если у приложения есть пользовательский интерфейс, то в нем присутствует как минимум одно окно. Окно, в свою очередь, может содержать один или несколько видов. В Cocoa Touch окно является экземпляром класса UIWindow. Обычно в приложении открывается главное окно, и программист добавляет в это окно виды, представляющие разные компоненты пользовательского интерфейса. Видами являются, в частности, кнопки, подписи, изображения и специальные элементы управления, создаваемые самим программистом (Custom Controls). Отрисовка всех этих элементов пользовательского интерфейса и управление ими обеспечиваются во фреймворке UIKit.

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

Apple предоставляет разработчикам мощные фреймворки, предназначенные для управления графикой и анимацией в операционных системах iOS и OS X. Далее перечислены некоторые из этих фреймворков и технологий.

• UIKit – это высокоуровневый фреймворк, позволяющий разработчикам создавать виды, окна, кнопки и другие компоненты пользовательского интерфейса. Кроме того, он включает ряд низкоуровневых API в состав высокоуровневого API, работать с которым довольно несложно.

• Quartz 2D – это основной движок, который работает «под капотом» операционной системы и обеспечивает отрисовку в iOS. Quartz применяется и во фреймворке UIKit.

• Core Graphics – фреймворк, поддерживающий графический контекст (подробнее об этом – в дальнейшем), загружающий изображения, отрисовывающий изображения и т. д.

• Core Animation – как следует из его названия, этот фреймворк обеспечивает применение анимации в iOS.

Приступая к рисованию на экране, исключительно важно усвоить одну концепцию: понять соотношение между точками и пикселами. С пикселами все ясно, но вот что такое точки? Это не зависящий от устройства аналог пикселов. Проще говоря, когда вы пишете приложение для iOS и от вас требуется указать какие-либо параметры, например высоту и ширину, то iOS считывает предоставленные вами значения как точки, а не как пикселы.

Например, если вы хотите заполнить весь экран на iPhone 5, ваш экранный элемент должен иметь ширину 320 и высоту 568. Однако мы знаем, что истинное разрешение экрана у iPhone 5 составляет 640 × 1136. В этом и заключается прелесть точек: оказывается, при работе с ними учитывается коэффициент масштабирования.

Здесь необходимо подробнее объяснить, что такое коэффициент масштабирования. Это обычное число с плавающей точкой, позволяющее iOS определить точное количество пикселов на экране. Для этого проверяется число логических точек, которые можно отобразить на этом экране. На iPhone 5 коэффициент масштабирования равен 2,0. Соответственно, iOS умножает 320 на 2, чтобы получить точное количество пикселов, которое устройство может отобразить по горизонтали, и умножает 568 на 2, чтобы получить количество пикселов по вертикали.

На экране устройства с iOS начало координат расположено в левом верхнем углу. Такие экраны также именуются ULO-экранами (от английского термина Upper Left Origin – «начало в левом верхнем углу»).

Это означает, что точка с координатами (0; 0) – крайняя точка в левом верхнем углу экрана. В таком случае положительные значения по оси X идут от нее направо, а положительные значения по оси Y – вниз. Иными словами, точка с координатой x = 20 находится на экране правее, чем точка с координатой x = 10. По оси Y точка с координатой y = 20 расположена ниже, чем точка y = 10.

В этой главе мы будем использовать объекты-виды типа UIView для отрисовки фигур, строк и любых других элементов, видимых на экране.

Предполагается, что вы работаете с новейшей версией Xcode on Apple. Если нет, откройте OS X, скачайте и установите новейшую версию Xcode.

Чтобы включить некоторые рассматриваемые здесь примеры кода в приложение, я сначала покажу, что нужно сделать для создания нового проекта в Xcode и подкласса от UIView, куда мы сможем поместить наш код.

1. Откройте Xcode.

2. В меню File (Файл) выполните команду New – Project (Новый – Проект).

3. Убедитесь, что в левой части экрана выбрана категория iOS. В этой категории укажите вариант Application (Приложение) (рис. 17.1)

4. В правой части экрана выберите Single View Application (Приложение с единственным видом) и нажмите Next (Далее) (рис. 17.1).

Рис. 17.1. Создание приложения с единственным видом для iOS в Xcode

5. В поле Product Name (Название продукта) (рис. 17.2) наберите имя вашего проекта.

Рис. 17.2. Установка параметров для нового проекта в Xcode

6. В поле Company Identifier (Идентификатор компании) введите префикс, идентифицирующий пакет, который предшествует выбранному вами названию продукта. Обычно идентификатор записывается в формате com.company.

7. Из списка Devices (Устройства) выберите Universal, а затем нажмите кнопку Next (Далее).

8. В следующем окне выберите, где вы хотите сохранить ваш проект, и нажмите Create (Создать).

Теперь проект Xcode открыт. В левой части окна Xcode раскройте группу Graphics (Графика) и просмотрите все файлы, которые Xcode создала для проекта. Теперь потребуется создать объект вида для контроллера вида. Для этого выполните следующие шаги.

1. Щелкните правой кнопкой мыши на корневом каталоге группы вашего проекта в Xcode и выберите New File (Новый файл).

2. Убедитесь, что в диалоговом окне New File (Новый файл) слева в качестве категории указан вариант iOS, и в качестве подкатегории выберите Cocoa Touch (рис. 17.3)

3. В правой части окна выберите класс Objective-C, а потом нажмите Next (Далее) (см. рис. 17.3).

Рис. 17.3. Создание нового класса Objective-C в Xcode

4. Убедитесь, что в следующем окне (рис. 17.4) в поле Subclass of (Подкласс) написано UIView, а потом задайте для вашего класса имя View. Далее сохраните файл на диске и нажмите Next (Далее).

Рис. 17.4. Создание подкласса от UIView

5. Теперь откройте ваш файл раскадровки для iPhone и выберите вид для контроллера вида. Раскройте раздел Utilities (Вспомогательная область) в конструкторе интерфейсов и измените имя класса того вида, в котором находится ваш контроллер вида, на View (рис. 17.5).

Рис. 17.5. Изменение имени класса контроллера вида в раскадровке

Поскольку мы создали универсальное приложение, те же манипуляции понадобится выполнить в файле раскадровки для iPad. Обычно два этих файла называются Main_iPhone.storyboard и Main_iPad.storyboard.

Итак, мы готовы приступить к написанию кода. А ведь сделать пришлось не так уж много – просто создать класс вида, относящегося к типу UIView, чтобы позже можно было изменять код этого класса. Потом мы воспользовались конструктором интерфейсов, чтобы задать в качестве класса вида контроллера вида тот самый объект вида, который мы создали ранее. Это означает, что вид контроллера вида теперь будет экземпляром созданного нами класса View.

Полагаю, вы уже просмотрели содержимое объекта-вида, сгенерированного Xcode. Один из самых важных методов этого объекта – drawRect:. Cocoa Touch автоматически вызывает этот метод всякий раз, когда приходит время отрисовывать вид. Данный метод используется для того, чтобы приказать объекту-виду отрисовать свое содержимое в графическом контексте. В свою очередь, Cocoa Touch автоматически готовит такой контекст для вида. Графический контекст можно сравнить с холстом (Canvas). Он предлагает огромное количество свойств, в частности цвет кисти (Pen Color), ее толщину (Pen Thickness) и т. д. Имея контекст, вы можете начать рисовать прямо внутри метода drawRect:, а Cocoa Touch гарантирует, что атрибуты и свойства контекста будут применены к вашим рисункам. Мы подробнее обсудим эти детали в дальнейшем, а пока перейдем к более интересным темам.

17.1. Перечисление и загрузка шрифтов

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

Воспользуйтесь классом UIFont.

Шрифты имеют фундаментальное значение для отображения текста в графическом пользовательском интерфейсе. Во фреймворке UIKit программисту предоставляются высокоуровневые API, обеспечивающие перечисление, загрузку и использование шрифтов. В Cocoa Touch шрифты заключены в классе UIFont. В каждом устройстве с iOS есть встроенные системные шрифты. Шрифты распределены по семействам (Family), а в каждом семействе есть гарнитуры (Faces). Например, Helvetica – это семейство шрифтов, а Helvetica Bold – одна из гарнитур этого семейства. Чтобы шрифт можно было загрузить, необходимо знать гарнитуру шрифта (фактически его название), а чтобы узнать гарнитуру, нужно знать семейство. Итак, для начала перечислим все семейства шрифтов, которые уже установлены на устройстве, воспользовавшись методом familyNames класса UIFont:

– (void) enumerateFonts{

for (NSString *familyName in [UIFont familyNames]){

NSLog(@"Font Family = %@", familyName);

}

}

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

Font Family = Thonburi

Font Family = Academy Engraved LE

Font Family = Snell Roundhand

Font Family = Avenir

Font Family = Marker Felt

Font Family = Geeza Pro

Font Family = Arial Rounded MT Bo Font Family = Trebuchet MS

…

Выстроив такой список семейств шрифтов, мы можем перечислить гарнитуры в каждом семействе. Будем пользоваться методом fontNamesForFamilyName: класса UIFont, а в ответ получим массив названий гарнитур из того семейства шрифтов, которое мы указали как параметр:

– (void) enumerateFonts{

for (NSString *familyName in [UIFont familyNames]){

NSLog(@"Font Family = %@", familyName);

for (NSString *fontName in

[UIFont fontNamesForFamilyName: familyName]){

NSLog(@"t%@", fontName);

}

}

}

Запустив этот код в симуляторе iOS, получим:

Font Family = Thonburi Thonburi-Bold Thonburi

Font Family = Academy Eng AcademyEngravedLetPla

Font Family = Snell Round SnellRoundhand-Bold SnellRoundhand-Black SnellRoundhand

…

Итак, мы видим, что Thonburi – это семейство шрифтов, а Thonburi-Bold – одна из гарнитур этого семейства. Теперь, зная имя шрифта, мы можем загружать шрифты в объекты типа UIFont с помощью метода класса fontWithName: size:, относящегося к классу UIFont:

__unused UIFont *font = [UIFont fontWithName:@"Thonburi-Bold"

size:12.0f];

Если в результате работы метода класса fontWithName: size:, относящегося к классу UIFont, имеем nil, это означает, что найти шрифт с указанным именем не удалось. Убедитесь, что шрифт с заданным вами именем присутствует в системе. Для этого сначала перечислите все семейства шрифтов, а потом все названия гарнитур из каждого семейства.

Кроме того, можно воспользоваться методом экземпляра systemFontOfSize:, относящимся к классу UIFont (или его «жирным» аналогом, boldSystemFontOfSize:), для загрузки локальных системных шрифтов – где бы они ни находились – прямо на устройстве, где работает ваш код. Стандартный системный шрифт в iOS – Helvetica.

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

Раздел 17.2.

17.2. Отрисовка текста

Требуется рисовать текст на экране устройства с iOS.

Воспользуйтесь методом drawAtPoint: withFont: класса NSString.

Для отрисовки текста можно воспользоваться очень удобными методами, входящими в состав класса NSString. Один из таких методов – drawAtPoint: withFont:. Но прежде чем продолжить работу, еще раз удостоверьтесь в том, что выполнили все инструкции из введения к этой главе. Теперь у вас должен быть объект-вид, являющийся подклассом от UIView. Он должен называться GraphicsViewControllerView. Откройте этот файл. Если закомментирован метод экземпляра drawRect:, относящийся к объекту-виду, то раскомментируйте его, чтобы включить этот метод в объект:

#import «View.h»

@implementation View

– (id)initWithFrame:(CGRect)frame{

self = [super initWithFrame: frame];

if (self) {

// Код инициализации

}

return self;

}

– (void)drawRect:(CGRect)rect{

}

@end

Именно в методе drawRect: будет происходить все рисование, как мы указывали ранее. Здесь мы можем приступать к загрузке шрифта, а потом нарисовать на экране простую текстовую строку, которая будет начинаться на уровне 40 по оси X и на уровне 180 по оси Y (рис. 17.6):

Рис. 17.6. Произвольная строка, нарисованная в графическом контексте вида

– (void)drawRect:(CGRect)rect{

UIFont *helveticaBold = [UIFont fontWithName:@"HelveticaNeue-Bold

size:40.0f];

NSString *myString = @"Some String";

[myString drawAtPoint: CGPointMake(40, 180)

withFont: helveticaBold];

}

В этом коде мы просто загружаем жирный шрифт Helvetica (кегль 40) и рисуем с его помощью текст Some String, который начинается в точке (40; 180).

17.3. Создание, установка и использование цветов

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

Воспользуйтесь классом UIColor.

Во фреймворке UIKit программисту предоставляются высокоуровневые абстракции цветов, инкапсулированные в объекте UIColor. В этом классе имеются очень удобные методы класса, в частности redColor, blueColor, brownColor и yellowColor. Тем не менее, если вас интересует иной цвет, кроме тех, чьи параметры явно задаются как параметры этого метода класса UIColor, можно воспользоваться методом класса colorWithRed: green: blue: alpha:, относящимся к классу UIColor, и загрузить искомое цветовое значение. Возвращаемое значение этого метода относится к типу UIColor. Данный метод имеет следующие параметры:

• red – доля красного в конкретном оттенке. Это значение может находиться в диапазоне от 0.0f до 1.0f, где 0.0f полностью исключает красный компонент, а 1.0f дает максимально насыщенный темно-красный цвет;

• green – доля зеленого, смешиваемая с красным в цвете. Это значение также может находиться в диапазоне от 0.0f до 1.0f;

• blue – доля голубого, смешиваемая с красным и зеленым в цвете. Это значение также может находиться в диапазоне от 0.0f до 1.0f;

• alpha – матовость (непрозрачность) цвета. Это значение может находиться в диапазоне от 0.0f до 1.0f, где 1.0f делает цвет полностью матовым, а 0.0f – полностью прозрачным (иными словами, невидимым).

Имея объект типа UIColor, вы можете воспользоваться его методом экземпляра set, чтобы в текущем графическом контексте этот цвет использовался для рисования.

Можно применять метод класса colorWithRed: green: blue: alpha:, относящийся к классу UIColor, для загрузки основных цветов, например красного. Для этого параметру red просто сообщается значение 1.0f, а параметрам green и blue – значение 0.0f. Значение параметра alpha выбираете сами.

Взглянув на рис. 17.1, мы видим, что заданный по умолчанию цвет фона для созданного нами объекта-вида – серый, довольно некрасивый. Исправим это. Просто найдем метод экземпляра viewDidLoad контроллера вида GraphicsViewController и изменим фоновый цвет вида на белый, как показано здесь:

– (void)viewDidLoad{

[super viewDidLoad];

self.view.backgroundColor = [UIColor whiteColor];

}

Для отрисовки текста в текущем графическом контексте будем пользоваться методами экземпляра класса NSString, подробнее об этом – чуть позже.

Теперь загрузим в объект типа UIColor пурпурный цвет, а потом нарисуем в графическом контексте вида текст I Learn Really Fast, использовав для этого жирный шрифт Helvetica кегля 30 (о загрузке шрифтов рассказано в разделе 17.1):

– (void)drawRect:(CGRect)rect{

/* Загружаем цвет. */

UIColor *magentaColor =[UIColor colorWithRed:0.5f

green:0.0f

blue:0.5f

alpha:1.0f];

/* Задаем цвет в графическом контексте. */

[magentaColor set];

/* Загружаем шрифт. */

UIFont *helveticaBold = [UIFont fontWithName:@"HelveticaNeue-Bold"

size:30.0f];

/* Строка, которую требуется отрисовать. */

NSString *myString = @"I Learn Really Fast";

/* Рисуем строку выбранным шрифтом.

Цвет мы уже установили. */

[myString drawAtPoint: CGPointMake(25, 190)

withAttributes:@{

NSFontAttributeName: helveticaBold

}];}

Результат показан на рис. 17.7.

Рис. 17.7. Строка, отрисованная выбранным цветом в графическом контексте

Кроме того, мы можем воспользоваться методом экземпляра drawInRect: withFont:, относящимся к классу NSString, чтобы нарисовать текст внутри прямоугольной области. Текст будет растянут, чтобы он полностью занял отведенное пространство. Фреймворк UIKit даже позволяет переносить часть текста на следующую строку, если он не будет умещаться в отведенном прямоугольнике по горизонтали. Границы прямоугольной области инкапсулированы в структурах CGRect. Для создания границ прямоугольника можно использовать функцию CGRectMake:

– (void)drawRect:(CGRect)rect{

/* Загружаем цвет. */

UIColor *magentaColor = [UIColor colorWithRed:0.5f

green:0.0f

blue:0.5f

alpha:1.0f];

/* Задаем цвет в графическом контексте. */

[magentaColor set];

/* Загружаем шрифт. */

UIFont *helveticaBold = [UIFont boldSystemFontOfSize:30];

/* Строка, которую требуется отрисовать. */

NSString *myString = @"I Learn Really Fast";

/* Рисуем строку выбранным шрифтом.

Цвет мы уже установили. */

[myString drawInRect: CGRectMake(100, /* x */

120, /* y */

100, /* ширина */

200) /* высота */

options: NSStringDrawingUsesLineFragmentOrigin

attributes:@{

NSFontAttributeName: helveticaBold

}

context: nil];

}

Функция CGRectMake принимает четыре параметра:

• x – положение начала координат прямоугольника по оси X относительно графического контекста. В iOS это значение соответствует количеству точек, отсчитанному вправо от левой стороны прямоугольника;

• y – положение начала координат прямоугольника по оси Y относительно графического контекста. В iOS это значение соответствует количеству точек, отсчитанному вниз от верхней стороны прямоугольника;

• width – ширина прямоугольника в точках;

• height – высота прямоугольника в точках.

Результат выполнения кода показан на рис. 17.8.

Рис. 17.8. Отрисовка строки в прямоугольном пространстве

UIColor – это, в сущности, предоставляемая в UIKit оболочка для класса CGColor из фреймворка Core Graphics. Переходя к довольно низкоуровневому программированию – то есть на уровне Core Graphics, – мы неожиданно обретаем значительно более полный контроль над использованием цветовых объектов и даже можем определить цветовые компоненты, из которых состоит конкретный оттенок. Допустим, в каком-то другом коде вы получили объект типа UIColor и хотите определить, каковы содержащиеся в нем доли компонентов red, green, blue и alpha. Чтобы получить компоненты, из которых состоит объект UIColor, выполните следующие шаги.

1. Используйте метод экземпляра CGColor, относящийся к классу UIColor. В результате вы получите цветовой объект типа CGColorRef, представляющий собой ссылку на цветовой объект (Color Reference) – объект из фреймворка Core Graphics.

2. Применяйте функцию CGColorGetComponents для получения компонентов, составляющих цветовой объект.

3. При необходимости пользуйтесь функцией CGColorGetNumberOfComponents, чтобы определить количество компонентов, примененных для создания данного оттенка (красный + зеленый и т. д.).

Вот пример:

– (void) drawRect:(CGRect)rect{

/* Загрузка цвета */

UIColor *steelBlueColor = [UIColor colorWithRed:0.3f

green:0.4f

blue:0.6f

alpha:1.0f];

CGColorRef colorRef = [steelBlueColor CGColor];

const CGFloat *components = CGColorGetComponents(colorRef);

NSUInteger componentsCount = CGColorGetNumberOfComponents(colorRef);

NSUInteger counter = 0;

for (counter = 0;

counter < componentsCount;

counter++){

NSLog(@"Component %lu = %.02f",

(unsigned long)counter + 1,

components[counter]);

}

}

После запуска кода получим в окне консоли следующий вывод:

Component 1 = 0.30

Component 2 = 0.40

Component 3 = 0.60

Component 4 = 1.00