Вандад Нахавандипур - iOS. Приемы программирования
Рис. 17.13. Область изображения, размер которой можно изменять, теперь равна по ширине одной точке
И вот начинается самое интересное. Как мы можем сообщить iOS SDK, какие части изображения оставить нетронутыми, а какую часть растягивать? Оказывается, в iOS SDK уже предусмотрена такая возможность. Сначала загрузите ваше изображение в память с помощью API UIImage, изученных в этой главе. Создав экземпляр UIImage с таким изображением, которое гарантированно можно растягивать, преобразуйте этот экземпляр в адаптивное изображение. Это делается с помощью метода экземпляра resizableImageWithCapInsets:, относящегося как раз к рассматриваемому экземпляру. Параметр, принимаемый этим методом, относится к типу UIEdgeInsets, который, в свою очередь, определяется вот так:
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right;
} UIEdgeInsets;
Краевые отступы нужны для того, чтобы создавать так называемые девятичастные изображения (nine-part images в терминологии Apple). Имеются в виду изображения, включающие в себя следующие девять компонентов:
• верхний левый угол;
• верхний край;
• верхний правый угол;
• правый край;
• нижний правый угол;
• нижний край;
• нижний левый угол;
• левый край;
• центр.
На рис. 17.14 все проиллюстрировано максимально наглядно.
Рис. 17.14. Девятичастное изображение
Изображения сохраняются в девятичастном виде для того, чтобы программист мог адаптировать его размер по горизонтали и вертикали практически как угодно. Когда программисту требуется адаптировать изображение, некоторые из этих компонентов изменяют размер, а другие остаются нетронутыми. Никогда не меняются величины углов. Адаптация размеров других компонентов происходит следующим образом:
• верхний край — размер этого компонента изображения может изменяться по ширине, но не по высоте;
правый край — размер этого компонента изображения может изменяться по высоте, но не по ширине;
нижний край — размер этого компонента изображения, так же как и верхнего края, может изменяться по ширине, но не по высоте;
левый край — размер этого компонента изображения, так же как и правого края, может изменяться по высоте, но не по ширине;
центр — размеры центра могут меняться как по высоте, так и по ширине.
Значения отступов по верхнему, левому, нижнему и правому краям задают размеры той области, которую вы не хотите растягивать. Например, вы задали для левого края значение 10, для верхнего края — значение 11, для правого края — значение 14 и для нижнего — 5. Так вы приказываете iOS провести через изображение вертикальную линию в 10 точках от левого края, горизонтальную линию в 11 точках от верхнего края, еще одну вертикальную линию в 14 точках от правого края и, наконец, горизонтальную линию в 5 точках от нижнего края. Прямоугольная область, заключенная между этими линиями, может изменять размер (является адаптивной), а область вне этого контура — не может. Если все кажется немного запутанным, представьте себе прямоугольник (ваше изображение), а затем начертите внутри него другой прямоугольник. Размеры внутреннего прямоугольника могут меняться, размеры внешнего — нет. Предлагаю вновь рассмотреть ситуацию на картинке (рис. 17.15).
Рис. 17.15. Размеры изменяемой части изображения определяются по величине отступов от краев
На самом деле отступы слева и справа на рис. 17.15 одинаковы. Отступы от нижнего и верхнего краев также одинаковы. Я указал для них разные значения лишь для того, чтобы процесс создания отступов был более понятным и логичным. Если бы все значения отступов были одинаковы, то позже мы могли бы запутаться: а о каком из отступов сейчас идет речь?
Для такого изображения, как показано на рис. 17.15, краевые отступы создаются следующим образом:
UIEdgeInsets edgeInsets;
edgeInsets.left = 20.0f;
edgeInsets.top = 10.0f;
edgeInsets.right = 24.0f;
edgeInsets.bottom = 14.0f;
А теперь возвращаемся к учебному коду. Здесь мы попытаемся использовать адаптивное изображение, показанное на рис. 17.13, в реальном приложении. Мы создадим кнопку и поместим ее в центре единственного вида, находящегося в нашем контроллере вида. На кнопке будет написано Stretched Image on Button (Адаптивное изображение на кнопке). Кнопка будет иметь 200 точек в ширину и 44 точки в высоту. Вот наш код:
#import «ViewController.h»
@interface ViewController ()
@property (nonatomic, strong) UIButton *button;
@end
@implementation ViewController
— (void)viewDidLoad{
[super viewDidLoad];
/* Инстанцируем кнопку */
self.button = [UIButton buttonWithType: UIButtonTypeCustom];
[self.button setFrame: CGRectMake(0.0f, 0.0f, 200.0f, 44.0f)];
/* Задаем надпись для кнопки */
[self.button setTitle:@"Stretched Image on Button"
forState: UIControlStateNormal];
/* Корректируем шрифт для текста */
self.button.titleLabel.font = [UIFont systemFontOfSize:15.0f];
/* Создаем адаптивное изображение */
UIImage *image = [UIImage imageNamed:@"Button"];
UIEdgeInsets edgeInsets;
edgeInsets.left = 14.0f;
edgeInsets.top = 0.0f;
edgeInsets.right = 14.0f;
edgeInsets.bottom = 0.0f;
image = [image resizableImageWithCapInsets: edgeInsets];
/* Задаем фоновое изображение для кнопки */
[self.button setBackgroundImage: image forState: UIControlStateNormal];
[self.view addSubview: self.button];
self.button.center = self.view.center;
}
@end
Теперь, запустив приложение, вы увидите примерно такую картинку, как на рис. 17.16.
Рис. 17.16. На экране находится кнопка с адаптивным фоновым изображением
См. также
Раздел 17.4.
17.6. Отрисовка линий
Постановка задачи
Требуется просто рисовать линии в графическом контексте.
Решение
Получите описатель для вашего графического контекста, а потом пользуйтесь функциями CGContextMoveToPoint и CGContextAddLineToPoint для отрисовки линии.
Обсуждение
Когда мы говорим о рисовании фигур в iOS или OS X, мы подразумеваем пути (paths). Что такое путь в данном случае? Путь возникает между одной или несколькими сериями точек, расположенными на экране. Между путями и линиями существует значительная разница. Путь может содержать несколько линий, но линия не может содержать несколько путей. Считайте, что путь — это просто серия точек.
Линии нужно рисовать, пользуясь путями. Укажите начальную и конечную точки пути, а потом прикажите Core Graphics заполнить этот путь за вас. Core Graphics считает, что вы создали линию вдоль этого пути, и нарисует его указанным вами цветом (см. раздел 17.3).
Более подробно мы рассмотрим пути в дальнейшем (в разделе 17.7), а пока сосредоточимся на том, как создавать с помощью путей прямые линии. Для этого нужно выполнить следующие шаги.
1. Выбрать цвет в вашем графическом контексте (см. раздел 17.3).
2. Получить описатель графического контекста — это делается с помощью функции UIGraphicsGetCurrentContext.
3. Задать начальную точку для линии, воспользовавшись процедурой CGContextMoveToPoint.
4. Переместить перо в графическом контексте, воспользовавшись процедурой CGContextAddLineToPoint, и указать конечную точку линии.
5. Создать намеченный путь с помощью процедуры CGContextStrokePath. Эта процедура отрисует путь в графическом контексте, использовав указанный вами цвет.
Кроме того, можно воспользоваться процедурой CGContextSetLineWidth, которая задает толщину линий, отрисовываемых в заданном графическом контексте. Первый параметр этой процедуры — графический контекст, на котором вы рисуете, а второй параметр — толщина линии, выражаемая числом с плавающей точкой (CGFloat).
В iOS толщина линии измеряется в логических точках.
Вот пример:
— (void)drawRect:(CGRect)rect{
/* Задаем цвет, которым собираемся отрисовывать линию. */
[[UIColor brownColor] set];
/* Получаем актуальный графический контекст. */
CGContextRef currentContext = UIGraphicsGetCurrentContext();
/* Задаем толщину линии. */
CGContextSetLineWidth(currentContext,
5.0f);
/* В этой точке будет начинаться линия. */
CGContextMoveToPoint(currentContext,
50.0f,
10.0f);
/* В этой точке линия будет заканчиваться. */
