Корневой макет android studio

Layout

Что такое Layout

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

Компоновка (также используются термины разметка или макет) хранится в виде XML-файла в папке /res/layout. Это сделано для того, чтобы отделить код от дизайна, как это принято во многих технологиях (HTML и CSS). Кроме основной компоновки для всего экрана, существуют дочерние элементы компоновки для группы элементов. По сути, компоновка – это некий визуальный шаблон для пользовательского интерфейса вашего приложения, который позволяет управлять элементами управления, их свойствами и расположением. В своей практике вам придется познакомиться со всеми способами размещения. Поэтому здесь мы рассмотрим только базовую часть теории, чтобы вы поняли саму сущность разметки. Кроме того, разметку можно создавать программным способом, который будет описан в конце статьи. Если вы будет обращаться к элементам управления через Java-код, то необходимо присваивать элементам уникальный идентификатор через атрибут android:id. Сам идентификатор назначается через выражение @+id/your_value. После этого вы можете обращаться к элементу через код при помощи метода findViewById(R.id.your_value).

Android Studio включает в себя специальный редактор для создания разметки двумя способами. Редактор имеет две вкладки: одна позволяет увидеть, как будут отображаться элементы управления, а вторая – создавать XML-разметку вручную.

Создавая пользовательский интерфейс в XML-файле, вы можете отделить представление приложения от программного кода. Вы можете изменять пользовательский интерфейс в файле разметки без необходимости изменения вашего программного кода. Например, вы можете создавать XML-разметки для различных ориентаций экрана мобильного устройства (portrait, landscape), размеров экрана и языков интерфейса.

Каждый файл разметки должен содержать только один корневой элемент компоновки, который должен быть объектом View или ViewGroup. Внутри корневого элемента вы можете добавлять дополнительные объекты разметки или виджеты как дочерние элементы, чтобы постепенно формировать иерархию элементов, которую определяет создаваемая разметка.

Виды разметок

Существует несколько стандартных типов разметок:

Все описываемые разметки являются подклассами ViewGroup и наследуют свойства, определённые в классе View.

Комбинирование

Компоновка ведёт себя как элемент управления и их можно группировать. Расположение элементов управления может быть вложенным. Например, вы можете использовать RelativeLayout в LinearLayout и так далее. Но будьте осторожны: слишком большая вложенность элементов управления вызывает проблемы с производительностью.

Можно внедрить готовый файл компоновки в существующую разметку при помощи тега :

Подробнее в отдельной статье Include Other Layout

Программный способ создания разметки

Для подключения созданной разметки используется код в методе onCreate():

Естественно, вы можете придумать и свое имя для файла, а также в приложениях с несколькими экранами у вас будет несколько файлов разметки: game.xml, activity_settings.xml, fragment_about.xml и т.д.

В большинстве случаев вы будете использовать XML-способ задания разметки и подключать его способом, указанным выше. Но, иногда бывают ситуации, когда вам понадобится программный способ (или придётся разбираться с чужим кодом). Вам доступны для работы классы android.widget.LinearLayout, LinearLayout.LayoutParams, а также Android.view.ViewGroup.LayoutParams, ViewGroup.MarginLayoutParams. Вместо стандартного подключения ресурса разметки через метод setContentView(), вы строите содержимое разметки в Java, а затем уже в самом конце передаёте методу setContentView() родительский объект макета:

Число макетов постоянно меняется. Например, недавно появились новые виды CoordinatorLayout и ConstraintLayout. Кроме стандартных элементов разметки существуют и сторонние разработки.

Источник

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

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 Для получения дополнительной информации о контроле свойств представления см.Создание согласованного пользовательского интерфейса с макетом ограничений。

Источник