Обсуждение

We use cookies. Read the Privacy and Cookie Policy

Обсуждение

На первый взгляд термин «адаптивное изображение» может показаться странным, но все становится на свои места, если учесть, что ваше приложение будет отображаться в довольно разных условиях, в зависимости от ситуации. Например, у вас может быть приложение для iOS, в котором все кнопки имеют фоновые изображения. Чем крупнее текст на кнопке, тем шире должна быть сама кнопка. Итак, есть два способа, которыми можно создать подходящие фоновые изображения для кнопок.

• Создать по одному изображению для каждого из размеров кнопки. В результате пакет приложения увеличится, возрастет потребление памяти, а вам придется выполнять больше работы. Кроме того, при изменении текста вновь потребуется подгонять изображение под размеры кнопки.

• Создать всего одно адаптивное изображение и использовать его во всем приложении для всех кнопок.

Несомненно, второй вариант кажется гораздо более привлекательным. Итак, что же представляют собой адаптивные изображения? Это просто изображения, состоящие из двух виртуальных областей:

• области, размер которой не меняется;

• области, размер которой свободно меняется и принимает нужные значения.

Как показано на рис. 17.11, мы создали изображение для кнопки. Внимательно рассмотрев это изображение, вы замечаете, что оно состоит из градиента. Область, которую я отрисовал вокруг прямоугольника, не может быть вырезана из приложения. Возникает вопрос: а почему? Смотрим еще внимательнее! Если я вырежу эту область и задам для нее значения высоты и ширины всего по 1 пикселу (как сейчас), то в приложении я смогу объединить сколько угодно таких однопиксельных полосок и сделать точно такую же область, какая выделена на этом рисунке (рис. 17.12).

Рис. 17.11. Изображение, в котором есть избыточная область, наиболее целесообразно сделать адаптивным

Рис. 17.12. Все отдельные срезы центральной секции изображения совершенно одинаковы

Итак, как нам уменьшить изображение, но по-прежнему иметь возможность создать из него кнопку? Ответ прост. В данном случае, когда изображение является совершенно одинаковым по всей длине, мы просто вырежем по центру изображения очень узкий фрагмент. Его ширина составит 1 пиксел, а высота не изменится. На рис. 17.13 показано, как изображение будет выглядеть после этой операции.

Рис. 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. На экране находится кнопка с адаптивным фоновым изображением

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