Эффект листания изображения для 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];

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

IOS Программируем жесты с UIGestureRecognizer

Все мы знаешь, что в приложениях для IOS есть возможность создавать события на основе жестов на экране IPhone или IPad. В XCode мы можем сделать это с помощью Storyboard или же описать их программно. На мой взгляд особой разницы нет как это делать, но в данной статье я напишу как делать это программно. Для начала разберемся с тем какие бывают жесты.

• UITapGestureRecognizer   – жест нажатия пальцем на экран
• UIPinchGestureRecognizer  - жест "ущипнуть" экран
• UIRotationGestureRecognizer - жест вращения пальцами по экрану
• UISwipeGestureRecognizer - жест "скольжения" то есть протянули пальцем
• UIPanGestureRecognizer - жест, который выглядит как перетаскивание
• UILongPressGestureRecognizer - долгое удерживание пальца на экране

Все эти жесты помогают нам так или иначе разнообразить работу и интерфейс приложения. Рассмотрим простой пример когда необходимо использовать жест нажатия например на изображение UIImageView. Поскольку IBOutlet UIImageView не имеет стандартной возможности воспринимать действия на себе  -  пример будет достаточно полезным.

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTapOnImageView:)];
[image addGestureRecognizer:tap];

Tap- это объект распознователя жестов который я инициализировал с помощью указания себя в качестве передаваемого параметра в метод didTapOnImageView. Который отработает когда жест будет выполнен/или начат. Во второй строек я добавил его к объекту UIImageView image. Далее достаточно только создать метод didTapOnImageView как на примере:

-(void) didTapOnImageView:(UIGestureRecognizer*) recognizer {
//код который должен отработать
}

Почему я написал через слеш выполнен/или начат? Потому, что в методе  didTapOnImageView мы указали входящий параметр сам объект распознавания у которого можно получить его состояния и проверить их. Например таким условием:

if (recognizer.state == UIGestureRecognizerStateBegan)
//в данном случае проверка началось ли распознование жеста

При использовании UITapGestureRecognizer эта проверка встряли понадобится, но вот при UILongPressGestureRecognizer может быть к стати.
Список состояний которые можно проверить:
UIGestureRecognizerStatePossible - распознаватель еще не признал жест, но может быть сенсорным оценке событий. Это состояние по умолчанию.
UIGestureRecognizerStateFailed - распознаватель устанавливает этот статус когда жест не может быть выполнен

UIGestureRecognizerStateRecognized - распознаватель понял и распознал жест
UIGestureRecognizerStateBegan - распознавание жеста началось
UIGestureRecognizerStateChanged - распознаватель устанавливает этот статус когда жест был изменен и завершит распознавание на следующем цикле обработки

UIGestureRecognizerStateEnded  – распознавание жеста закончилось
UIGestureRecognizerStateCancelled - распознавание жеста было отменено

Манипулируя проверками этих состояний можно с точностью отловить, что происходит в тот или иной момент времени когда работает распознаватель жестов.
Рассмотрим ещё несколько опций которые могут быть использованы при работе с распознаванием жестов.  Например:

tap.minimumPressDuration = 1.0; //сколько секунд нужно удерживать палец на экране для распознавателя жеста UILongPressGestureRecognizer
[tap setNumberOfTouchesRequired:1]; //задает количество прикосновений которые необходимо сделать для распознавания жеста

Теперь рассмотрим еще один пример программной реализации жеста скольжения:

   UISwipeGestureRecognizer *swipetoleft = [[UISwipeGestureRecognizer alloc]
initWithTarget:self
action:@selector(didSwipe)];
[swipetoleft setDirection:UISwipeGestureRecognizerDirectionLeft];
[optpodlozhka addGestureRecognizer:swipetoleft];

В данном примере появилась ещё одна строка [swipetoleft setDirection:UISwipeGestureRecognizerDirectionLeft]; Которая указывает направление жеста. Это свойство характерно для UISwipeGestureRecognizer. Этим я хочу сказать что для каждого вида жеста могут быть использованы разные свойства и настройки. Полный список которых можно посмотреть в UIGestureRecognizer Class Reference.