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

1.21. Добавление кнопок в пользовательский интерфейс с помощью UIButton

Постановка задачи

Необходимо отобразить в пользовательском интерфейсе кнопку и обрабатывать события касания, связанные с этой кнопкой.

Решение

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

Обсуждение

Кнопки позволяют пользователям инициировать в приложениях те или иные действия. Например, пакет настроек iCloud в приложении Settings (Настройки) содержит кнопку Delete Account (Удалить учетную запись) (рис. 1.57). Если нажать эту кнопку, в приложении iCloud произойдет действие. Оно зависит от конкретного приложения. Не все приложения действуют одинаково, если пользователь нажимает в них кнопку Delete (Удалить). Как мы вскоре увидим, на кнопках могут присутствовать как изображения, так и текст.

Рис. 1.57. Кнопка Delete Account (Удалить учетную запись)

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

#import «ViewController.h»

@interface ViewController ()

@property (nonatomic, strong) UIButton *myButton;

@end

@implementation ViewController

По умолчанию высота UIButton в iOS 7 указывается как 44.0f пункта.

Теперь переходим к реализации кнопки (рис. 1.58):

– (void) buttonIsPressed:(UIButton *)paramSender{

NSLog(@"Button is pressed.");

}

– (void) buttonIsTapped:(UIButton *)paramSender{

NSLog(@"Button is tapped.");

}

– (void)viewDidLoad{

[super viewDidLoad];

self.myButton = [UIButton buttonWithType: UIButtonTypeRoundedRect];

self.myButton.frame = CGRectMake(110.0f,

200.0f,

100.0f,

44.0f);

[self.myButton setTitle:@"Press Me"

forState: UIControlStateNormal];

[self.myButton setTitle:@"I'm Pressed"

forState: UIControlStateHighlighted];

[self.myButton addTarget: self

action:@selector(buttonIsPressed:)

forControlEvents: UIControlEventTouchDown];

[self.myButton addTarget: self

action:@selector(buttonIsTapped:)

forControlEvents: UIControlEventTouchUpInside];

[self.view addSubview: self.myButton];

}

Рис. 1.58. В центре экрана находится системная кнопка

В коде из данного примера мы применяем метод setTitle: forState: кнопки, задавая для нее два разных заголовка. Заголовок – это надпись на кнопке. В разное время кнопка может находиться в различных состояниях: обычном и утопленном (нажатом). В каждом из состояний надпись на ней может меняться. Например, в данном случае, когда пользователь впервые видит кнопку, на ней будет написано Press Me (Нажми меня). А когда он нажмет ее, надпись на кнопке изменится на I'm Pressed (Я нажата).

Аналогичная ситуация складывается и с действиями, инициируемыми кнопкой. Мы используем метод addTarget: action: forControlEvents:, чтобы указать для нашей кнопки два действия:

• действие, инициируемое, когда пользователь нажимает кнопку;

• другое действие, происходящее, когда пользователь уже нажал кнопку и убирает палец с экрана. Такое событие называется окончанием нажатия кнопки (touch-inside-up).

Еще одна вещь, которую необходимо знать о UIButton, заключается в том, что кнопке обязательно должен быть присвоен тип. Присваивание выполняется путем вызова метода класса buttonWithType на этапе инициализации, как показано в приведенном коде-примере. В качестве параметра этого метода передайте значение типа UIButtonType:

typedef NS_ENUM(NSInteger, UIButtonType) {

UIButtonTypeCustom = 0,

UIButtonTypeSystem NS_ENUM_AVAILABLE_IOS(7_0),

UIButtonTypeRoundedRect,

UIButtonTypeDetailDisclosure,

UIButtonTypeInfoLight,

UIButtonTypeInfoDark,

UIButtonTypeContactAdd,

UIButtonTypeRoundedRect = UIButtonTypeSystem,

}

Кроме того, на кнопке может находиться изображение, которое заменяет ее стандартный внешний вид. Если у вас есть изображение или серия изображений, которые вы хотите присвоить различным состояниям кнопки, убедитесь, что кнопка относится к типу UIButtonTypeCustom. Здесь я подготовил два изображения: одно для обычного состояния кнопки, а другое – для нажатого (утопленного). Сейчас я создам кнопку и присвою ей два этих изображения:

UIImage *normalImage = [UIImage imageNamed:@"NormalBlueButton.png"];

UIImage *highlightedImage = [UIImage imageNamed:@"HighlightedBlueButton"];

self.myButton = [UIButton buttonWithType: UIButtonTypeCustom];

self.myButton.frame = CGRectMake(110.0f,

200.0f,

100.0f,

44.0f);

[self.myButton setBackgroundImage: normalImage

forState: UIControlStateNormal];

[self.myButton setTitle:@"Normal"

forState: UIControlStateNormal];

[self.myButton setBackgroundImage: highlightedImage

forState: UIControlStateHighlighted];

[self.myButton setTitle:@"Pressed"

forState: UIControlStateHighlighted];

На рис. 1.59 показано, как выглядит приложение, если его запустить в эмуляторе iOS. Чтобы задать фоновое изображение, мы используем относящийся к кнопке метод setBackgroundImage: forState:. Работая с фоновым изображением, мы можем пользоваться методами setTitle: forState: для отображения текста поверх фонового изображения. Если ваше изображение содержит текст и, таким образом, никакой надписи на кнопке не требуется, можете воспользоваться методом setImage: forState: или просто удалить заголовки с кнопки.

Рис. 1.59. Кнопка с фоновым изображением

1.22. Показ изображений с помощью UIImageView

Постановка задачи

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

Решение

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

Обсуждение

Класс UIImageView – один из наименее сложных в iOS SDK. Как вы знаете, существует особый вид, в котором демонстрируются изображения. Чтобы демонстрировать изображения, нужно всего лишь инстанцировать объект типа UIImageView и добавлять его к вашим видам. Например, у меня есть картинка Apple MacBook Air и я хочу показать ее в виде для изображений. Начнем с файла реализации контроллера:

#import «ViewController.h»

@interface ViewController ()

@property (nonatomic, strong) UIImageView *myImageView;

@end

@implementation ViewController

Инстанцируем вид для изображений и разместим в нем изображение:

– (void)viewDidLoad{

[super viewDidLoad];

UIImage *macBookAir = [UIImage imageNamed:@"MacBookAir"];

self.myImageView = [[UIImageView alloc] initWithImage: macBookAir];

self.myImageView.center = self.view.center;

[self.view addSubview: self.myImageView];

}

Теперь, запустив программу, мы увидим такую картинку, как на рис. 1.60.

Рис. 1.60. Вид с изображением, которое довольно велико и не умещается на экране

Отмечу, что картинка Apple MacBook Air, которую я загружаю в этот вид, имеет разрешение 980 × 519 пикселов и, конечно же, не умещается на экране iPhone. Как решить эту проблему? Для начала нужно убедиться в том, что мы инициализируем наш вид для изображений с помощью метода initWithFrame:, а не initWithImage:, поскольку второй метод задает высоту и ширину вида с изображением равными высоте и ширине самого изображения. Итак, сначала решим эту проблему:

– (void)viewDidLoad{

[super viewDidLoad];

UIImage *macBookAir = [UIImage imageNamed:@"MacBookAir"];

self.myImageView = [[UIImageView alloc] initWithFrame: self.view.bounds];

self.myImageView.image = macBookAir;

self.myImageView.center = self.view.center;

[self.view addSubview: self.myImageView];

}

Как теперь будет выглядеть наше приложение? Рассмотрим рис. 1.61.

Рис. 1.61. Изображение, которое умещается по ширине на экране устройства

Но мы не этого хотели добиться, правда? Действительно, контуры вида с изображением нам теперь подходят, но сама картинка стала отображаться неправильно. Что же можно сделать? Можно решить возникшую проблему, задав для вида с изображением свойство contentMode. Это свойство типа UIContentMode:

typedef NS_ENUM(NSInteger, UIViewContentMode) {

UIViewContentModeScaleToFill,

UIViewContentModeScaleAspectFit,

UIViewContentModeScaleAspectFill,

UIViewContentModeRedraw,

UIViewContentModeCenter,

UIViewContentModeTop,

UIViewContentModeBottom,

UIViewContentModeLeft,

UIViewContentModeRight,

UIViewContentModeTopLeft,

UIViewContentModeTopRight,

UIViewContentModeBottomLeft,

UIViewContentModeBottomRight,

}

Вот описание некоторых наиболее полезных значений из перечня UIViewContentMode:

• UIViewContentModeScaleToFill – позволяет масштабировать картинку в виде для изображения так, что она целиком заполнит вид в его границах;

• UIViewContentModeScaleAspectFit – позволяет гарантировать, что картинка внутри вида с изображением будет иметь правильное соотношение сторон (характеристическое отношение) и будет вписываться в границы вида с изображением;

• UIViewContentModeScaleAspectFill – позволяет гарантировать, что картинка внутри вида с изображением будет иметь правильное соотношение сторон и будет вписываться в границы вида с изображением. Чтобы данное значение действовало как следует, необходимо присвоить свойству clipsToBounds вида с изображением значение YES.

Свойство clipsToBounds вида UIView определяет, должны ли «подокна» этого вида обрезаться, если они выходят за границы содержащего их вида. Можно пользоваться этим свойством, если вы хотите с абсолютной точностью гарантировать, что «подокна» конкретного вида не будут отображаться вне границ содержащего их вида (или что они при необходимости непременно будут выходить за его границы – в зависимости от того, что именно вам требуется).

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

– (void)viewDidLoad{

[super viewDidLoad];

UIImage *macBookAir = [UIImage imageNamed:@"MacBookAir"];

self.myImageView = [[UIImageView alloc] initWithFrame: self.view.bounds];

self.myImageView.contentMode = UIViewContentModeScaleAspectFit;

self.myImageView.image = macBookAir;

self.myImageView.center = self.view.center;

[self.view addSubview: self.myImageView];

}

Получается как раз такой результат, которого мы добивались (рис. 1.62).

Рис. 1.62. Такое соотношение сторон картинки нам подходит

1.23. Создание прокручиваемого контента с помощью UIScrollView

Постановка задачи

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

Решение

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

Обсуждение

Прокручиваемый вид (Scroll View) – одно из очевидных достоинств, которые и делают операционную систему iOS такой удобной. Подобные виды встречаются практически в любых программах. Мы уже познакомились с приложениями Clock (Часы) и Contacts (Контакты). Вы заметили, что их содержимое можно прокручивать вверх и вниз? Да, в этом и заключается магия, присущая видам, о которых пойдет речь в этом разделе.

В сущности, есть всего одна базовая концепция, которую необходимо усвоить в связи с видами, чье содержимое можно прокручивать, – это размер содержимого. Учитывая размер содержимого, прокручиваемый вид может адаптироваться к размеру контента, который в нем находится. Размер содержимого – это значение типа CGSize, которое указывает высоту и ширину того материала, который наполняет вид с прокручиваемым контентом. Вид с прокручиваемым контентом, как следует из его названия, является подклассом UIView. Поэтому вы можете просто добавлять ваши виды к видам с прокручиваемым контентом, пользуясь методом addSubview:. Правда, нужно убедиться в том, что размер содержимого для прокручиваемого вида задан правильно. В противном случае эта информация прокручиваться не будет.

Найдем для примера большую картинку и загрузим ее в вид с изображением. Я воспользуюсь той самой картинкой, с которой мы работали в разделе 1.22: MacBook Air. Добавлю ее в вид с изображением, который помещу в вид с прокручиваемым контентом. Потом воспользуюсь свойством contentSize прокручиваемого вида, чтобы убедиться в том, что размеры этого материала равны размерам изображения (высоте и ширине). Начнем работу с файла реализации контроллера нашего вида:

#import «ViewController.h»

@interface ViewController ()

@property (nonatomic, strong) UIScrollView *myScrollView;

@property (nonatomic, strong) UIImageView *myImageView;

@end

@implementation ViewController

И поместим вид с изображением внутрь прокручиваемого вида:

– (void)viewDidLoad{

[super viewDidLoad];

UIImage *imageToLoad = [UIImage imageNamed:@"MacBookAir"];

self.myImageView = [[UIImageView alloc] initWithImage: imageToLoad];

self.myScrollView = [[UIScrollView alloc] initWithFrame: self.view.bounds];

[self.myScrollView addSubview: self.myImageView];

self.myScrollView.contentSize = self.myImageView.bounds.size;

[self.view addSubview: self.myScrollView];

}

Если теперь загрузить эту программу в эмуляторе iOS, можно убедиться в том, что изображение прокручивается и по горизонтали, и по вертикали. Основная задача в данном случае – найти картинку, которая будет довольно велика и не поместится в пределах экрана. Так, если взять изображение размером 20 × 20 пикселов, то особой пользы от функции прокрутки не будет. Подобную, картинку и не следует помещать в прокручиваемый вид, поскольку в данной ситуации такой вид решительно бесполезен. Прокручивать будет нечего, так как размер экрана больше, чем размер изображения.

UIScrollView обладает такой удобной особенностью, как поддержка делегирования. Поэтому такой вид может сообщать приложению о действительно важных событиях с помощью делегата. Делегат для прокручиваемого вида должен отвечать требованиям протокола UIScrollViewDelegate. Вот некоторые методы, определяемые в этом протоколе:

• scrollViewDidScroll: – вызывается всякий раз, когда содержимое прокручиваемого вида прокручивается;

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

• scrollViewDidEndDecelerating: – вызывается, когда прокручивание информации, содержащейся в виде, заканчивается;

• scrollViewDidEndDragging: willDecelerate: – вызывается, когда пользователь завершает перетаскивание содержимого в прокручиваемом виде. Этот метод очень напоминает scrollViewDidEndDecelerating:, но следует помнить, что пользователь может перетаскивать элементы содержимого такого вида и не прокручивая его. Можно просто прикоснуться пальцем к элементу содержимого, переместить палец в другую точку на экране, а потом оторвать палец от экрана, не сдвинув содержимое самого вида ни на миллиметр. Этим перетаскивание и отличается от прокрутки. Прокрутка напоминает перетаскивание, но пользователь «сообщает импульс», приводящий к перемещению содержимого, если снимает палец с экрана, пока информация еще прокручивается. То есть пользователь убирает палец, не дождавшись завершения прокрутки. Перетаскивание можно сравнить с тем, как вы удерживаете педаль газа в машине или педаль велосипеда. Продолжая эту аналогию, можно сравнить прокрутку с движением по инерции на машине или велосипеде.

Сделаем предыдущее приложение немного интереснее. Теперь нужно установить уровень яркости картинки в нашем виде с изображением (этот показатель также называется «альфа-уровень» или «альфа-значение») равным 0.50f (полупрозрачный) на момент, когда пользователь начинает прокрутку изображения, и вернуть этот уровень к значению 1.0f (непрозрачный) к моменту, когда прокрутка завершается. Сначала обеспечим соответствие протоколу UIScrollViewDelegate:

#import «ViewController.h»

@interface ViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *myScrollView;

@property (nonatomic, strong) UIImageView *myImageView;

@end

@implementation ViewController

Потом реализуем данную функциональность:

– (void)scrollViewDidScroll:(UIScrollView *)scrollView{

/* Вызывается, когда пользователь совершает прокрутку

или перетаскивание. */

self.myScrollView.alpha = 0.50f;

}

– (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

/* Вызывается только после прокрутки. */

self.myScrollView.alpha = 1.0f;

}

– (void)scrollViewDidEndDragging:(UIScrollView *)scrollView

willDecelerate:(BOOL)decelerate{

/* Гарантируем, что альфа-значение вернется к исходному,

даже если пользователь просто перетаскивает элементы. */

self.myScrollView.alpha = 1.0f;

}

– (void)viewDidLoad{

[super viewDidLoad];

UIImage *imageToLoad = [UIImage imageNamed:@"MacBookAir"];

self.myImageView = [[UIImageView alloc] initWithImage: imageToLoad];

self.myScrollView = [[UIScrollView alloc] initWithFrame: self.view.bounds];

[self.myScrollView addSubview: self.myImageView];

self.myScrollView.contentSize = self.myImageView.bounds.size;

self.myScrollView.delegate = self;

[self.view addSubview: self.myScrollView];

}

Как можно заметить, в прокручиваемых видах имеются индикаторы. Индикатор – это тонкая контрольная линия, которая отображается с краю прокручиваемого вида, когда его содержимое прокручивается или перемещается (рис. 1.63).

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

self.myScrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;

Рис. 1.63. Черные индикаторы, появляющиеся справа и снизу прокручиваемого вида

Одна из наиболее замечательных особенностей прокручиваемых видов заключается в том, что в них возможна разбивка на страницы. Она функционально подобна прокрутке, но прокрутка прекращается, как только пользователь переходит на следующую страницу. Вероятно, вы уже знакомы с этой функцией, если вам доводилось пользоваться программой Photos (Фотографии) в iPhone или iPad. Просматривая фотографии, можно перемещаться между ними скольжением. Каждое скольжение открывает на экране предыдущую или последующую фотографию. При одном скольжении вы никогда не прокручиваете последовательность до самого начала или до самого конца. Когда начинается прокручивание и вид обнаруживает следующее изображение, прокрутка останавливается на этом изображении и оно начинает подрагивать на экране. Таким образом, анимация прокрутки прерывается. Это и есть разбивка на страницы. Если вы еще не пробовали ее на практике, настоятельно рекомендую попробовать. Весь дальнейший рассказ останется непонятен, если вы не будете представлять, как выглядит приложение, поддерживающее разбивку на страницы.

В следующем примере с кодом я использую три изображения: iPhone, iPad и MacBook Air. Каждое из них я поместил в отдельный вид типа image view, а потом добавил эти виды к прокручиваемому виду. Затем включаем разбивку на страницы, задавая для свойства pagingEnabled прокручиваемого вида значение YES:

– (UIImageView *) newImageViewWithImage:(UIImage *)paramImage

frame:(CGRect)paramFrame{

UIImageView *result = [[UIImageView alloc] initWithFrame: paramFrame];

result.contentMode = UIViewContentModeScaleAspectFit;

result.image = paramImage;

return result;

}

– (void)viewDidLoad{

[super viewDidLoad];

UIImage *iPhone = [UIImage imageNamed:@"iPhone"];

UIImage *iPad = [UIImage imageNamed:@"iPad"];

UIImage *macBookAir = [UIImage imageNamed:@"MacBookAir"];

CGRect scrollViewRect = self.view.bounds;

self.myScrollView = [[UIScrollView alloc] initWithFrame: scrollViewRect];

self.myScrollView.pagingEnabled = YES;

self.myScrollView.contentSize = CGSizeMake(scrollViewRect.size.width *

3.0f, scrollViewRect.size.height);

[self.view addSubview: self.myScrollView];

CGRect imageViewRect = self.view.bounds;

UIImageView *iPhoneImageView = [self newImageViewWithImage: iPhone

frame: imageViewRect];

[self.myScrollView addSubview: iPhoneImageView];

/* Для перехода на следующую страницу изменяем положение следующего вида с изображением по оси X. */

imageViewRect.origin.x += imageViewRect.size.width;

UIImageView *iPadImageView = [self newImageViewWithImage: iPad

frame: imageViewRect];

[self.myScrollView addSubview: iPadImageView];

/* Для перехода на следующую страницу изменяем положение следующего вида с изображением по оси X. */

imageViewRect.origin.x += imageViewRect.size.width;

UIImageView *macBookAirImageView =

[self newImageViewWithImage: macBookAir

frame: imageViewRect];

[self.myScrollView addSubview: macBookAirImageView];

}

Итак, теперь у нас есть три страницы, содержимое которых можно прокручивать (рис. 1.64).

Рис. 1.64. Прокрутка содержимого в виде, в котором поддерживается разбивка на страницы