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