Какие макеты доступны в android приложении
Любое приложение отображает пользователю графический интерфейс. На картинке ниже вы можете увидеть примеры текстовых элементов ( TextView ), кнопок ( Button ), картинок ( ImageView ).
Объекты View обычно называют «виджетами». Они могут быть представлены одним из классов-наследников, таких как Button , TextView , ImageView . Объекты ViewGroup обычно называют «контейнерами». Они определяют, как именно будут располагаться элементы внутри экрана. Подробнее с ViewGroup мы познакомимся в следующих уроках.
Вы можете работать с макетами двумя способами:
- Объявлять элементы пользовательского интерфейса в XML коде. Android предоставляет простой XML файл, в котором можно добавлять разные View и ViewGroup вручную. Вы также можете использовать редактор макетов Android Studio, чтобы создать свой XML-макет, не заглядывая в XML код.
- Создавать элементы макета во время выполнения программы из Java кода. Приложение может создавать объекты View и ViewGroup (и управлять их свойствами) программно.
В этом уроке мы подробнее будем рассматривать именно первый вариант. Откройте файл activity_main.xml . Для ознакомления с синтаксисом языка XML мы будем вносить изменения в этот файл.
XML синтаксис
- android:layout_width="match_parent"
- android:layout_height="match_parent"
У элемента могут быть вложенные элементы:
Если у какого-то тега нет вложенных элементов, то лучше сократить закрывающийся тег, используя конструкцию <ИмяТега /> . Обратите внимание на тег TextView :
Пример макета
Layout должен содержать только один корневой элемент, который должен быть объектом View или ViewGroup (обычно используют ViewGroup ). После того, как вы определили корневой элемент, вы можете добавить дополнительные объекты в качестве дочерних элементов, чтобы постепенно создавать пользовательский интерфейс. Давайте изменим файл activity_main.xml . Например, вот код XML-макета, который использует контейнер LinearLayout в качестве корневого элемента и два виджета внутри него: TextView и Button .
При запуске приложения макет будет выглядеть так:
Связь XML и Java кода
Когда мы запускаем приложение, каждый файл макета XML компилируется в ресурс View . Связь XML файла и Activity происходит в методе onCreate класса MainActivity . Этот код также сгенерировала Android Studio при создании Activity .
Связь происходит при вызове метода setContentView(R.layout.activity_main) . Обращаться к layout файлу нужно в виде R.layout.имя_файла . Это связано с внутренним хранением ресурс файлов в Android системе. В нашем случае файл по умолчанию называется activity_main.xml , поэтому указываем R.layout.activity_main (постфикс xml опускается).
Метод onCreate() вызывается Android системой во время загрузки приложения (эту тему рассмотрим подробнее в следующих уроках).
XML Атрибуты
Каждый объект View и ViewGroup поддерживает множество атрибутов XML.
Вы можете заметить, что в названии атрибутов есть префикс android . Этот префикс называют пространством имён (англ. namespace). В данном случае он означает, что атрибуты объявлены в библиотеке android . Также вы могли заметить, что у корневого элемента в макете обязательно указывается атрибут xmlns:android="http://schemas.android.com/apk/res/android" . Это сделано для объявления пространства имён.
Атрибут android:text
Атрибут android:text отвечает за текст, который будет отображаться на экране:
Обязательные атрибуты android:layout_width, android:layout_height
У любого View компонента необходимо объявить атрибуты android:layout_width (русс. ширина макета), android:layout_height (русс. высота макета), иначе приложение не скомпилируется.
Существует три варианта указания ширины и высоты:
Создадим три TextView , чтобы показать эти значения:
В данном случае при размере wrap_content TextView занимает столько же места, сколько и текст в нём. Вы можете изменить текст, чтобы убедиться, что размер текста и элемента TextView будут совпадать.
Вы могли заметить, что в примере мы использовали атрибуты android:background (русс. цвет фона), android:marginTop (русс. отступ сверху), android:textColor (русс. цвет текста), android:textSize (русс. размер текста) для наглядности. Сейчас мы рассмотрим эти атрибуты детальнее.
Атрибут android:textSize
Атрибут android:textSize отвечает за размер текста, как вы догадались. Разберём на примере:
Размер текста нужно указывать в единицах sp (Scale-independent Pixels). Отличие от dp состоит в том, что этот размер изменяется в зависимости от настроек размера шрифта в телефоне. В Android системе у пользователя есть возможность в настройках изменить шрифт в своём телефоне на крупный, средний или маленький. Чтобы текст в приложении автоматически изменился вместе с этой настройкой рекомендуется использовать единицы sp для текста.
Атрибут android:background
Атрибут android:background определяет фоновый цвет элемента. Когда вы указываете атрибут android:background , то видите точно, сколько места занимает элемент. Разберём на примере:
Атрибут android:textColor
Атрибут android:textColor похож на атрибут android:background только он задаёт цвет текста:
Атрибут android:textStyle
Атрибут android:textStyle отвечает за стиль текста. Его возможные значения:
Атрибут android:id
Атрибут android:id у View позволяет работать с ней из Java кода и ссылаться на эту View внутри макета. Покажем на примере работы с View элементом из Java кода:
С помощью вызова метода findViewById(R.id.text) можно связать View из XML макета с Java объектом TextView . После этого можно вызывать любые методы, которые есть у данного объекта. Для примера мы вызвали метод setText() и указали текст Text from java code .
В результате увидим, что отобразился тот текст, который мы указали из Java кода:
Атрибуты android:padding, android:layout_margin
Рассмотрим атрибуты, которые задают отступы элементов:
- android:padding (top, bottom, right | end, start | left)
- android:layout_margin (top, bottom, right | end, start | left)
В xml коде они указываются так:
Параметры (top, bottom, right | end, start | left) означают, с какой стороны вы хотите сделать отступ. Параметры right | end , start | left означают практически одно и тоже. Только start, end добавляют поддержку для стран, в которых тексты читаются справа налево. Поэтому рекомендуется использовать их вместо значений left , right . Эти атрибуты поддерживаются с 17 версии устройств, значит мы можем их использовать (помните, что при создании проекта мы указали, что поддерживаем устройства 21 версии и выше).
Если указать padding , layout_margin без всякого параметра, то отступ будет сделан со всех сторон. Основное различие двух атрибутов состоит в том, что padding делает отступ внутри элемента, а layout_margin делает отступ снаружи. Пример:
Можно сделать тоже самое, указывая отступы со всех сторон явно:
Атрибуты android:gravity, android:layout_gravity
Атрибуты android:gravity и android:layout_gravity отвечают за выравнивание. Ключевое отличие состоит в том, что android:gravity отвечает за выравнивание содержимого внутри элемента, а layout_gravity отвечает за выравнивание элемента относительно родительского контейнера. Разберём на примере:
В данном примере текст в первом TextView выровнен по правому краю, т.к. мы указали атрибут android:gravity="end" . Второй элемент прижался к правой стороне родительского контейнера, потому что указан атрибут android:layout_gravity="end" .
Также у этого атрибута могут быть другие значения, которые указывают, как именно выровнять элемент. Перечислим основные из них: top, bottom, start, end, center, center_horizontal, center_vertical
Различные значения можно комбинировать, используя символ | . Если хотим выровнять содержимое по правому нижнему углу, то можем использовать значение end|bottom .
Заключение
Сегодня вы познакомились с пользовательским интерфейсом в Android системе. Теперь вы знаете язык XML и основные компоненты пользовательского интерфейса, а также их атрибуты. Информации было много, поэтому это нормально, если вы её не запомнили. При необходимости в следующих уроках вы сможете возвращаться к этому уроку, как к справочнику. Скорее выполняйте практические задания к этому уроку, чтобы набить руку и создать первый макет реального приложения!
Android Studio (10) --- Используйте редактор макетов для создания пользовательского интерфейса
В редакторе макетов Android Studio вы можете быстро создать макет, перетаскивая виджеты в редактор визуального дизайна, без необходимости вручную писать XML макета. Этот редактор предварительно просматривает макет на различных устройствах и версиях Android, и вы можете динамически изменять размер макета, чтобы убедиться, что он хорошо подходит для экрана разных размеров. Редактор макетов использует ConstraintLayout Он особенно эффективен при создании новых макетов. ConstraintLayout - это менеджер макетов, предоставляемый в библиотеке поддержки и совместимый с Android 2.3 (уровень API 9) и выше.
На этой странице описаны интерфейс и функции редактора макетов. Для получения дополнительной информации о том, как использовать ConstraintLayout Для получения дополнительной информации о компоновке здания см.Создание ConstraintLayout с помощью ConstraintLayout。
Введение редактора
Редактор макетов отображается при открытии файла макета XML. Области редактора, соответствующие номерам на рисунке 1, следующие:
- Цветовая палитра: Предоставляет список виджетов и макетов, которые можно перетащить в макет в редакторе.
- пакетдерево: Просмотр иерархии с отображением макета. Нажав на элемент, вы увидите, что он выбран в редакторе.
- Панель инструментов: Предоставляет кнопки для настройки внешнего вида макета и редактирования свойств макета в редакторе.
- Редактор дизайна: Отображает макет в сочетании дизайна и дизайна.
- собственности: Предоставляет элементы управления свойствами для текущего выбранного представления.
Рисунок 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, следующие:
подсказка: Вы можете переключаться между этими видами, нажимая B.
подсказка: Вы можете изменить размер устройства, перетаскивая правый нижний угол макета.
банкнота: Эти конфигурации не влияют на код или манифест вашего приложения (если вы не решите начать сLayout VariantsДобавить новые файлы макетов), они влияют только на предварительный просмотр макета.
Создать новый макет
При добавлении нового макета в приложение сначала layout/ Создайте файл макета в каталоге, чтобы он применялся ко всем конфигурациям устройства. Если у вас есть макет по умолчанию, вы можете создать вариант этого макета для конкретной конфигурации устройства, например, большого экрана - если вы хотите это сделать, пропуститеСоздать вариант макета。
Есть несколько разных способов создать новый макет, в зависимости от вашегоProject Вид из окна, но следующие шаги могут быть выполнены из любого вида.
- вProject В окне выберите модуль, в который вы хотите добавить макет (например,app）。
- В главном меню выберитеFile > New > XML > Layout XML File。
- В появившемся диалоговом окне введите имя файла, корневой тег макета и исходный набор, к которому принадлежит макет. Затем нажмитеFinish。
Рисунок 4Диалоговое окно для добавления нового макета XML-файла
Вот несколько других способов создания нового файла макета (хотя отображаемые диалоговые окна различаются):
- Если вы ужеProject Выберите в окнеProject Просмотр: Откройте модуль приложенияres Каталог, щелкните правой кнопкой мыши каталог макетов, в который вы хотите добавить макет, а затем нажмитеNew > Layout resource file。
- Если вы ужеProject Выберите в окнеAndroid Вид: щелкните правой кнопкой мышиlayout Папка и выберитеNew > Layout resource file。
Создать вариант макета
Если у вас уже есть макет и вы хотите создать альтернативную версию для оптимизации макета для разных размеров экрана или ориентации, выполните следующие действия:
- Откройте исходный файл макета и убедитесь, что вы просматриваетеDesignРедактор (нажмите в нижней части окнаDesignЭтикетка).
- Нажмите на панели инструментовLayout Variants, В раскрывающемся списке выберите предложенный вариант (например,Create Landscape Variant) И закончите создание, или нажмитеCreate OtherИ переходите к следующему шагу.
- В появившемся диалоговом окне вам нужно только определить квалификатор ресурса для имени каталога. Вы можетеDirectory nameВведите квалификатор ресурса в илиAvailable qualifiersВыберите один из списка и нажмитеAdd。
- После добавления всех классификаторов нажмитеOK。
Если у вас есть несколько вариантов одного и того же макета, при нажатииLayout Variants , Вы можете легко переключаться между ними через отображаемый список.
Чтобы узнать больше о том, как создавать макеты для разных экранов, прочитайтеПоддержка разных размеров экрана。
Преобразовать макет в ConstraintLayout
ConstraintLayout Представление - это группа представлений, представленная в библиотеке макетов ограничений, которая включена в Android Studio 2.2 и более поздние версии. Он построен с нуля с помощью редактора макетов, поэтому все функции доступны через редактор дизайна, и вам не нужно вручную редактировать XML. Лучшее в ConstraintLayout - система макетов на основе ограничений, которая позволяет создавать большинство макетов без необходимости вложения каких-либо групп представлений.
Чтобы улучшить производительность макета, вы должны конвертировать предыдущие макеты в ConstraintLayout , Android Studio предоставляет встроенные конвертеры, чтобы помочь вам сделать это:
- Откройте существующий макет в Android Studio и нажмите в нижней части окна редактора.DesignТеги.
- в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 Для получения дополнительной информации о контроле свойств представления см.Создание согласованного пользовательского интерфейса с макетом ограничений。
Я только начинаю программировать на Java. Состряпал программу для работы, дал потестировать. С первых же шагов все стало очень плохо.
Разберем самый "нагруженный" макет.
Я уже всю голову сломал. В Android Studio есть эмулятор Pixel c разрешением 1080х1920 и плотность 420dpi. Тестировщик пытался воспользоваться программой на Sony Xperia XA с разрещением 1080х1920 и плотсностью 401dpi. Я не могу понять, каким образом нужно сделать макет чтобы он подходил на эти 2 телефона, учитывая что они оба large, xxhdpi, long.
Как нужно назвать папки в layout? Bообще почему такая разница в отображение макета если совершенно одинаковое разрешение?
Я уже не говорю о том как это отображается на моем "длинном" Mi9Se..
Если вы хотите экран который будет отображаться одинаково на разных экранах, то вы должны стараться избегать ситуаций в которых размер View задается фиксированным значением. Здесь есть разные подходы. Набросаю несколько по разным типам макетов.
Задавайте размеры экранов использую параметр weight. Так вы можете задавать пропорции ваших View и они будут одинаково смотреться на любом экране.
Задавайте View-хам размеры match_parent и wrap_content, а расстояния от границ корневой View или соседних регулируйте с помощью отступов (margin).
Тут вы можете расположить элементы относительно друг друга, задать им зависимости от других View. Так же можно задавать расстояния с помощью отступов.
Можете использовать параметры center, center_vertical, center_horizontal.
Как и в случае с RelativeLayout здесь вы можете задавать расположение элементов относительно друг друга.
В ConstraintLayout есть barrier и guideline, вы можете распологать их относительно экрана используя процентный размер от экрана. Например app:layout_constraintGuide_percent="0.1"
Вывод из этого всего один. Хотите адаптивный экран - переставайте хардкодить размер. Вы должны научиться располагать ваши элементы без использования жестких размеров, это приходит с опытом. Это совершенно не означает, что нигде нельзя хардкодить, но всегда когда размер вашей View задается жестко задумайтесь: "А можно ли это как-то изменить", если же нет, и ваша View действительно должна быть 200dp то остальной макет должен быть построен так, чтоб это все корректно отобразилось везде.
10.2k 3 3 золотых знака 10 10 серебряных знаков 32 32 бронзовых знака Из всего макета жесткий размер только у 2 последних edittext. И то я просто не знаю как сделать так чтобы было горизонтально 2 поля и кнопка. При этом так и остается загадкой почему на двух устройствах с одним разрешением такая разница в макетах Ну я не очень понимаю что именно вас необходимо. Но для сложных макетов рекомендую использовать ConstraintLayout. А там соответственно все описанное выше".. почему 2 одинаковых разрешения экрана отображают по разному макет .."
Дело в том, что верстка макета у вас завязана не на пиксели, а на плотность (грубо говоря отношение пикселей к физическому размеру экрана).
Плотность экрана тестируемых устройств у вас разная (420 и 401 соответственно), некоторые размеры виджетов указаны в абсолютных величинах плотности (dp) , поэтому и разный вид в итоге.
К примеру, вы указываете размер виджета 265dp - на экране с плотностью 420dp он займет чуть больше половины, а с плотностью 320dp - почти весь экран. Ваши экраны отличаются на 19dp и поэтому искажения не такие большие, но проблема будет присутствовать на любом отличном от "эталонного" экране (не 420dpi) и чем больше разница плотностей, тем отчетливее.
Для решения проблемы вам не нужно делать отдельную верстку под отличный от "эталонного" экран и искать какую то комбинацию квалификаторов для папки Layout, это бессмысленный и трудный путь решения проблемы - различных комбинаций экранов андроид-устройств очень большое количество и уже окончательно отчаявшись написать собственную разметку для 1001-ой комбинации пикселей и размера экрана, вы стокнетесь с ".. как это отображается на моем "длинном" Mi9Se.. " - Вместо всего этого вам нужно сделать ОДНУ адаптивную верстку под все экраны и все. Основные принципы такой верстки я излагал в этом отете, так же в другом ответе на этот вопрос изложены основные моменты для понимания, куда двигаться, поэтому повторять я это все не буду.
PS: сетка верстки по гайдлайнам гугла - 8dp, поэтому все эти значения в 5dp, 15dp, 150dp, 265dp и тд. достаточно плохая идея. В итоге это выльется в подсознательное ощущения у пользователя, что с этим приложением что то не так, интерфейс .. эээ .. некрасивый.
При разработке первых приложений мы уже встречали элемент 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>
Можно внедрить готовый файл компоновки в существующую разметку при помощи тега <include>:
Подробнее в отдельной статье 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. Кроме стандартных элементов разметки существуют и сторонние разработки.
Читайте также: