Эффект листания изображения для Iphone, IOS 5+

В этой статье я расскажу как сделать эффект листания изображений как страниц в книге или в отрывном календаре. Очень часто приходится сталкиваться с задачами реализовать мини галерею или список изображений. Что бы сделать интерфейс красивым и понятным для пользователя есть множество путей. Сегодня я покажу как быстро и просто сделать листание изображений, что бы они переворачивались как листы при помощи протягивания пальцем по экрану, Этот принцип конечно же построен на работе с GestureRecognizer.

Для начала создайте проект в Xcode выбрав Single View Application. (Я работаю в Xcode 4.6 поэтому буду показывать на примере с использованием Storyboard)
Название не имеет значения. Ставим галочку Use Storyboards и сохраняем проект где нибудь себе в папку. Так у нас создастся наш коренвой ViewController  с именем которое вы указали в качестве названия приложения и наш  Storyboard.


Давайте сразу приступим к созданию UIimageView который будет перелистыватся. Перейдите на ваш Storyboard он пока пустой и добавим мы в него пока всего одну картинку при помощи  элемента  UIimageView Найдите его в списке объектов и разместите на вашей Storyboard.

Теперь в h файле вашего контроллера необходимо создать IBOutlet для связи с нашим UIImageView
Вот как это выглядит у меня:

@interface testViewController : UIViewController{
IBOutlet UIImageView *myimage;
}

Теперь можно назначить New Referensing Outlet Collections нашему myimage.

 Затем выбираем New Referensing Outlet Collections нажимая левой кнопкой мышки на кружочке и тянем к левому блоку в наш UIView. И связываем с myimage.

Теперь UIImageView можно назначить картинку и сделать это можно через опять таки Storyboard, как это показано на рисунке.
Также очень важно не забыть поставить галочку Use Interaction Enabled

Далее переходим к m файлу нашего контроллера и находим в нем метод – (void)viewDidLoad
Добавим туда  код который по сути привяжет использования жеста Swipeк нашей картинке и заставит её переворачиваться в зависимости от горизонтальных движений пальцами по экрану телефона.

 [myimage setUserInteractionEnabled:YES];
//перетащили пальцем вправо
UISwipeGestureRecognizer *swipenext = [[UISwipeGestureRecognizer alloc]
initWithTarget:self
action:@selector(getNext)];
[swipenext setDirection:UISwipeGestureRecognizerDirectionUp | UISwipeGestureRecognizerDirectionLeft];
[myimage addGestureRecognizer:swipenext];
//перетащили пальцем влево
UISwipeGestureRecognizer *swipeback = [[UISwipeGestureRecognizer alloc]
initWithTarget:self
action:@selector(getPrev)];
[swipeback setDirection:UISwipeGestureRecognizerDirectionDown | UISwipeGestureRecognizerDirectionRight];
[myimage addGestureRecognizer:swipeback];

Теперь подробней поговорим о коде.
UISwipeGestureRecognizer *swipenext = [[UISwipeGestureRecognizer alloc]
initWithTarget:self
action:@selector(null)]; – создаёт объект жеста swipenext с параметрами
Обратите внимание на параметр action:@selector(getNext) – сдесь мы можем указать метод который выполнится после перелистывания например это может быть показать следующую картинку getNext.  Посмотрим реализацию этого метода

-(void) getNext{
//устанавливаем анимацию переворачивания
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1]; // сколько длится анимация – в секундах
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:myimage cache:YES]; //овернуть «листок» вверх
[UIView commitAnimations];
}
// почти тоже самое в метотоде getPrev
-(void) getPrev{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:myimage cache:YES]; //отвернуть листок вниз
[UIView commitAnimations];
}

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

Конечно в качестве направления переворачивания листа в параметр setAnimationTransition  можноустанавливать значения UIViewAnimationTransitionFlipFromLeft и UIViewAnimationTransitionFlipFromRight но это уже будет просто поворот рисунка, а не перелистывание.
Пока конечно же рисунок остаётся тем же, что и был но мы можем вставить метод который менял бы что то например между строк

[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:myimage cache:YES];
//добавить сюда выполнение метода
[UIView commitAnimations];

Тогда сможем реализовать подмену рисунка плавно, а пока на этом всё спасибо. что прочиталю статью.