Горизонтальная прокрутка фотографий

На днях в App Store появится обновленная версия приложения ПФК ЦСКА, полностью адаптированная под iOS 7. Помимо этого приложение подверглось полному редизайну и получило кучу нового функционала. Впрочем, суть поста не в рекламе. Одним из основных элементов этой версии является новостная лента — по сути, агрегатор контента разного типа, в том числе фотогалерей. Как раз о том, как оформить их отображение, и пойдет речь.

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

Вот так выглядит прототип разрабатываемой ячейки:

При инициализации ячейки ей передается массив фотографий текущего фотоальбома. Исходя из количества изображений устанавливаются размеры UIScrollView:

После этого запускается метод loadImages:

Разберем основные моменты этого блока кода. Первоначально подгружаются только первые четыре картинки из всей фотогалереи — это сделано для того, чтобы уменьшить объем трафика и потребляемой памяти. Свойству tag каждого UIImageView присваивается текущее значение счетчика — благодаря этому в дальнейшем можно будет легко связать контейнер и элемент массива картинок. Для асинхронной загрузки фотографий и при необходимости использования их кешированных версий используется библиотека SDWebImage.

Разрабатываемая ячейка удовлетворяет протоколу UIScrollViewDelegate, следовательно, когда пользователь скроллит галерею, запускается метод scrollViewDidScroll:

Такой подход позволяет пользователю загружать только ту информацию, к которой он проявляет интерес, причем для этого не нужно переходить на другой экран.

Перед тем, как рассмотреть событие, происходящее по тапу на фотографию, стоит упомянуть еще один момент — при скроллинге полоса фотографий останавливается так, что часть превью остается обрезанной:

Для того, чтобы по окончании движения UIScrollView выравнивался и всегда отображал ровно три фотографии, реализуем методы scrollViewDidEndDecelerating и scrollViewDidEndDragging:

Суть метода достаточно проста — по окончании скроллинга он сравнивает текущую позицию UIScrollView с идеальной, т.е. такой, когда превью изображений отображаются без обрезов. Исходя из результатов сравнения, происходит плавный скролл в сторону смещения от центра крайнего изображения.

И, наконец, рассмотрим метод tappedPhoto:

Для просмотра галереи в полном экране используется шикарный компонент IDMPhotoBrowser. При нажатии на определенную картинку, благодаря тому, что мы сохранили ее позицию в массиве в поле tag, альбом открывается именно на этом изображении.

Для наглядности покажу экран “Медиа”, в котором, в отличии от “Ленты”, все ячейки содержат в себе фотоальбомы: