Относительные размеры android studio

RelativeLayout

ReiativeLayout (относительная разметка) находится в разделе Layouts и позволяет дочерним компонентам определять свою позицию относительно родительского компонента или относительно соседних дочерних элементов (по идентификатору элемента). В RelativeLayout дочерние элементы расположены так, что если первый элемент расположен по центру экрана, другие элементы, выровненные относительно первого элемента, будут выровнены относительно центра экрана. При таком расположении, при объявлении разметки в XML-файле, элемент, на который будут ссылаться для позиционирования другие объекты представления, должен быть объявлен раньше, чем другие элементы, которые обращаются к нему по его идентификатору.

Важные атрибуты, которые связаны с родителем.

• android:layout_alignParentBottom — выравнивание относительно нижнего края родителя
• android:layout_alignParentLeft — выравнивание относительно левого края родителя
• android:layout_alignParentRight — выравнивание относительно правого края родителя
• android:layout_alignParentTop — выравнивание относительно верхнего края родителя
• android:layout_centerInParent — выравнивание по центру родителя по вертикали и горизонтали
• android:layout_centerHorizontal — выравнивание по центру родителя по горизонтали
• android:layout_centerVertical — выравнивание по центру родителя по вертикали

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

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

• android:layout_above — размещается над указанным компонентом
• android:layout_below — размещается под указанным компонентом
• android:layout_alignLeft — выравнивается по левому краю указанного компонента
• android:layout_alignRight — выравнивается по правому краю указанного компонента
• android:layout_alignTop — выравнивается по верхнему краю указанного компонента
• android:layout_alignBottom — выравнивается по нижнему краю указанного компонента
• android:layout_toLeftOf — правый край компонента размещается слева от указанного компонента
• android:layout_toRightOf — левый край компонент размещается справа от указанного компонента

Чтобы компоненты «не прилипали» друг к другу, используются атрибуты, добавляющие пространство между ними.

• android:layout_marginTop
• android:layout_marginBottom
• android:layout_marginLeft
• android:layout_marginRight

Рассмотрим простой пример. Допустим, мы хотим поместить на экран элементы EditText и Button. Кнопка должна находиться справа от текстового поля. Текстовое поле при этом должно быть выравнено слева относительно родительского элемента (компоновки) и слева относительно кнопки. В свою очередь кнопка должна быть выравнена справа относительно шаблона компоновки.

Во многих случаях грамотная относительная компоновка хорошо смотрится в альбомной и портретной ориентации.

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

Если вам понадобится динамически создавать относительную разметку в коде, то делается это следующим образом:

Создавать компоновку для относительной разметки чуть сложнее, чем для линейной компоновки. Рассмотрим ещё один пример. Предположим, нам нужен такой экран

Шаг 1: В XML-файле задаем относительную компоновку.

Шаг 2: Определяем дочерние элементы. В нашем случае мы имеем семь текстовых меток разного цвета. Каждому элементу присваиваем необходимые свойства: текст, цвет, размер символов и так далее.

Шаг 3: Определяем правила относительной разметки.
Красная метка должна находиться в правом верхнем углу родительского элемента.
Оранжевая метка должна располагаться по центру по горизонтали относительно родительского элемент.
Желтая метка выравнивается по правой части родительского элемента.
Зелёная метка выравнивается по центру (по вертикали) и выводится слева от синей метки.
Синяя метка выравнивается по центру (по вертикали и горизонтали) относительно родительского элемента, т.е. точно по центру.
Метка цвета индиго выравнивается по центру (по вертикали) и выводится справа от синей метки.
Фиолетовая метка выводится в нижней части родительского элемента и занимает всю её ширину.

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

Создаём неподвижную полоску

С помощью RelativeLayout можно создать неподвижную полоску внизу экрана, которая не будет прокручиваться вместе со списком. Для этого используется атрибут android:layout_alignParentBottom и родственные ему атрибуты для верхней части. Вот простой пример со списком.

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

Источник

Относительные размеры android studio

В ConstraintLayout применяются три способа установки размеров:

Установка точных размеров, например, 123dp

Значение WRAP_CONTENT , которое задает для виджета размеры, достаточные для расположения его содержимого

Значение 0dp , которое эквивалентно значению «MATCH_CONSTRAINT» в коде Java. В этом случае размеры элемента устанавливаются исходя из указанных для него ограничений. По умолчанию элемент занимает все доступное пространство.

Применим все три типа установки размеров:

Здесь создаются три элемента TextView. Все они центрируются по горизонтали, но по вертикали располагаются по верхней и нижней границе контейнера и в центре. Для всех трех TextView для высоты задано значение wrap_content , то есть все три элемента будут занимать ту высоту, которая для них предпочтительна, чтобы вместить содержимое:

Однако для каждого элемента заданы свои настройки ширины. Для верхнего TextView установлены точные размеры — 160 единиц:

Для центрального TextView установлено значение «0dp», благодаря чему элемент по умолчанию будет занимать все доступное для него пространство (в данном случае растягиваться по горизонтали):

Для нижнего TextView установлено значение «wrap_content», то есть элемент будет принимать ту ширину, которая необходима для вмещения его содержимого:

Стоит отметить, что во вложенных виджетах в ConstraintLayout не рекомендуется использовать значение match_parent , которое позволяет виджету занять все доступное пространство. Вместо этого рекомендуется использовать 0dp или «MATCH_CONSTRAINT» — вместе с другими ограничениями они дадут необходимый эффект. Так, для растяжения по ширине контейнера применяются следующие атрибуты:

А для растяжения по высоте контейнера применяются следующие атрибуты:

Например, растяжение TextView по всей длине и ширине контейнера:

Минимальные и максимальные размеры

Ряд атрибутов задают максимальные и минимальные размеры:

layout_constraintWidth_min и layout_constraintHeight_min : представляют соответственно минимальную ширину и высоту

layout_constraintWidth_max и layout_constraintHeight_max : представляют соответственно максимальную ширину и высоту

В качестве значения они принимают точное значение в dp или значение wrap (аналогично wrap_content ). Например:

Хотя в данном случае ширина TextView установлена в 260dp, поскольку максимальная ширина задана в 200dp, то реальная ширина не превысит 200dp.

Размеры в процентах

Атрибут layout_constraintWidth_percent задает ширину элемента в процентах по отношению к доступному пространству по горизонтали. Аналогично атрибут layout_constraintHeight_percent задает высоту в процентах по отношению к доступному пространству по вертикали.

Для их применения необходимо соблюсти следующие условия:

Соответствующий атрибут для установки размера ( android:layout_width — если мы устанавливаем ширину или android:layout_height — если мы устанавливаем ввысоту в процентах) должен иметь значение MATCH_CONSTRAINT или 0dp

Также необходимо установить атрибут app:layout_constraintWidth_default=»percent» при установке ширины и app:layout_constraintHeight_default=»percent» при установке высоты

В качестве значения атрибуты layout_constraintWidth_percent и layout_constraintHeight_percent принимают дробное число от 0 до 1.

Например, пусть TextView занимает по вертикали 25%, а по горизонтали 50% пространства:

Другой пример — пропорциональное разделение пространства между несколькими элементами:

В данном случае текстового поле EditText будет занимать 66%, а кнопка — 33% ширины:

Установка соотношения высоты и ширины

ConstraintLayout также позволяет устанавливать у элементов высоту относительно ширины / ширину относительно высоты. Для этого применяется атрибут layout_constraintDimensionRatio . В качестве значения он принимает отношение в виде Width:Height , например, 1:0.5 — здесь число 1 представляет ширину, а 0.5 — высоту. То есть ширина будет в два раза больше высоты. Но при этом хотя для одного измерения должно быть установлено 0dp ( MATCH_CONSTRAINT ). Например:

В данном случае ширина TextView будет такой, какая необходима для его содержимого, а высота 60% от ширины.

Если и для ширины, и для высоты установлено 0dp , то в этом случае система выберет наибольшее измерение, которое соответствует всем ограничениям, и относительно него установит значение другого измерения. Чтобы конкретизировать измерение, относительно которого будет идти расчет, можно указать символ W (ширина) или H (высота). Например:

В данном случае ширина будет в 4 раза меньше высоты.

Источник

Полный список

На этом уроке мы:

— разбираемся в характеристиках экрана
— рассматриваем layout параметры (высота, ширина, отступ, гравитация, вес)

Экраны

Для начала немного теории по экранам. Экран имеет такие физические характеристики как диагональ и разрешение. Диагональ – это расстояние между противоположными углами экрана, обычно измеряется в дюймах. Разрешение – кол-во точек по горизонтали и вертикали, которое экран способен отобразить, измеряется в пикселах.

Возьмем в качестве примера экран смартфона HTC Desire. Диагональ = 3,7 дюйма, разрешение = 800х480 пикселей.

Кол-во пикселей в одном дюйме называется dpi (dot per inch). Узнаем чему равно dpi в данном случае, вспомнив классику: c 2 = a 2 + b 2 , где с – кол-во пикселей по диагонали, т.е. вмещаемое в 3,7 дюйма. a и b – стороны экрана.

c = 3,7 * dpi
(3,7 * dpi) 2 = 480 2 + 800 2
dpi 2 = 870400 / 13,69 = 63579
dpi = 252. Т.е. в одном дюйме экрана помещается ряд из 252 пикселей.

Возвращаемся к теме урока. Рассмотрим подробно следующие параметры View элементов

Layout width и Layout height

Про ширину (layout_width) и высоту (layout_height) мы уже немного говорили на прошлом уроке. Мы можем указывать для них абсолютные значения, а можем использовать константы. Разберем подробнее эти возможности.

Абсолютные значения:

Используются следующие единицы измерения (ЕИ):

dp или dip — Density-independent Pixels. Абстрактная ЕИ, позволяющая приложениям выглядеть одинаково на различных экранах и разрешениях.

sp — Scale-independent Pixels. То же, что и dp, только используется для размеров шрифта в View элементах

pt — 1/72 дюйма, определяется по физическому размеру экрана. Эта ЕИ из типографии.

px – пиксел, не рекомендуется использовать т.к. на разных экранах приложение будет выглядеть по-разному.

mm – миллиметр, определяется по физическому размеру экрана

in – дюйм, определяется по физическому размеру экрана

Подробней о различиях и соотношениях между этими ЕИ вы можете прочесть в этом материале сайта.

Константы

match_parent (fill_parent) – означает, что элемент займет всю доступную ему в родительском элементе ширину/высоту.

wrap_content – ширина/высота элемента будет определяться его содержимым

Project name: P0072_LayoutProp
Build Target: Android 2.3.3
Application name: LayoutProp
Package name: ru.startandroid.develop.layoutprop
Create Activity: MainActivity

Открываем main.xml. Настроим корневой LinearLayout на горизонтальную ориентацию, удалим TextView, и добавим Button с шириной и высотой равной wrap_content. Она отображается на экране и ее ширина соответствует тексту на ней.

Изменим текст с «Button» на «Button with text», сохраним и посмотрим на экран.

Кнопка стала шире, т.к. ширина определяется по содержимому. Если же мы сейчас явно укажем ей ширину 250 dp, то кнопка растянется независимо от содержимого.

Теперь сделаем ширину равной match_parent. Кнопка растянулась на всю ширину родителя, т.е. LinearLayout. А LinearLayout в свою очередь занимет всю ширину экрана.

Если у нас родитель содержит несколько элементов и мы хотим, чтобы они заняли все пространство необходимо использовать параметр Layout weight – вес. Свободное пространство распределяется между элементами пропорционально их weight-значениям.

Изменим текст нашей кнопки на B1 и добавим ей соседа по LinearLayout – вторую кнопку с текстом B2. Ширину для обоих поставьте wrap_content

Займемся дележом. Если мы хотим, чтобы кнопки поделили пространство родителя поровну – то для обеих укажем weight = 1. В этом случае кнопки равны по ширине.

Обратите внимание, что не используются единицы измерения, указываются просто числа.

Если нужно, чтобы B1 занимала четверть, а B2 три четверти свободного пространства, то проставляем weight = 1 для B1 и weight = 3 для B2.

Кол-во элементов может быть любым. Добавим еще кнопку с текстом B3, weight = 2 и width = wrap_content.

xml-код получившегося экрана:

Теперь для B2 и B3 укажите weight = 0. Они больше не претендуют на свободное пространство и занимают ширину по содержимому, а B1 забирает все себе.

Разумеется, все выше сказанное применимо и для параметра высоты — height.

При использовании weight вы можете указать значение height или width = 0dp. В этом случае не будет учитываться содержимое элементов и результат будет более соответствующий коэффициентам веса.

Layout gravity

Параметр layout_gravity аналогичен выравниванию из Word или Excel. Удобнее всего продемонстрировать его с использованием FrameLayout. Я не описывал этот Layout на прошлом уроке, т.к. он совсем простой. Все помещаемые в него элементы он по умолчанию помещает в левый верхний угол и никак их не выстраивает. Нам это очень подходит для демонстрации настроек выравнивания.

Создадим grlayout.xml:

На экране видим:

Для наглядности текст кнопки отображает ее свойства. Все очевидно и несложно.

Я честно пытался понять зачем нужны значения gravity fill_* и clip_*, но так и не понял. То, что написано про них в хелпе у меня не работает. Если у вас есть сведения по этому поводу – пишите в каменты.

Layout margin

Параметры margin полностью аналогичны margin из html. Это отступ. Он может быть со всех сторон сразу, либо только с необходимых сторон. Продемонстрируем это на примере TableLayout. Создадим marginlayout.xml и нарисуем таблицу три на три с кнопками.

И на кнопке в центре будем экспериментировать.

margin = 50 dp
Вокруг кнопки со всех сторон образовался отступ = 50 dp.

margin left = 10 dp
margin top = 20 dp
Отступ слева и сверху.

margin right = 30 dp
margin bottom = 40 dp
Отступ справа и снизу.

Урок получился большой, но полезный. Думаю, это был последний урок дизайна, моделирования и верстки и дальше мы уже начнем кодить.

Стили

Если кто использовал HTML, то наверняка слышали про каскадные стили — CSS. Стили позволяют вам группировать атрибуты элементов (кнопок, таблиц, параграфов и т.д.). Далее вы просто применяете к элементам стили, и элемент рисуется с учетом всех атрибутов стиля. И нет необходимости повторять несколько раз один и тот же код для элементов, которые должны выглядеть одинаково. Особенно это удобно в случае изменения атрибутов. Вы просто меняете один раз стиль и все элементы с этим стилем меняются.

В Android тоже есть стили и они имеют точно такое же назначение. Если у вас есть несколько элементов и вам надо, чтобы они выглядели одинаково, то вы просто создаете один стиль и применяете его к нужным элементам. В принципе, вы пока можете не заморачиваться этим и начать использовать стили, когда наберетесь опыта. Ну а тем кому это интересно прямо сейчас — прошу в эту ветку нашего форума. Пользователь icamys на примере подробно разъясняет как использовать стили.

На следующем уроке:

— научимся обращаться к View-элементам из кода и менять их свойства

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

Источник