RAKCHEEV.ME
Проекты / GlassComposer
GlassComposer
Поле ввода чата на Liquid Glass для iOS, сверенное с референсом по пикселям.
- Роль
- Дизайн и разработка
- Платформа
- iOS
- Стек
- SwiftUI, UIKit, XCUITest
- Код
- Приватный репозиторий
Задача
Воссоздать поле ввода ChatGPT для iOS в новом стиле Liquid Glass так, чтобы его нельзя было отличить от оригинала. Компонент должен вести себя как настоящий: со всеми переходами, панелями и клавиатурой.
Процесс
Снял размеры с оригинала и собрал компонент на SwiftUI, а текстовое поле сделал на UIKit. Переходы от компактной капсулы к двум строкам и полному экрану, слайдер усилия рассуждений, меню вложений и карточки фото собраны отдельно и отлажены в замедленных анимациях. Поведение клавиатуры iOS 27 рядом с оверлеями описал отдельно.
Итог
Совпадение с оригиналом проверяется 25 UI-тестами по скриншотам, все проходят. Например, компактная строка занимает 38–382 pt против 38,3–381,7 pt у ChatGPT, фирменный синий #0087FF совпадает.