Разработка мобильного приложения для портфолио (фотограф, дизайнер)
Портфолио-приложение — это витрина. Загрузка первого изображения за 3 секунды убивает впечатление. Кривая галерея с одинаковыми квадратными превью хоронит авторский стиль. Задача — показать работы быстро, красиво и с правильными пропорциями.
Галерея с сохранением aspect ratio
Квадратная сетка для портфолио — плохой выбор: фотограф снимает в 3:2 и 16:9, иллюстратор — в 4:5 и 1:1. Используем waterfall layout (Pinterest-style) или adaptive grid с сохранением пропорций.
iOS: UICollectionViewFlowLayout с estimatedItemSize плохо справляется с waterfall. Правильный выбор — кастомный UICollectionViewLayout, где ячейки распределяются по колонкам жадно с минимальной разницей высот. Либо UICollectionViewCompositionalLayout с .fractionalWidth и группами разных размеров для editorial-сеток.
Android/Compose: StaggeredVerticalGrid из Material3 или LazyStaggeredVerticalGrid. Высота каждой ячейки вычисляется из aspect ratio изображения до загрузки — если API отдаёт width/height в метаданных, skeleton будет правильного размера без скачков.
Flutter: flutter_staggered_grid_view с StaggeredGrid.count.
Загрузка изображений: прогрессивный JPEG и blurhash
Первое впечатление — это placeholder до загрузки. Blurhash (20-30 байт строка, кодирует цвета изображения) даёт цветной размытый превью мгновенно. Серый прямоугольник — нет.
На iOS: SDWebImage или Kingfisher с blurhash placeholder. На Android: Coil с placeholder(blurhashDrawable). На Flutter: cached_network_image + flutter_blurhash.
Прогрессивный JPEG: браузер рендерит его постепенно, мобильные фреймворки — нет (показывают пустое поле до полной загрузки). Для большого JPEG > 1 МБ используем тайлинг через CATiledLayer (iOS) или SubsamplingScaleImageView (Android) — изображение отображается по частям.
Детальный просмотр и жесты
Просмотр фото на весь экран: UIPinchGestureRecognizer + UIPanGestureRecognizer на iOS с CALayer.transform (не frame — иначе лаги). Правильный зум: double-tap увеличивает до 2x в точке касания, повторный — возвращает. На Android: PhotoView library или TransformationLayout. Flutter: photo_view package.
Переход из галереи в детальный: shared element transition. На iOS — UIViewControllerTransitioningDelegate с animateTransition, ячейка «улетает» на место на детальном экране. На Android Compose — sharedBounds Modifier с Compose Navigation.
Организация портфолио
Структура: проекты → серии → фотографии. Фотограф создаёт серии (свадьба Ивановых, портретная съёмка), клиент видит аккуратные альбомы. Или теги для плоской навигации.
Drag & drop для переупорядочивания: UICollectionView с UICollectionViewDragDelegate (iOS 11+). Android Compose: ReorderablelazyGrid из reorderable library.
Контакты и privacy
Фотограф не хочет показывать личный телефон всем — используем форму обратной связи через API (Resend, SendGrid). Водяной знак на изображениях: CoreGraphics / Canvas / CustomPainter — накладываем прозрачный логотип поверх изображения при шаринге, не в хранилище.
Сроки: приложение-портфолио с галереей, детальным просмотром и контактной формой — 2-3 недели. С CMS для управления контентом и push-уведомлениями о новых работах — 4-5 недель.