Отладка макета с помощью Layout Inspector

Инспектор макета в Android Studio позволяет отлаживать макет вашего приложения, показывая иерархию представлений, в которой вы можете проверять свойства каждого представления. С помощью Layout Inspector вы можете сравнить макет вашего приложения с макетами дизайна, отобразить увеличенное или трехмерное изображение вашего приложения и изучить детали его макета во время выполнения. Это особенно полезно, когда макет создается во время выполнения, а не полностью в XML, и макет ведет себя неожиданно.

Рисунок 1. Встроенный инспектор макетов для приложения Jetchat.

Начать

Чтобы запустить инспектор макетов, запустите приложение , перейдите в окно «Работающие устройства» и нажмите «Переключить инспектор макетов». Переключить кнопку встроенного инспектора макетов . Если вы переключаетесь между несколькими устройствами или проектами, инспектор макетов автоматически подключается к отлаживаемым процессам, выполняющимся на переднем плане подключенного устройства.

Вот как можно выполнить некоторые распространенные задачи:

  • Чтобы просмотреть иерархию и проверить свойства каждого представления, используйте окна инструментов «Дерево компонентов» и «Атрибуты» . Инспектору макета может потребоваться перезапуск действия для доступа к атрибутам. Дополнительную информацию см. в разделе «Избегайте перезапуска активности» .
  • Чтобы выбрать представления одним щелчком мыши непосредственно по представлениям или перейти к коду двойным щелчком по представлениям, включите Toggle Deep Inspect. Переключить кнопку глубокой проверки .
  • Чтобы взаимодействовать с приложением, отключите Toggle Deep Inspect. Переключить кнопку глубокой проверки .
  • Чтобы проверить физические устройства, включите зеркалирование устройств .
  • Чтобы включить обновления в режиме реального времени при обновлении пользовательского интерфейса вашего приложения, убедитесь, что функция Live Edit включена.
  • Чтобы использовать 3D-режим , сделайте снимок Layout Inspector. Снимок инспектора макетов а затем нажмите «Режим 3D».3D-кнопка .

Выбрать или изолировать представление

Представление обычно отображает то, что пользователь может видеть и с чем может взаимодействовать. Дерево компонентов показывает иерархию вашего приложения в режиме реального времени для каждого компонента представления, что помогает вам отлаживать макет вашего приложения, поскольку вы можете визуализировать элементы внутри вашего приложения и связанные с ними значения.

Чтобы выбрать вид, щелкните его в дереве компонентов или на экране макета . Все атрибуты макета для выбранного представления отображаются на панели «Атрибуты» .

Если ваш макет включает перекрывающиеся виды, вы можете увидеть все виды в области, щелкнув правой кнопкой мыши в режиме глубокой проверки. Переключить кнопку глубокой проверки . Чтобы выбрать вид, который не находится на переднем плане, щелкните его в дереве компонентов или поверните макет .

Для работы со сложными макетами можно изолировать отдельные виды, чтобы только часть макета отображалась в дереве компонентов и отображалась на экране макета . Чтобы изолировать представление, сделайте снимок Снимок инспектора макетов , щелкните правой кнопкой мыши представление в дереве компонентов и выберите «Показать только поддерево» или «Показать только родительские элементы» . Чтобы вернуться к полному представлению, щелкните его правой кнопкой мыши и выберите «Показать все» . Прежде чем изолировать представление, необходимо сделать снимок.

Скрыть границы макета и просмотреть метки

Чтобы скрыть ограничивающую рамку или метки вида для элемента макета, нажмите «Параметры просмотра». Кнопка «Просмотреть параметры» в верхней части экрана макета и включите переключатель «Показать границы» или «Показать метку вида» .

Сохранение снимков иерархии макетов

Инспектор макетов позволяет сохранять снимки иерархии макетов работающего приложения, чтобы вы могли поделиться ими с другими или обратиться к ним позже.

Снимки фиксируют данные, которые вы обычно видите при использовании инспектора макетов, включая подробную 3D-рендеринг вашего макета, дерево компонентов вашего представления, составления или гибридного макета, а также подробные атрибуты для каждого компонента вашего пользовательского интерфейса. Чтобы сохранить снимок, нажмите «Экспорт/импорт снимка». Экспорт/импорт снимков а затем «Экспортировать снимок» .

Загрузите ранее сохраненный снимок Layout Inspector, нажав «Импортировать снимок» .

3D-режим

Отображение макета обеспечивает расширенную трехмерную визуализацию иерархии представлений вашего приложения во время выполнения. Чтобы использовать эту функцию, сделайте снимок Экспорт/импорт снимков , нажмите кнопку «Режим 3D»3D-кнопка в окне инспектора снимков и поверните его, перетаскивая мышь.

Инспектор макетов: 3D-просмотр
Рисунок 2. Повернутый 3D-вид макета.
Инспектор макета: просмотр расстояния между слоями
Рисунок 3. Чтобы расширить или сжать слои макета, используйте ползунок «Интервал между слоями» .

Сравните макет приложения с наложением эталонного изображения.

Чтобы сравнить макет приложения с эталонным изображением, например макетом пользовательского интерфейса, вы можете загрузить наложение растрового изображения в инспекторе макетов.

  • Чтобы загрузить наложение, выберите « Загрузить наложение». на панели инструментов Инспектора макетов . Наложение масштабируется в соответствии с макетом.
  • Чтобы настроить прозрачность наложения, используйте ползунок «Наложение альфа» .
  • Чтобы удалить наложение, нажмите «Очистить наложение».

Проверить композицию

Инспектор макетов позволяет проверять макет Compose внутри работающего приложения в эмуляторе или на физическом устройстве. Вы можете использовать инспектор макета, чтобы проверить, как часто компонуемый объект перекомпоновывается или пропускается, что может помочь выявить проблемы с вашим приложением. Например, некоторые ошибки кодирования могут привести к чрезмерной перекомпоновке вашего пользовательского интерфейса, что может привести к снижению производительности. Некоторые ошибки кодирования могут помешать перекомпоновке вашего пользовательского интерфейса и, следовательно, не дать изменениям вашего пользовательского интерфейса отобразиться на экране.

Узнайте больше об инспекторе макетов для Compose

Избегайте перезапуска активности

Для правильной работы Layout Inspector требуется одна из следующих глобальных настроек. Если вы не укажете глобальный параметр, Layout Inspector установит его автоматически.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Эта опция генерирует дополнительную информацию для проверки указанного процесса.

  2. adb shell settings put global debug_view_attributes 1

    Эта опция генерирует дополнительную информацию для проверки обо всех процессах на устройстве.

Изменение глобальной настройки может привести к перезапуску активности. Чтобы избежать перезапуска активности, вы можете изменить настройки в Android Studio или изменить параметры разработчика в настройках вашего устройства.

Чтобы включить автоматическое обновление в Android Studio, откройте настройки запуска/отладки, выбрав в меню «Выполнить» > «Редактировать конфигурации» . Затем перейдите на вкладку «Разное» и установите флажок «Подключиться к инспектору макетов без перезапуска активности» в разделе «Параметры инспектора макетов» .

Параметр перезапуска активности в конфигурациях запуска
Рисунок 4. Включите автоматическое обновление в диалоговом окне «Конфигурации запуска/отладки» .

Либо включите параметры разработчика вашего устройства , а затем включите параметр «Включить проверку атрибутов представления» в настройках разработчика устройства.

Автономный инспектор макетов

Для оптимальной производительности мы рекомендуем использовать инспектор макетов во встроенном режиме по умолчанию. Если вы хотите отключить инспектор макетов, выберите «Файл» ( Android Studio в macOS) > «Настройки» > «Инструменты» > «Инспектор макетов» и снимите флажок «Включить встроенный инспектор макетов» .

В автономном режиме включите обновления в режиме реального времени, нажав кнопку «Обновления в режиме реального времени». на панели инструментов Инспектора макетов .