Инструменты для отладки пользовательского интерфейса Compose доступны в Android Studio.
Инспектор макетов
Инспектор макетов позволяет проверять макеты Compose в работающем приложении на эмуляторе или физическом устройстве. С помощью инспектора макетов можно проверить, как часто composable-функция перекомпонуется или пропускается. Это помогает выявлять проблемы в приложении. Например, некоторые ошибки в коде могут привести к чрезмерной перекомпоновке интерфейса, что может вызвать проблемы с производительностью. Некоторые ошибки в коде могут помешать рекомпозиции интерфейса и, следовательно, отображению изменений на экране. Если вы раньше не пользовались инспектором макетов, ознакомьтесь с инструкциями.
Получение количества рекомпозиций
При отладке макетов Compose важно знать, когда происходит рекомпозиция composable-функций. Это поможет понять, правильно ли реализован интерфейс. Например, если рекомпозиция выполняется слишком часто, приложение может выполнять больше работы, чем необходимо. С другой стороны, компоненты, которые не рекомпонуются, когда вы этого ожидаете, могут привести к неожиданному поведению.
Инспектор макетов показывает, когда отдельные composable-функции в иерархии макета были перекомпонованы или пропущены при взаимодействии с приложением. В Android Studio перекомпоновки выделяются, чтобы вы могли определить, где в интерфейсе они происходят.
Рисунок 1. Перекомпоновки выделяются в инспекторе макетов.
Выделенная часть показывает градиентное наложение composable-функции в разделе изображений инспектора макетов и постепенно исчезает, чтобы вы могли понять, где в интерфейсе находится composable-функция с наибольшим количеством рекомпозиций. Если одна composable-функция перекомпонуется чаще другой, то она получает более насыщенный цвет градиентного наложения. Если дважды нажать на composable-функцию в инспекторе макетов, откроется соответствующий код.
Откройте окно инспектора макетов и подключитесь к процессу приложения. В окне Component Tree (Дерево компонентов) рядом с иерархией макета есть два столбца. В первом столбце показано количество композиций для каждого узла, а во втором – количество пропусков для каждого узла. Если выбрать узел composable-функции, вы увидите ее размеры и параметры (если это не встроенная функция, для которой параметры не показываются). Вы также можете посмотреть похожую информацию на панели Attributes (Атрибуты), выбрав composable-функцию в Component Tree (Дерево компонентов) или Layout Display (Отображение макета).
Сброс счетчика может помочь вам понять рекомпозиции или пропуски во время определенного взаимодействия с вашим приложением. Если вы хотите сбросить счетчик, нажмите Сбросить в верхней части панели Дерево компонентов.
Рисунок 3. Включите счетчик композиций и пропусков в инспекторе макетов.
Семантика Compose
В Compose семантика описывает ваш интерфейс альтернативным способом, понятным для сервисов специальных возможностей и фреймворка тестирования. Вы можете использовать инспектор макетов, чтобы проверять семантическую информацию в макетах Compose.
При выборе узла Compose используйте панель Атрибуты, чтобы проверить, объявляет ли он семантическую информацию напрямую, объединяет ли семантику своих дочерних элементов или и то, и другое. Чтобы быстро определить, какие узлы включают семантику (объявленную или объединенную), в раскрывающемся списке Параметры просмотра на панели Дерево компонентов выберите Выделить слои семантики. В этом случае будут выделены только узлы дерева, содержащие семантику, и вы сможете быстро перемещаться между ними с помощью клавиатуры.
Проверка интерфейса Compose
Чтобы вам было проще создавать адаптивные и доступные интерфейсы в Jetpack Compose, в Android Studio есть режим проверки интерфейса в режиме предварительного просмотра Compose. Эта функция похожа на Сканер доступности для представлений.
Когда вы активируете режим проверки пользовательского интерфейса Compose в предварительной версии Compose, Android Studio автоматически проверяет пользовательский интерфейс Compose и предлагает улучшения, которые сделают его более доступным и адаптивным. Android Studio проверяет, работает ли ваш интерфейс на экранах разных размеров. На панели Проблемы будут показаны обнаруженные ошибки, например растянутый текст на больших экранах или низкая контрастность цветов.
Чтобы воспользоваться этой функцией, нажмите на значок проверки интерфейса в окне предварительного просмотра Compose:
Проверка интерфейса автоматически показывает, как он выглядит в разных конфигурациях, и выделяет обнаруженные проблемы. На панели Проблемы нажмите на проблему, чтобы посмотреть подробные сведения о ней, предлагаемые исправления и визуализации, на которых выделена область проблемы.
Исправить с помощью ИИ
Если в режиме проверки интерфейса обнаружены проблемы, вы можете использовать ИИ-агента, чтобы предложить и применить исправления кода. Нажмите кнопку Исправить с помощью ИИ рядом с проблемой на панели Проблемы. Агент анализирует проблему и ваш код, чтобы предложить изменения, которые устранят проблему с доступностью или адаптивностью.
