Инструменты для отладки вашего Compose UI доступны в Android Studio.
Инспектор макетов
Layout Inspector позволяет вам проверять макет Compose внутри работающего приложения в эмуляторе или на физическом устройстве. Вы можете использовать Layout Inspector, чтобы проверить, как часто компонуемый объект перекомпоновывается или пропускается, что может помочь выявить проблемы с вашим приложением. Например, некоторые ошибки кодирования могут привести к чрезмерной перекомпоновке вашего пользовательского интерфейса, что может привести к снижению производительности . Некоторые ошибки кодирования могут помешать перекомпоновке вашего пользовательского интерфейса и, следовательно, помешать отображению изменений пользовательского интерфейса на экране. Если вы новичок в Layout inspector, ознакомьтесь с руководством по его запуску.
Получить количество рекомпозиций
При отладке макетов Compose важно знать, когда компонуемые элементы перекомпоновываются , чтобы понимать, правильно ли реализован ваш пользовательский интерфейс. Например, если он перекомпоновывается слишком часто, ваше приложение может выполнять больше работы, чем необходимо. С другой стороны, компоненты, которые не перекомпоновываются, когда вы ожидаете, могут привести к неожиданному поведению.
Layout Inspector показывает вам, когда дискретные компоновочные элементы в вашей иерархии макета либо перекомпоновались, либо пропустились, когда вы взаимодействуете с вашим приложением. В Android Studio ваши перекомпоновки подсвечиваются, чтобы помочь вам определить, где в пользовательском интерфейсе ваши компоновочные элементы перекомпонуются.
Рисунок 1. Рекомпозиции выделены в инспекторе макетов.
Выделенная часть показывает градиентное наложение компонуемого в разделе изображений инспектора макетов и постепенно исчезает, так что вы можете получить представление о том, где в пользовательском интерфейсе можно найти компонуемый с самыми высокими перекомпоновками. Если один компонуемый перекомпоновывается с большей скоростью, чем другой компонуемый, то первый компонуемый получает более сильный цвет градиентного наложения. Если вы дважды щелкните компонуемый в инспекторе макетов, вы перейдете к соответствующему коду для анализа.
Откройте окно Layout Inspector и подключитесь к процессу вашего приложения. В Component Tree есть два столбца, которые отображаются рядом с иерархией макета. Первый столбец показывает количество композиций для каждого узла, а второй столбец отображает количество пропусков для каждого узла. Выбор компонуемого узла показывает размеры и параметры компонуемого элемента, если только это не встроенная функция, в этом случае параметры не могут быть отображены. Вы также можете увидеть аналогичную информацию на панели Attributes , когда выбираете компонуемый элемент из Component Tree или Layout Display .
Сброс счетчика может помочь вам понять перекомпоновки или пропуски во время определенного взаимодействия с вашим приложением. Если вы хотите сбросить счетчик, нажмите Сброс в верхней части панели Component Tree .
Рисунок 3. Включите композицию и счетчик пропусков в инспекторе макетов.
Составить семантику
В Compose семантика описывает ваш пользовательский интерфейс альтернативным способом, понятным для служб Accessibility и для фреймворка Testing . Вы можете использовать инспектор макетов для проверки семантической информации в макетах Compose.
При выборе узла Compose используйте панель Attributes , чтобы проверить, объявляет ли он семантическую информацию напрямую, объединяет ли семантику из своих дочерних элементов или и то, и другое. Чтобы быстро определить, какие узлы включают семантику, объявленную или объединенную, используйте раскрывающийся список View options на панели Component Tree и выберите Highlight Semantics Layers . Это выделяет только те узлы в дереве, которые включают семантику, и вы можете использовать клавиатуру для быстрого перемещения между ними.
Проверка пользовательского интерфейса Compose
Чтобы помочь вам создавать более адаптивные и доступные пользовательские интерфейсы в Jetpack Compose, Android Studio предоставляет режим проверки пользовательского интерфейса в Compose Preview. Эта функция похожа на Accessibility Scanner для представлений.
При активации режима проверки Compose UI в Compose Preview Android Studio автоматически проверяет ваш Compose UI и предлагает улучшения, чтобы сделать ваш UI более доступным и адаптивным. Android Studio проверяет, работает ли ваш UI на экранах разных размеров. На панели «Проблемы» инструмент показывает обнаруженные им проблемы, такие как растянутый текст на больших экранах или низкий цветовой контраст.
Чтобы получить доступ к этой функции, щелкните значок проверки пользовательского интерфейса в окне предварительного просмотра сообщения:
Проверка пользовательского интерфейса автоматически просматривает ваш пользовательский интерфейс в различных конфигурациях и выделяет проблемы, обнаруженные в различных конфигурациях. На панели «Проблемы» при щелчке по проблеме вы можете увидеть подробности проблемы, предлагаемые исправления и визуализации, которые выделяют область проблемы.
