Android studio xml editor design

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

Android Studio (10) — Используйте редактор макетов для создания пользовательского интерфейса

Построить пользовательский интерфейс с редактором макетов

В редакторе макетов Android Studio вы можете быстро создать макет, перетаскивая виджеты в редактор визуального дизайна, без необходимости вручную писать XML макета. Этот редактор предварительно просматривает макет на различных устройствах и версиях Android, и вы можете динамически изменять размер макета, чтобы убедиться, что он хорошо подходит для экрана разных размеров. Редактор макетов использует ConstraintLayout Он особенно эффективен при создании новых макетов. ConstraintLayout — это менеджер макетов, предоставляемый в библиотеке поддержки и совместимый с Android 2.3 (уровень API 9) и выше.

На этой странице описаны интерфейс и функции редактора макетов. Для получения дополнительной информации о том, как использовать ConstraintLayout Для получения дополнительной информации о компоновке здания см.Создание ConstraintLayout с помощью ConstraintLayout。

Введение редактора

Редактор макетов отображается при открытии файла макета XML. Области редактора, соответствующие номерам на рисунке 1, следующие:

1. Цветовая палитра: Предоставляет список виджетов и макетов, которые можно перетащить в макет в редакторе.
2. пакетдерево: Просмотр иерархии с отображением макета. Нажав на элемент, вы увидите, что он выбран в редакторе.
3. Панель инструментов: Предоставляет кнопки для настройки внешнего вида макета и редактирования свойств макета в редакторе.
4. Редактор дизайна: Отображает макет в сочетании дизайна и дизайна.
5. собственности: Предоставляет элементы управления свойствами для текущего выбранного представления.

Рисунок 1дисплейDesignРедактор макет редактор

При открытии файла макета XML система открывается по умолчанию.DesignРедактор (как показано на рисунке 1). Если вы хотитеTextЧтобы редактировать XML в редакторе, нажмите внизу окнаTextТеги. вTextКогда в редакторе, нажмите на правой стороне окнаPreview Вы также можете просмотретьPalette、Component TreeиDesignРедактор (как показано на рисунке 2). Тем не менее,TextРедактор не предоставляетPropertiesОкно.

подсказка: Нажав Control + Shift + стрелка вправо / влево, вы можетеDesignиTextПереключаться между редакторами.

Рисунок 2открытыйPreviewокноTextредактор

Изменить внешний вид предварительного просмотра

DesignКнопки в верхней строке редактора позволяют настроить внешний вид макета в редакторе. Также доступно наTextредакторPreviewЭта панель инструментов открывается в окне.

Рисунок 3Кнопки на панели инструментов редактора макетов для настройки внешнего вида макета

Кнопки, соответствующие номерам на рисунке 3, следующие:

Design and blueprint: Позволяет выбрать способ просмотра макета в редакторе.DesignПредставление показывает предварительный просмотр макета иBlueprintПредставления показывают только схему каждого представления. Или вы можете просматривать их рядомDesign + Blueprint。

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

Screen orientation: Используется для поворота устройства между альбомной и портретной ориентацией.

Device type and size: Выберите тип устройства (телефон / планшет, Android TV или Android Wear) и конфигурацию экрана (размер и плотность). Вы можете выбрать один из нескольких предварительно настроенных типов устройств и свое собственное определение AVD или выбрать из списка.Add Device DefinitionНовое определение AVD.

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

API version: Выберите версию Android, на которой вы хотите просмотреть макет.

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

Language: Используется для выбора языка, на котором отображаются строки пользовательского интерфейса. В этом списке отображаются только языки, доступные в строковом ресурсе. Если вы хотите редактировать перевод, нажмите из выпадающего менюEdit Translations(СмЛокализуйте пользовательский интерфейс с помощью редактора переводов）。

Layout Variants: Используйте, чтобы переключиться на альтернативный макет для этого файла или создать новый макет (см. НижеСоздать вариант макета）。

банкнота: Эти конфигурации не влияют на код или манифест вашего приложения (если вы не решите начать сLayout VariantsДобавить новые файлы макетов), они влияют только на предварительный просмотр макета.

Создать новый макет

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

Есть несколько разных способов создать новый макет, в зависимости от вашегоProject Вид из окна, но следующие шаги могут быть выполнены из любого вида.

1. вProject В окне выберите модуль, в который вы хотите добавить макет (например,app）。
2. В главном меню выберитеFile > New > XML > Layout XML File。
3. В появившемся диалоговом окне введите имя файла, корневой тег макета и исходный набор, к которому принадлежит макет. Затем нажмитеFinish。

Рисунок 4Диалоговое окно для добавления нового макета XML-файла

Вот несколько других способов создания нового файла макета (хотя отображаемые диалоговые окна различаются):

• Если вы ужеProject Выберите в окнеProject Просмотр: Откройте модуль приложенияres Каталог, щелкните правой кнопкой мыши каталог макетов, в который вы хотите добавить макет, а затем нажмитеNew > Layout resource file。
• Если вы ужеProject Выберите в окнеAndroid Вид: щелкните правой кнопкой мышиlayout Папка и выберитеNew > Layout resource file。

Создать вариант макета

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

1. Откройте исходный файл макета и убедитесь, что вы просматриваетеDesignРедактор (нажмите в нижней части окнаDesignЭтикетка).
2. Нажмите на панели инструментовLayout Variants, В раскрывающемся списке выберите предложенный вариант (например,Create Landscape Variant) И закончите создание, или нажмитеCreate OtherИ переходите к следующему шагу.
3. В появившемся диалоговом окне вам нужно только определить квалификатор ресурса для имени каталога. Вы можетеDirectory nameВведите квалификатор ресурса в илиAvailable qualifiersВыберите один из списка и нажмитеAdd。
4. После добавления всех классификаторов нажмитеOK。

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

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

Преобразовать макет в ConstraintLayout

ConstraintLayout Представление — это группа представлений, представленная в библиотеке макетов ограничений, которая включена в Android Studio 2.2 и более поздние версии. Он построен с нуля с помощью редактора макетов, поэтому все функции доступны через редактор дизайна, и вам не нужно вручную редактировать XML. Лучшее в ConstraintLayout — система макетов на основе ограничений, которая позволяет создавать большинство макетов без необходимости вложения каких-либо групп представлений.

Чтобы улучшить производительность макета, вы должны конвертировать предыдущие макеты в ConstraintLayout , Android Studio предоставляет встроенные конвертеры, чтобы помочь вам сделать это:

1. Откройте существующий макет в Android Studio и нажмите в нижней части окна редактора.DesignТеги.
2. вComponent TreeВ окне щелкните правой кнопкой мыши макет и выберитеConvert layout to ConstraintLayout。

Для получения дополнительной информации о том, как использовать ConstraintLayout Для получения дополнительной информации о компоновке здания см.Создание ConstraintLayout с помощью ConstraintLayout。

Добавление видов в макет

Создание макета для вашего приложения требует пониманияБазовые знания по версткеНо Android Studio сохраняет много сложной работы непосредственно в файлах XML. Перетаскивая виджет вDesignРедактор и вProperties Оптимизируйте свойства макета в окнах, и редактор макетов может помочь вам выполнить большую работу.

Когда вы начинаете строить макет, просто переместите вид изPaletteПеретащите панель наDesignРедактор. Когда вы размещаете представление в макете, редактор указывает на связь вида с остальной частью макета в зависимости от типа макета, в который вы поместили представление.

Например, видео 1 показывает, как TextView Перетащите в ConstraintLayout Чтобы создать ответ на вышеизложенное TextView Ограничения «внизу» и «выравнивание по левому краю» (включеноAutoconnect）。

Видео 1.Когда вы перетаскиваете представление в редактор, редактор макетов добавляет ограничения к вашему представлению.

Перетащите вид на ConstraintLayout Для макетов, отличных от Layout Editor, реакция редактора Layout будет отличаться в зависимости от свойств макета, доступных для макета.

Любые ошибки, обнаруженные в макете, учитываются на панели инструментов. Чтобы просмотреть их, нажмитеShow Warnings and Errors 。

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

Для получения дополнительной информации о том, как Android View API создает макеты, см.Базовые знания по верстке, Получить доступ ConstraintLayout Для руководства см.Создание ConstraintLayout с помощью ConstraintLayout。

Изменить свойства вида

Рисунок 5 Propertiesокно

Вы можете начать сProperties Отредактируйте свойства представления в окне (справа от редактора макетов) без редактирования в XML. Это окно открывается толькоDesignРедактор доступен, поэтому убедитесь, что вы выбрали нижнюю часть окнаDesignТеги.

Выберите представление, которое вы хотите просмотреть в редакторе, и отредактируйте общие свойства представления. Если вам нужно получить доступ к другим свойствам этого представления, пожалуйста, нажмитеView all properties 。

Если выбранный вид ConstraintLayout Для детей окно «Свойства» предоставляет инспектор вида с несколькими элементами управления вверху, как показано на рисунке 7. Для получения дополнительной информации ConstraintLayout Для получения дополнительной информации о контроле свойств представления см.Создание согласованного пользовательского интерфейса с макетом ограничений。

Источник

Android Studio Design Tools UX changes — split view

In this article, we would like to introduce the new behavior of the Design Editor in Android Studio 3.6, dive into some of the details of what motivated the UX changes, and show cool new things you can do with it. The following post was written by Amaury Medeiros (Software Engineer) and Paris Hsu (UX Designer) on behalf of the Layout Editor team.

Introducing Design Tools Split View

In Android Studio 3.6, we’re changing how you switch editing modes for design files. Instead of choosing between “Text” and “Design” editors (Figure 1) by selecting the corresponding tab on the bottom-left corner, we now open design files only in the Design editor, which has three different modes (Figure 2). Keep reading to find out the changes we’ve made and the motivation behind them.

You can select the following modes by clicking on the corresponding buttons on the top-right corner of the editor or by using the keyboard shortcuts ( Ctrl + Shift + Left/Right Arrow if you are on a Mac, or Alt + Shift + Left/Right Arrow otherwise):

• Code: provides the functionality of an XML text editor.
• Design: consists of a view containing the design editor (e.g. navigation graph, layout) that can be used to edit the file graphically.
• Split: displays both Code and Design side-by-side, so you can preview your design while editing the text.

Users of previous versions might find the new Split view experience similar to simply editing XML files with the preview window open. There are some key differences, however, that we’re going to explain in this section.

Preserving the state of each file

As mentioned above, Split view shows the Design of a file next to its corresponding Code. If you are previewing a resource file using Split view and then switch to Design mode to edit the resource using our graphical tools, we’re now preserving the state of the design editor, such as zoom level and selection.

We know that editing multiple resource files in parallel is a common scenario. Every file has different needs, so you might want to edit one particular file in Design mode, another in Split mode, and yet another in Code mode (Figure 3). The editor now preserves the editor state of each file, so you can switch between files without worrying about losing preview state.

In previous versions, the Preview window state would be reset any time you switched files. Imagine you were editing some file A in Text mode and had zoomed in on the Preview window, then switched to edit file B in Design mode. Switching back to file A would reset the Preview state, even though file B didn’t use it (Figure 4).

The Preview tool window has been removed

You can preview your resource file using the newly added Split view, so we no longer need the Preview tool window. Before, we displayed this tool window every time you opened a resource file using the Text editor. If you changed the editor to Design or opened a non-resource file, we would hide the tool window (Figure 5). Since no other tool windows in Android Studio / IntelliJ don’t share the same behavior, this could be confusing.

Split view has all the tool windows

Speaking of tool windows, the Split view contains all the tool windows you see in Design mode. In previous versions, the Preview tool window offered only the Palette tool window, which meant that you needed to switch back and forth from Text + Preview to Design to see your component tree, for example.

Navigation Editor support

In addition to the usability changes mentioned above, we wanted to improve the preview support for more types of resource files. We’re happy to announce that you can open navigation graph files using the new Split mode and edit these files while previewing the result simultaneously in the Navigation Editor. This is particularly useful for large and complex graphs. For instance, if you have multiple layers of nested graphs, you’d likely need to switch between “Design” and “Text” editors a few times to match a particular fragment in your code with its corresponding graphical portion, as illustrated in Figure 6. Now you only need to click the tag on the XML portion to display the fragment in the graphical portion, even if it’s inside a nested graph, as shown in Figure 7. Similarly, you can easily find elements in large navigation graphs by selecting the component of interest in the graphical portion of the editor. The text selection jumps to the corresponding XML tag.

Источник