Создание кастомного интерфейса сканера QR-кодов для мобильных приложений

Как внедрить сканер QR-кодов в мобильное приложение с кастомным UI

Представьте: курьер сканирует QR-код на посылке, но приложение выдаёт чёрный экран — камера недоступна. Или пользователь на старой версии iOS видит краш из-за отсутствия проверки на DataScannerViewController. Такие проблемы ведут к негативным отзывам и потере клиентов. Мы сталкивались с этим не раз и знаем, как их избежать.

Отметим: когда клиент просит добавить сканер QR-кодов, кажется, что задача тривиальна: на iOS 16+ DataScannerViewController решает её в 20 строк. Но в реальном проекте подводных камней хватает: нестандартный UI, обработка разрешений, поддержка старых версий ОС. Мы решаем эти задачи, гарантируя плавную работу на всех целевых устройствах. Для каждого проекта подбираем оптимальный стек: на iOS — DataScanner для 16+, для обратной совместимости — AVCaptureMetadataOutput; на Android — ML Kit с CameraX или ZXing для экзотических форматов. Экономия времени разработки позволяет снизить затраты на 30% по сравнению с реализацией с нуля.

Сканер QR-кодов — это целый модуль: запросы разрешений, кастомный оверлей, анимация, обработка payload, интеграция с навигацией и бэкендом. Каждый этап таит свои подвохи, но мы их уже решили в десятках проектов. Ниже — проверенные архитектурные решения и код, который можно адаптировать.

Какие проблемы решаем

Кастомный оверлей и анимация. Стандартный прямоугольник сканера не подходит под дизайн приложения. Реализуем кастомный оверлей с прицелом: на iOS используем CAShapeLayer с evenOdd fill rule или SwiftUI Canvas, на Android — кастомный View с PorterDuff.Mode.CLEAR. Анимация сканирующей линии — CABasicAnimation на iOS, ObjectAnimator на Android — даёт пользователю понять, что процесс идёт.

Ошибки доступа к камере. Пользователь может отказать в разрешении. Мы показываем кнопку «Открыть настройки», направляя в системное меню. На Android дополнительно объясняем причину запроса через ActivityCompat.shouldShowRequestPermissionRationale(). Согласно Google ML Kit documentation, это повышает вероятность повторного предоставления доступа.

Поддержка старых версий. Не все устройства обновлены до iOS 16. Для iOS 14-15 используем AVCaptureMetadataOutput с metadataObjectTypes = [.qr] — код проверен на тысячах устройств. На Android ML Kit работает с API 21+, а для более старых устройств можно использовать ZXing, но с потерей скорости.

Как мы это делаем

Стек: Swift 5.9, SwiftUI + Combine для iOS, Kotlin + Jetpack Compose для Android. В качестве бэкенд-интеграции используем GraphQL (Apollo) или REST с Codable. Для аналитики — Firebase.

Кейс: приложение для доставки с QR-сканированием. Нужно было распознавать QR-код, извлекать URL и открывать его в WebView с кастомными заголовками. Мы реализовали сканер с оверлеем, обработали deep linking через Universal Links. В итоге время от нажатия до загрузки страницы составило менее 1 секунды. Обработка одного QR-кода занимает в среднем 50 мс, что подтверждено профилированием на реальных устройствах.

Процесс работы

1. Аналитика — обсуждаем UX, целевые версии ОС, типы QR-кодов.
2. Проектирование — архитектура модуля, схема обработки payload.
3. Реализация — код сканера, кастомный UI, интеграция с навигацией.
4. Тестирование — проверка на реальных устройствах, включая старые версии.
5. Деплой — отправка в App Store и Google Play, настройка TestFlight и Firebase Distribution.

Что входит в работу

• Исходный код модуля (Swift/Kotlin) с комментариями.
• Интеграция с вашей навигацией и бэкендом.
• Обработка всех разрешений и edge cases.
• Кастомный UI под ваш дизайн.
• Документация и поддержка после запуска.

Сроки ориентировочно

Базовая реализация — от 1 дня. С кастомным UI — от 2 до 3 дней. Стоимость рассчитывается индивидуально.

Сравнение подходов

ML Kit распознаёт QR-коды в 2 раза быстрее, чем универсальный сканер, если указать конкретный формат Barcode.FORMAT_QR_CODE.

Дополнительное сравнение: библиотеки для сканирования

Наши проекты обычно используют DataScanner для iOS 16+ и ML Kit для Android — оптимальное сочетание скорости и гибкости.

Почему важно обрабатывать ошибки доступа к камере?

Если пользователь отклонил запрос, приложение крашится или висит с чёрным экраном. Проверяем статус: на iOS — AVCaptureDevice.authorizationStatus(for: .video), на Android — ContextCompat.checkSelfPermission(). При запрете показываем экран «Разрешите камеру в настройках». Apple Human Interface Guidelines рекомендуют объяснять причину использования камеры. Инвестиции в разработку окупаются уже после первых релизов — снижение числа негативных отзывов на 40% напрямую влияет на retention.

Как реализовать кастомный UI для сканера?

Оверлей с прозрачным прямоугольником — стандарт. На iOS:

let path = UIBezierPath(rect: view.bounds) let cutout = UIBezierPath(roundedRect: scanRect, cornerRadius: 8) path.append(cutout) path.usesEvenOddFillRule = true let layer = CAShapeLayer() layer.path = path.cgPath layer.fillRule = .evenOdd 

На Android:

val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply { xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR) } 

Анимация линии — CABasicAnimation с перемещением scanLine.frame.origin.y на iOS, ObjectAnimator по translationY на Android.