Android hierarchy viewer android studio

Hierarchy Viewer Walkthrough

In this document

You should also read

This walkthrough shows the basic usage and workflow for the Hierarchy Viewer tool.

The Hierarchy Viewer tool visualizes your app’s view hierarchy and profiles the relative rendering speed for each view.

What it’s good for:

• Simplifying your view hierarchy to reduce overdraw, and make it easier to manage.
• Finding potential rendering performance bottlenecks related to the structure and shape of your view hierarchy.

Prerequisites

• A mobile device set up to work with Hierarchy Viewer:
• 1. You must have Developer Options enabled on your mobile device. You must use a physical device to get accurate measurements.
  2. Set an ANDROID_HVPROTO environment variable on the desktop machine that is connected to your device. For more information, see Device Setup for Hierarchy Viewer.
• Debuggable app code with a view hierarchy. Use your own code, or the code for the Sunshine sample app from the Android Fundamentals Udacity course.

Working with Hierarchy Viewer

Figure 1. Starting Android Device Monitor.

Figure 2. Android Device Monitor.

Make sure your device and the package for your application are showing in the Devices (DDMS mode) or Windows (Hierarchy Viewer mode) tab. You can choose Window > Reset Perspective to get back to the default arrangement.

If the app does not appear, make sure you followed the device setup instructions, then start over at step 1.

Figure 3. Changing Perspective to Hierarchy Viewer.

Click the Hierarchy View button if it’s already visible.

Figure 4. Hierarchy Viewer layout.

Figure 5. Resetting the Perspective.

Figure 6. Populated Hierarchy Viewer.

Figure 7. Hierarchy Viewer panes.

Figure 7. Parts of the View node display.

Figure 8. Location of View Properties tab.

Figure 9. Rendering a view in a popup.

Figure 10. Node with its type and id.

Источник

Hierarchy Viewer

В папке tools есть файл hierarchyviewer.bat, который запускает программу для отладки и оптимизации пользовательского интерфейса (под Windows).

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

В Android Studio немного изменился порядок работы и, к сожалению, у многих эта программа не запускается. У меня также возникла проблема с ним. Поэтому внизу дано старое описание, которое работало под Eclipse.

Чтобы приступить к отладке пользовательского интерфейса, запустите приложение в эмуляторе и откройте в нём шаблон. Затем запустите hierarchyviewer.bat. У вас откроется окно для просмотра иерархии устройства.

В левой части области Devices отображается набор устройств. При выборе устройства в правой области отображается список его окон. Чтобы просмотреть иерархию видо для отдельного взятого окна, выберите это окно в правой области и затем нажмите кнопку Load View Hierarchy.

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

В нижнем левом углу окна инструмента для просмотра иерархии видов расположены две кнопки. Левая позволяет отобразить древовидную структуру видов, правая — даёт возможность показать актуальный шаблон в режиме Pixel Perfect (Идеальная проекция). В таком режиме вы получаете представление шаблона с точностью до пикселя.

Начало работы

Создадим простое приложение с тремя экранами, которые содержат различные комбинации компонентов для иллюстрации работы с Hierarchy Viewer. Каждый экран использует разметки LinearLayout и FrameLayout с видами TextView и ImageView. Для изображений используются три картинки: кот, сосуд с водой, рыба:

Первый экран состоит из вертикального LinearLayout с двумя «ячейками»: вид TextView со словом Safe и компоновка FrameLayout, которая содержит два ImageView: сосуд и рыбу.

Второй экран использует вертикальную компоновку LinearLayout с двумя «ячейками»: вид TextView со словом Unsafe и компоновку LinearLayout с горизонтальной ориентацией, который в свою очередь также содержит два элемента: в первом находится FrameLayout, который содержит два ImageView с сосудом и рыбой, а второй элемент — ImageView с котом.

На третьем экране используется вертикальная компоновка LinearLayout с двумя дочерними элементами: TextView со словом Yum и FrameLayout, который содержит два ImageView: кот и рыба.

Запускаем приложение в эмуляторе. Hierarchy Viewer можно запустить из перспективы Eclipse, как плагин или через командную строку.

При первой загрузке нужно немного подождать. Когда данные загрузятся, то можно приступать к работе. Есть два варианта работы в Hierarchy Viewer, между которыми можно переключаться:

• Load View Hierarchy
• Inspect Screenshot

Inspect Screenshot

В режиме Inspect Screenshot вы получаете представление шаблона с точностью до пикселя.

Вы можете увеличивать определенные участки экрана, проверить расположение компонентов на экране и так далее. Также можно сохранить скриншот в PNG-файл. Используйте этот режим для дизайна вашего интерфейса, используя наложение (перемещая ваши картинки).

Load View Hierarchy

Рассмотрим режим Load View Hierarchy.

Данный режим имеет несколько панелей:

• Слева находится панель Tree Hierarchy
• Справа сверху: панель Loupe
• Справа в центре: панель свойств
• Справа внизу: панель Wire-Frame

Изучаем древовидную структуру

В основной левой панели мы видим карту элементов управления в древовидном интерфейсе. Все элементы текущей разметки показаны слева направо в соответствии с вашим шаблоном.

Например, если брать первый экран, то справа мы видим два ImageView с сосудом и рыбой. Двигаясь влево, вы видите, что они находятся в FrameLayout с идентификатором @id/frameLayoutFishbowl. Продолжая движение влево на следующий уровень, мы попадаем на корневой элемент LinearLayout, содержащий TextView и FrameLayout с идентификатором @id/frameLayoutFishbowl.

Вы можете щёлкнить по любому элементу в Tree Hierarchy. Появится специальное окно с различной информацией о выбранном элементе. Например, для TextView можно узнать тип (TextView), системный идентификатор и выводимый текст. Цветные точки помогают определить производительность.

Для ImageView с сосудом:

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

Выделим элемент с рыбой. На панели свойств можно увидеть различные свойства к данному элементу.

Если вы обновляете свой графический интерфейс, то необходим обновить содержание и в Hierarchy Viewer.

Посмотрим на следующую картинку:

Обратите внимание на три цветные кружочки (точки) под каждым элементом:

Они являются индикаторами производительности:

• Левая точка определяет, как долго проходит операция измерения для данного элемента.
• Средняя точка определяет длительность отрисовки разметки для данного элемента.
• Правая точка определяет длительность отрисовки элемента на экране.

Точки могут быть красными, жёлтыми и зелёными. Красная свидетельствует о том, что рисование на экране идёт слишком медленно, жёлтая — удовлетворительно, зелёная — хорошая скорость отрисовки.

Если щелкнуть на элементе в дереве иерархии, вы также увидите актуальную информацию о производительности.

Если у объекта все точки зелёного цвета, то объект загружается очень быстро и вам не нужно заботиться о производительности. Желтый и красный цвет — повод задуматься и пересмотреть проект.

Например, для ImageView нужно попробовать использовать PNG вместо JPG (или наоборот), а также изменить размеры изображения, если это возможно.

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

Не перезагружайте экран элементами. Будьте проще.

Источник

Русские Блоги

Используйте Hierarchy Viewer в Android Studio

Предисловие

Недавно видел эту статью«Подробное объяснение оптимизации производительности пользовательского интерфейса Android», Который использует Hierarchy Viewer для оптимизации макета. Я так долго занимался разработкой Android, и я всегда слышал об этом инструменте, но я никогда не использовал его снова.Я должен сказать, что это провал. Теперь просто воспользуйтесь моим свободным временем, чтобы изучить, как использовать Hierarchy Viewer.

Запустите Android Device Monitor

Я искал в Интернете учебные пособия прямо в sdk>tools Ищите ниже hierarchyviewer.bat Дважды щелкните, чтобы запустить, а затем выполните успешно.
Но появляется такая подсказка:

The standalone version of hieararchyviewer is deprecated.
Please use Android Device Monitor (tools/monitor.bat) instead.

Вероятно, это означает, что отдельная версияhieararchyviewerУстарело. пожалуйста, используйте Android Device MonitorВместо.Android Device Monitorв tools Найдено ниже monitor.bat ОК.

Чтобы идти в ногу с тенденцией времени, я решил использоватьAndroid Device MonitorВверх!

Но каждый раз из tools Иди, чтобы начатьAndroid Device Monitor, Слишком много проблем. Разве его нельзя запустить прямо из универсальной Android Studio?

Ответ: конечно! Начать можно двумя способами. (Версия Android Studio 2.2 не имеет двух нижних)

Первое
Щелкните меню по очереди Tools>Android>Android Device Monitor ,Как показано ниже:

2. Второй
Щелкните значок рядом с вопросительным знаком под меню, как показано ниже:

Открыть просмотр иерархии

запускатьAndroid Device MonitorПосле успеха щелкните значок переключения вида в новом окне и выберитеHierarchy Viewe,Как показано ниже:

Использовать средство просмотра иерархии

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

[2016-04-15 15:44:26 — hierarchyviewer]Unable to get view server version from device 2d2843d
[2016-04-15 15:44:26 — hierarchyviewer]Unable to get view server protocol version from device 2d2843d

Выяснилось, что настоящую машину получить не удалось. view server причина.
Подробная причина проблемы:Почему HierachyViewer не может подключиться к реальной машине для отладки

Не могу открыть сейчас view server , Поэтому я могу использовать только симулятор.
до Genymotion Я удалил эмулятор, поэтому могу использовать только встроенный эмулятор ╮ (╯＿╰) ╭ Но данный проект поддерживает работу только симулятора архитектуры руки и не может использоваться Intel HAXM Чтобы ускориться, так что цель разговора такой чепухи состоит в том, чтобы проиллюстрировать: встроенный симулятор действительно слишком медленный!
Затем введите долгое ожидание .
……
……
……
Прошел час! Тогда пора работать! -_- ||
Извините, я не вижу результатов!
Сожалею, что не вижу результата. Шаги по открытию завершены. Конкретное использование здесь не объясняется. В Интернете их много, вот один (упомянутый в начале):
《Подробное объяснение оптимизации производительности пользовательского интерфейса Android》] (http://mrpeak.cn/android/2016/01/11/android-performance-ui)

Пора с работы! Все, полный текст окончен!

Чтобы предотвратить негативное социальное влияние людей и собак, добавлен скриншот результатов бега:

Дружественное напоминание: приложение запускается перед использованиемAndroid Device Monitor

Источник