Инструменты для отладки Compose UI доступны в Android Studio.
Инспектор макетов
Инспектор макетов позволяет проверять макет Compose в запущенном приложении на эмуляторе или физическом устройстве. С помощью инспектора макетов можно проверить частоту перекомпоновки или пропуска компонуемых элементов, что может помочь выявить проблемы в вашем приложении. Например, некоторые ошибки кодирования могут привести к чрезмерной перекомпоновке пользовательского интерфейса, что может привести к снижению производительности . Некоторые ошибки кодирования могут помешать перекомпоновке пользовательского интерфейса и, следовательно, помешать отображению изменений на экране. Если вы впервые работаете с инспектором макетов, ознакомьтесь с руководством по его запуску.
Получить количество повторных композиций
При отладке макетов Compose важно знать, когда компонуемые элементы перекомпоновываются , чтобы понять, правильно ли реализован ваш пользовательский интерфейс. Например, если компоновка выполняется слишком часто, ваше приложение может выполнять больше работы, чем необходимо. С другой стороны, компоненты, которые не перекомпонуются, когда вы ожидаете, могут привести к неожиданному поведению.
Инспектор макетов показывает, когда отдельные компонуемые элементы в иерархии макета перекомпоновываются или пропускаются при взаимодействии с приложением. В Android Studio перекомпоновки подсвечиваются, чтобы помочь вам определить, в каком месте пользовательского интерфейса происходит перекомпоновка компонуемых элементов.
Рисунок 1. Рекомпозиции подсвечиваются в инспекторе макетов.
Выделенная область отображает градиентное наложение компонуемого объекта в разделе изображений инспектора макетов и постепенно исчезает, позволяя вам понять, где в пользовательском интерфейсе находится компонуемый объект с наибольшим количеством перекомпоновок. Если один компонуемый объект перекомпонуется с большей частотой, чем другой, то первый компонуемый объект получает более интенсивный градиентный наложение. Если дважды щелкнуть компонуемый объект в инспекторе макетов, вы перейдете к соответствующему коду для анализа.
Откройте окно инспектора макетов и подключитесь к процессу вашего приложения. В дереве компонентов рядом с иерархией макета отображаются два столбца. Первый столбец показывает количество композиций для каждого узла, а второй — количество пропусков для каждого узла. При выборе компонуемого узла отображаются его размеры и параметры, за исключением случаев, когда это встроенная функция, в этом случае параметры не отображаются. Аналогичную информацию также можно увидеть на панели «Атрибуты» при выборе компонуемого узла в дереве компонентов или на экране отображения макета .
Сброс счётчика поможет вам отслеживать перекомпозиции или пропуски при определённом взаимодействии с приложением. Чтобы сбросить счётчик, нажмите кнопку «Сброс» в верхней части панели «Дерево компонентов» .
Рисунок 3. Включите композицию и счетчик пропусков в инспекторе макетов.
Семантика композиции
В Compose семантика описывает ваш пользовательский интерфейс альтернативным способом, понятным для служб доступности и фреймворка тестирования . Вы можете использовать инспектор макетов для проверки семантической информации в макетах Compose.
При выборе узла Compose используйте панель «Атрибуты» , чтобы проверить, объявляет ли он семантическую информацию напрямую, объединяет ли семантику из своих дочерних элементов или и то, и другое. Чтобы быстро определить, какие узлы содержат объявленную или объединённую семантику, выберите раскрывающийся список «Параметры представления » на панели «Дерево компонентов» и выберите «Выделить слои семантики» . При этом будут выделены только те узлы в дереве, которые содержат семантику, и вы сможете быстро перемещаться между ними с помощью клавиатуры.
Проверка пользовательского интерфейса Compose
Чтобы помочь вам создавать более адаптивные и доступные пользовательские интерфейсы в Jetpack Compose, Android Studio предоставляет режим проверки пользовательского интерфейса в Compose Preview. Эта функция аналогична сканеру доступности для представлений.
При активации режима проверки Compose UI в Compose Preview Android Studio автоматически проверяет Compose UI и предлагает улучшения, которые сделают его более доступным и адаптивным. Android Studio проверяет корректность работы вашего интерфейса на экранах разных размеров. На панели «Проблемы» инструмент отображает обнаруженные проблемы, такие как растянутый текст на больших экранах или низкая цветовая контрастность.
Чтобы получить доступ к этой функции, щелкните значок проверки пользовательского интерфейса в окне предварительного просмотра сообщения:
Проверка пользовательского интерфейса автоматически просматривает ваш интерфейс в различных конфигурациях и выявляет проблемы, обнаруженные в разных конфигурациях. На панели «Проблемы» при нажатии на проблему вы можете увидеть подробную информацию о проблеме, предлагаемые способы её устранения и визуализации, демонстрирующие проблемную область.
