Вандад Нахавандипур - iOS. Приемы программирования
17.4. Отрисовка изображений
Постановка задачи
Требуется возможность отрисовывать изображения на экране устройства с iOS.
Решение
Используйте класс UIImage для загрузки изображения и относящийся к изображению метод drawInRect: для отрисовки картинки в графическом контексте.
Обсуждение
Фреймворк UIKit очень упрощает задачи, связанные с рисованием. Все, что от вас требуется, — загрузить ваши изображения в экземпляры типа UIImage. В классе UIImage содержатся разнообразные методы класса и экземпляра, предназначенные для загрузки изображений. Вот некоторые из наиболее важных:
• imageNamed: (метод класса) — загружает изображение (если его удалось правильно загрузить, то и кэширует). Параметр этого метода — имя изображения в пакете, например Tree Texture.png;
• imageWithData: (метод класса) — загружает изображение из данных, инкапсулированных в экземпляре объекта NSData, который был передан данному методу в качестве параметра;
• initWithContentsOfFile: (метод экземпляра (для инициализации)) — использует указанный параметр как путь к изображению, которое должно быть загружено. Применяется для инициализации объекта изображения;
В данном случае подразумевается полный путь, указывающий на изображение в пакете приложения.
• initWithData: (метод экземпляра (для инициализации)) — использует полученный параметр типа NSData для инициализации изображения. Эти данные должны относиться к валидному изображению.
Чтобы добавить изображение в ваш проект в Xcode, выполните следующие шаги.
1. Найдите, где именно расположено изображение на вашем компьютере.
2. Перетащите это изображение в категорию изображений, которая обычно называется images.xcassets. Всю остальную работу Xcode выполнит за вас.
Для того чтобы получить ярлык Xcode, выполните следующие шаги:
1) найдите приложение Xcode в обозревателе;
2) находясь в обозревателе (Finder), нажмите на Xcode сочетание Command+I, чтобы получить информацию о приложении;
3) щелкните на ярлыке в верхнем левом углу окна справки Xcode;
4) нажмите Command+C, чтобы скопировать ярлык;
5) откройте приложение для предварительного просмотра (Preview);
6) нажмите сочетание клавиш Command+V, чтобы вставить ярлык Xcode в новое изображение;
7) полученный файл ICNS с пятью отдельными страницами сохраните в формате PDF, а потом удалите все, кроме ярлыка с наиболее высоким разрешением (страница 1 файла ICNS).
В этом разделе книги мы нарисуем изображение в графическом контексте, чтобы продемонстрировать общий принцип отрисовки изображений. Я уже нашел нужный файл и перетащил это изображение в мою программу для iOS. Теперь в пакете приложения есть изображение под названием Xcode.png (рис. 17.9).
Рис. 17.9. Ярлык Xcode, находящийся в приложении Xcode
Вот код для отрисовки изображения:
— (void)drawRect:(CGRect)rect{
UIImage *image = [UIImage imageNamed:@"Xcode.png"];
if (image!= nil){
NSLog(@"Successfully loaded the image.");
} else {
NSLog(@"Failed to load the image.");
}
}
Если в пакете вашего приложения есть изображение Xcode.png, то после запуска этого кода на консоли появится надпись Successfully loaded the image (Изображение успешно загружено). Если изображения нет — будет написано Failed to load the image (Не удалось загрузить изображение). В оставшейся части данного раздела предполагается, что у вас в пакете приложения есть нужное изображение. Можете смело помещать в пакет приложения и другие картинки, а потом ставить ссылки именно на них, а не на Xcode.png, которым я буду пользоваться в примерах кода.
Два самых простых способа отрисовки изображения типа UIImage в графическом контексте таковы:
• воспользоваться методом экземпляра drawAtPoint:, относящимся к классу UIImage. Таким образом в указанной точке отрисовывается изображение оригинального размера. Для создания этой точки используется функция CGPointMake;
• воспользоваться методом экземпляра drawInRect:, относящимся к классу UIImage. Изображение отрисовывается в заданной прямоугольной области. Для создания этой прямоугольной области используется функция CGRectMake:
— (void)drawRect:(CGRect)rect{
/* Предполагается, что нужное изображение есть в пакете вашего приложения
и его можно загрузить. */
UIImage *xcodeIcon = [UIImage imageNamed:@"Xcode.png"];
[xcodeIcon drawAtPoint: CGPointMake(0.0f,
20.0f)];
[xcodeIcon drawInRect: CGRectMake(50.0f,
10.0f,
40.0f,
35.0f)];
}
При показанном ранее вызове drawAtPoint: будет отрисовано изображение оригинальных размеров с центром в точке (0; 20). При вызове drawInRect: будет отрисовано изображение с центром в точке (50; 10) размером 40 × 35 точек. Результаты показаны на рис. 17.10.
Рис. 17.10. Отрисовку изображения в графическом контексте можно выполнить с помощью двух различных методов
Соотношение сторон (Aspect Ratio) — это отношение между шириной и высотой изображения на экране компьютера. Предположим, у нас есть изображение размером 100 × 100 пикселов. Если нарисовать это изображение с началом координат в точке (0; 0) и задать для него размеры (100; 200), то вы сразу же заметите на экране, что картинка вытянулась по высоте (было 100 пикселов, стало 200). Метод экземпляра drawInRect:, относящийся к классу UIImage, оставляет на ваш выбор решение о том, как именно вы будете отрисовывать изображения. Иными словами, именно вы будете указывать значения x, y, ширины и высоты вашего изображения, определяя, как именно оно будет выглядеть на экране.
См. также
Раздел 13.6.
17.5. Создание адаптивных изображений
Постановка задачи
Требуется экономить память и дисковое пространство, создавая для компонентов пользовательского интерфейса адаптивные изображения. Возможно, потребуется создать несколько вариантов одного и того же графического элемента, имеющих разные размеры. Например, это может быть несколько подобных кнопок, на каждой из которых используется одно и то же фоновое изображение.
Адаптивные изображения — это просто картинки в формате JPEG или PNG, которые можно загружать в экземпляры UIImage.
Решение
Создайте адаптивное изображение, воспользовавшись методом экземпляра resizableImageWithCapInsets:, относящимся к классу UIImage.
Обсуждение
На первый взгляд термин «адаптивное изображение» может показаться странным, но все становится на свои места, если учесть, что ваше приложение будет отображаться в довольно разных условиях, в зависимости от ситуации. Например, у вас может быть приложение для iOS, в котором все кнопки имеют фоновые изображения. Чем крупнее текст на кнопке, тем шире должна быть сама кнопка. Итак, есть два способа, которыми можно создать подходящие фоновые изображения для кнопок.
• Создать по одному изображению для каждого из размеров кнопки. В результате пакет приложения увеличится, возрастет потребление памяти, а вам придется выполнять больше работы. Кроме того, при изменении текста вновь потребуется подгонять изображение под размеры кнопки.
• Создать всего одно адаптивное изображение и использовать его во всем приложении для всех кнопок.
Несомненно, второй вариант кажется гораздо более привлекательным. Итак, что же представляют собой адаптивные изображения? Это просто изображения, состоящие из двух виртуальных областей:
• области, размер которой не меняется;
• области, размер которой свободно меняется и принимает нужные значения.
Как показано на рис. 17.11, мы создали изображение для кнопки. Внимательно рассмотрев это изображение, вы замечаете, что оно состоит из градиента. Область, которую я отрисовал вокруг прямоугольника, не может быть вырезана из приложения. Возникает вопрос: а почему? Смотрим еще внимательнее! Если я вырежу эту область и задам для нее значения высоты и ширины всего по 1 пикселу (как сейчас), то в приложении я смогу объединить сколько угодно таких однопиксельных полосок и сделать точно такую же область, какая выделена на этом рисунке (рис. 17.12).
Рис. 17.11. Изображение, в котором есть избыточная область, наиболее целесообразно сделать адаптивным
Рис. 17.12. Все отдельные срезы центральной секции изображения совершенно одинаковы
Итак, как нам уменьшить изображение, но по-прежнему иметь возможность создать из него кнопку? Ответ прост. В данном случае, когда изображение является совершенно одинаковым по всей длине, мы просто вырежем по центру изображения очень узкий фрагмент. Его ширина составит 1 пиксел, а высота не изменится. На рис. 17.13 показано, как изображение будет выглядеть после этой операции.
