Читать книгу iOS. Приемы программирования - Вандад Нахавандипур - Страница 44

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

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

Решение

Воспользуйтесь классом 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. Прокрутка содержимого в виде, в котором поддерживается разбивка на страницы