Ми розробляємо мобільні застосунки для створення колажів та фотоальбомів, де кожен піксель під контролем. Користувач перетягує фото на шаблон, масштабує, обертає, накладає текст — якщо рендеринг гальмує при жестах, це одразу помітно. Весь UI будується на GPU, а не на CPU. Наша команда має 5+ років досвіду в розробці візуальних редакторів, понад 50 успішних релізів в App Store та Google Play. Ми гарантуємо стабільну роботу навіть на пристроях середнього сегмента. Отримайте консультацію інженера по вашому проєкту.
Канвас: як не гальмувати при маніпуляціях
iOS. Не використовуємо UIImageView для кожного шару — це Core Animation без GPU-прискорення трансформацій при transform. Правильний шлях: CALayer ієрархія або Metal-рендеринг через MTKView. Для більшості колажів (до 10–15 шарів) достатньо CALayer: кожен елемент — окремий sublayer з contents = CGImage. Трансформації через CATransform3D виконуються на GPU. CATiledLayer — для великих фонів. При фінальному рендері у файл: UIGraphicsImageRenderer або Metal-pipeline для точного відтворення трансформацій.
Android. Canvas-підхід на SurfaceView або TextureView працює, але складно керувати шарами. Краще: кастомний View з drawBitmap + матриця трансформації для кожного елемента. Для складних ефектів — OpenGL ES через GLSurfaceView. У Jetpack Compose: Canvas Composable з drawImage(paint = ...) — швидко для простих випадків. Для великих проєктів використовуємо RenderScript (deprecated) або OpenGL.
Flutter. CustomPainter з canvas.drawImageRect для зображень, canvas.drawParagraph для тексту. При великій кількості шарів — RepaintBoundary обгортає кожен редагований елемент, Flutter перемальовує лише змінений шар.
| Платформа | Основний підхід | GPU-прискорення | Складність шарів | Типові затримки (ms) |
|---|---|---|---|---|
| iOS | CALayer / Metal | Так | Середня | ≤16 |
| Android | Custom View / GLSurfaceView | Так | Висока | ≤20 |
| Flutter | CustomPainter + RepaintBoundary | Так | Низька | ≤16 |
Як забезпечити синхронну обробку жестів масштабу та обертання?
Одночасна обробка pinch + rotate + pan — стандартне завдання, але реалізувати правильно непросто. На iOS: UIPinchGestureRecognizer, UIRotationGestureRecognizer, UIPanGestureRecognizer працюють одночасно через shouldRecognizeSimultaneouslyWith. Застосовуємо дельту кожного жесту до CATransform3D елемента інкрементально — не абсолютне значення, а зміну за кадр. Інакше при початку нового жесту елемент стрибає. UIPinchGestureRecognizer — офіційна документація.
Android: ScaleGestureDetector + ручний RotationGestureDetector (через два дотики) + GestureDetector. ScaleGestureDetector — довідка Android. Flutter: GestureDetector з onScaleUpdate об'єднує scale та rotation в одному колбеку (ScaleUpdateDetails.rotation). Snap-to-grid та snap-to-center: при перетягуванні перевіряємо proximity до осей (±10dp) та до центру канвасу — якщо близько, притягуємо з haptic feedback.
Чому шаблони колажів краще зберігати в JSON?
Шаблон визначає: кількість комірок, їх розташування та співвідношення сторін. Зберігаємо як JSON: масив {x, y, width, height, rotation} в одиницях від 0 до 1 (відносно розміру колажу). При відображенні масштабуємо під розмір екрану. Користувач заповнює комірки фото з галереї. Використовуємо PHPickerViewController (iOS 14+) / PhotoPicker (Android) / image_picker (Flutter) — сучасні picker без запиту дозволів на всю галерею. Fit vs Fill для комірки: користувач обирає, обрізається фото під комірку або вписується з полями.
Що ми гарантуємо?
Дотримуємось методології, перевіреної на 50+ проєктах. Для iOS підсумковий білд проходить код-рев'ю та тестування на пристроях з iOS 15 і вище. Для Android — на емуляторах та фізичних пристроях з Android 10+. Гарантуємо відсутність витоків пам'яті (моніторинг через Instruments та LeakCanary) та стабільні 60 FPS при жестах. Надаємо технічну документацію та підтримку на етапі деплою.
Експорт та роздільна здатність
Фінальний колаж рендеримо офлайн у роздільній здатності 2x–3x від екрану (для друку — 300 DPI для заданого фізичного розміру). Прогрес рендерингу показуємо через Progress/ProgressBar. Збереження в Photos: PHPhotoLibrary.performChanges (iOS) / MediaStore.Images.Media.insertImage (Android).
| Цільове використання | Роздільна здатність | Формат | Розмір файлу (орієнтовно) |
|---|---|---|---|
| Соціальні мережі | 2x–3x екрану (до 12 Мп) | JPEG/PNG | 1–5 МБ |
| Друк (10×15 см) | 300 DPI (1181×1772 px) | PNG | 3–8 МБ |
| Друк (20×30 см) | 300 DPI (2362×3543 px) | PNG | 10–25 МБ |
Що входить в роботу
- Аналітика та проектування UX/UI (прототипи, user flow)
- Реалізація канвасу з GPU-прискоренням (Metal / OpenGL / CustomPainter)
- Система шаблонів (10–15 базових, можливість кастомних)
- Обробка жестів (pinch, rotate, pan, snap-to-grid)
- Експорт у високій роздільній здатності (2x–3x, 300 DPI)
- Тестування на реальних пристроях (iOS/Android)
- Деплой в App Store та Google Play, налаштування підпису
- Документація та навчання команди
Терміни та вартість
Базовий редактор з 10–15 шаблонами, текстом та експортом — 3–4 тижні. Повний редактор зі стікерами, фільтрами, кастомними шаблонами та хмарним сховищем — 6–8 тижнів. Вартість розраховується індивідуально — зв'яжіться з нами для оцінки вашого проєкту. Отримайте консультацію по стеку та термінах.
Технічні деталі апробовані на проєктах з 5+ річним досвідом у мобільній розробці.