Отладка проблем пользовательского интерфейса иногда бывает сложной. В Android Studio 4.0 имеется новый встроенный инспектор макетов, который похож на инструменты разработчика Chrome и может помочь разработчикам отлаживать пользовательский интерфейс (пользовательский интерфейс) приложений Android. Инспектор макетов доступен на устройствах и эмуляторах Android и отображает иерархию представлений. Этот инструмент помогает обнаружить проблемы, вызванные корневым узлом. В отличие от предыдущей версии, новая версия инспектора макета может отображать иерархию представлений в трехмерной перспективе, поэтому вы можете интуитивно видеть, как расположены представления. Этот инструмент позволяет вам проверять иерархию представлений уровень за уровнем, а также отображает свойства всех представлений, включая унаследованные от родительского класса представления.

Далее давайте посмотрим, как работает последняя версия инспектора макета. Сначала нажмите на окно View меню, найти Tool Window подменю и выберите Layout Inspector,Это откроет макет окна инспектора.

Инспектор макета показывает только иерархию пользовательского интерфейса запущенного процесса. То есть вам необходимо подключиться к работающему отлаживаемому приложению на устройстве или эмуляторе. Выполнить это условие можно двумя способами:

• Если у вас не запущен процесс, сначала необходимо подключиться к устройству или запустить его. Пример эмулятора Android,И Нажмите окно Run кнопка запуска приложения;
• Если процесс вашего приложения уже запущен, нажмите select process,выбор Устройство, на котором работает,Затем выберите запущенное приложение из списка на правой стороне устройства.

После выбора нужного приложения инспектор макетов будет основан на текущем UI Иерархия создает снимок. Если вы включите Live Updates Если этот параметр установлен, снимок обновляется динамически при взаимодействии с интерфейсом устройства.

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

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

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

Аналогично, вы можете отображать только родительское представление выбранного представления.

На правой панели отображаются все объявленные и унаследованные свойства выбранного представления. Вы можете открыть XML-файл, связанный с макетом, щелкнув любое объявленное свойство. Как и функция поворота, эта функция доступна только на устройствах под управлением Android 10 и выше.

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

Пример инспектора макета

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

1. Откройте Android Studio 4.0 и выберите «Новый проект» в меню «Файл»;
2. Выберите «Действие нижней навигации», нажмите «Далее», а затем «Готово»;
3. заменять activity_main.xml и fragment_home.xml содержание;
4. заменять HomeFragment.kt содержание.

Запустив приложение, вы увидите прекрасный Android, но чего-то не хватает: вкладки навигации внизу. Глядя на файл макета, мы видим, что нижний вид навигации существует, но на экране он не отображается.

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

Сначала мы видим панель инструментов (панель инструментов), выложенную в LinearLayout, а затем хост навигации. Под ним вы можете видеть, что панель навигации находится в самом низу – такое ощущение, что нижнюю панель навигации выдавливают из экрана.

Возможно, неправильно установлен размер хоста навигации. Попробуем установить его высоту равным «wrap_content»:

<!-- Copyright 2019 Google LLC.
SPDX-License-Identifier: Apache-2.0 -->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:defaultNavHost="true"
        android:layout_weight="9"
        app:navGraph="@navigation/mobile_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>

Вернувшись в инспектор макета, вы можете увидеть, что LinearLayout имеет правильный размер, но панель навигации внизу находится в неправильном положении:

Есть много способов решить эту проблему: мы можем установить параметры Layout_weight хоста навигации и нижней панели навигации или заменить LinearLayout на ConstraintLayout, но переключение макетов не является целью этой статьи, поэтому мы устанавливаем параметр Layout_weights:

<!-- Copyright 2019 Google LLC.
SPDX-License-Identifier: Apache-2.0 -->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:defaultNavHost="true"
        android:layout_weight="9"
        app:navGraph="@navigation/mobile_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>

Затем получите следующий результат:

Когда вы снова запустите приложение, макет будет обычным.

Попробуйте новые функции Layout Inspector и поделитесь с нами своим опытом. Каждый может оставить нам отзыв или сообщить нам о своих требованиях к новым функциям.