FrescoImageViewer. Android-библиотека для полноэкранного просмотра изображений

С каждым днем мы видим все больше новых решений в дизайне мобильных приложений, однако во взаимодействии с ними кое-что остается неизменным — интуитивные жесты.

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

Одним из таких шаблонов уже почти является просмотр изображений. Когда мы видим изображение на весь экран, мы ожидаем, что его можно увеличить и рассмотреть в деталях при помощи соответствующих жестов. Более того, если мы этого не обнаружим — нам покажется, что что-то работает не так. Верно? К этому набору в последнее время все чаще добавляется жест, с помощью которого можно быстро закрыть режим просмотра. Для этого нужно «смахнуть» изображение вверх (как, например, это реализовано в приложении VK).

К сожалению, в мире open source не было открытого и работающего решения, что называется «из коробки». Более того, для работы с изображениями мы начали использовать популярную библиотеку Fresco, для которой необходима немного другая логика, а значит и этот кейс не исключение.

Эти факторы заставили нас написать свое решение, а т.к. задача достаточно тривиальная (и, как оказалось позже, ее решение востребовано) мы решили выставить его для общего использования.

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

Ссылка на демо-гифку PhotoDraweeView

Дописав переключение между изображениями и возможность закрывать просмотрщик жестом, мы решили добавить анимацию затухания фона. Также позаботились о простоте использования библиотеки, чтобы разработчики в одну строку кода смогли выполнять поставленную задачу:

new ImageViewer.Builder(context, images).show();

И вот что из этого получилось:

Демка просмотрщика

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

Демка кастомизации

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

Вот таким вот образом мы сделали свой вклад в экосистему Android, тем самым немного упростив жизнь разработчикам и самим себе :)



Страница FrescoImageViewer на Github