Как группирует relativelayout дочерние элементы
Перейти к содержимому

Как группирует relativelayout дочерние элементы

  • автор:

Как группирует relativelayout дочерние элементы

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

  • android:layout_above : располагает элемент над элементом с указанным Id
  • android:layout_below : располагает элемент под элементом с указанным Id
  • android:layout_toLeftOf : располагается слева от элемента с указанным Id
  • android:layout_toRightOf : располагается справа от элемента с указанным Id
  • android:layout_toStartOf : располагает начало текущего элемента, где начинается элемент с указанным Id
  • android:layout_toEndOf : располагает начало текущего элемента, где завершается элемент с указанным Id
  • android:layout_alignBottom : выравнивает элемент по нижней границе другого элемента с указанным Id
  • android:layout_alignLeft : выравнивает элемент по левой границе другого элемента с указанным Id
  • android:layout_alignRight : выравнивает элемент по правой границе другого элемента с указанным Id
  • android:layout_alignStart : выравнивает элемент по линии, у которой начинается другой элемент с указанным Id
  • android:layout_alignEnd : выравнивает элемент по линии, у которой завершается другой элемент с указанным Id
  • android:layout_alignTop : выравнивает элемент по верхней границе другого элемента с указанным Id
  • android:layout_alignBaseline : выравнивает базовую линию элемента по базовой линии другого элемента с указанным Id
  • android:layout_alignParentBottom : если атрибут имеет значение true, то элемент прижимается к нижней границе контейнера
  • android:layout_alignParentRight : если атрибут имеет значение true, то элемент прижимается к правому краю контейнера
  • android:layout_alignParentLeft : если атрибут имеет значение true, то элемент прижимается к левому краю контейнера
  • android:layout_alignParentStart : если атрибут имеет значение true, то элемент прижимается к начальному краю контейнера (при левосторонней ориентации текста — левый край)
  • android:layout_alignParentEnd : если атрибут имеет значение true, то элемент прижимается к конечному краю контейнера (при левосторонней ориентации текста — правый край)
  • android:layout_alignParentTop : если атрибут имеет значение true, то элемент прижимается к верхней границе контейнера
  • android:layout_centerInParent : если атрибут имеет значение true, то элемент располагается по центру родительского контейнера
  • android:layout_centerHorizontal : при значении true выравнивает элемент по центру по горизонтали
  • android:layout_centerVertical : при значении true выравнивает элемент по центру по вертикали

Например, позиционирование относительно контейнера RelativeLayout:

RelativeLayout в Android Studio

Для позиционирования относительно другого элемента, нам надо указать id этого элемента. Так, поместим на RelativeLayout текстовое поле и кнопку:

В данном случае поле EditText располагается по центру в RelativeLayout, а кнопка помещается под EditText и выравнивается по его правой границе:

Позиционирование RelativeLayout в Android

Программное создание RelativeLayout

Создадим элемент RelativeLayout программно в коде Java:

package com.example.viewapp; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.widget.Button; import android.widget.EditText; import android.widget.RelativeLayout; public class MainActivity extends AppCompatActivity < @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); RelativeLayout relativeLayout = new RelativeLayout(this); EditText editText = new EditText(this); editText.setId(EditText.generateViewId()); Button button = new Button(this); button.setText("Отправить"); // устанавливаем параметры положения для EditText RelativeLayout.LayoutParams editTextParams = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT ); // выравнивание по центру родительского контейнера editTextParams.addRule(RelativeLayout.CENTER_IN_PARENT); // добавляем в RelativeLayout relativeLayout.addView(editText, editTextParams); // устанавливаем параметры положения для Button RelativeLayout.LayoutParams buttonParams = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT ); // выравнивание справа и снизу от поля EditText buttonParams.addRule(RelativeLayout.BELOW, editText.getId()); buttonParams.addRule(RelativeLayout.ALIGN_RIGHT, editText.getId()); // добавляем в RelativeLayout relativeLayout.addView(button, buttonParams); setContentView(relativeLayout); >>

Чтобы задать положение элемента в контейнере, применяется класс RelativeLayout.LayoutParams . Через конструктор устанавливаются значения для для ширины и высоты. Например, у элемента EditText для ширины устанавливается значение MATCH_PARENT , а для высоты — WRAP_CONTENT .

С помощью метода addRule() мы можем добавлять дополнительные правила для позиционирования элемента. Этот метод в качестве параметра принимает числовую константу, которая представляет параметр позиционирования и которая аналогична атрибуту. Например, атрибуту android:layout_centerInParent будет соответствовать константа CENTER_IN_PARENT , а атрибуту android:layout_alignRight константа ALIGN_RIGHT .

Стоит отметить, что в целях упрощения кода для установки id у EditText вызывается метод generateViewId(); , который позволяет программно сгенерировать id для элемента управления.

Затем установленный id передается в качестве второго параметра в метод addRule при установке правил для кнопки:

buttonParams.addRule(RelativeLayout.BELOW, editText.getId());

Тем самым мы указываем относительно какого элемента надо задать расположение.

Layout

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

Пришло время познакомиться с ними поближе.

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

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

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

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

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

FrameLayout LinearLayout TableLayout RelativeLayout GridLayout

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

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

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

Кстати, в некоторых случаях Eclipse подсказывает, если вы слишком намудрили с компоновкой и дает рекомендации, как можно упростить разметку.

Тег

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

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

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

// main.xml - имя вашей основной разметки setContentView(R.layout.main);

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

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

public void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); // закомментируем строчку подключения xml-компоновки // setContentView(R.layout.main); // Поодключаем компоновку программно // Сначала объявим все необходимые элементы управления TextView label = new TextView(this); label.setText(R.string.my_text_label); label.setTextSize(20); label.setGravity(Gravity.CENTER_HORIZONTAL); ImageView pic = new ImageView(this); pic.setImageResource(R.drawable.matterhorn); pic.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); pic.setAdjustViewBounds(true); pic.setScaleType(ScaleType.FIT_XY); pic.setMaxHeight(250); pic.setMaxWidth(250); LinearLayout ll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); ll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); ll.setGravity(Gravity.CENTER); ll.addView(label); ll.addView(pic); setContentView(ll); // все готово, можно подключать компоновку >

Relative Layout – особенности макетов экранов android приложений

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

Relative Layout - особенности макетов экранов android приложений

RelativeLayout – очень мощная утилита для разработки пользовательского интерфейса, поскольку она позволяет сократить количество вложенных view group, тем самым повышая производительность. Если вы используете несколько вложенных групп LinearLayout, вы можете заменить их одним RelativeLayout.

Расположение View

RelativeLayout позволяет дочерним view определять свою позицию относительно родительского view или относительно друг друга (с помощью ID). Таким образом вы можете выровнять два элемента относительно правой границы, или сделать один ниже другого, центрировать, и т. д. По умолчанию все дочерние view устанавливаются в правом верхнем углу layout, так что вы должны указать позицию каждого view используя различные свойства, доступные в RelativeLayout.LayoutParams (смотрите таблицу в конце этой статьи).

Некоторые из свойств макета, доступные view в RelativeLayout:

android:layout_alignParentTop
Делает верхний край этого view совпадающим с верхним краем родителя.

android:layout_centerVertical
Центрирует этот дочерний элемент по вертикали в его родителе.

android:layout_below
Располагает верхний край этого view ниже view, определенного с помощью ID.

android:layout_toRightOf
Располагает левый край этого view правее view, определенного с помощью ID.

Это всего лишь несколько примеров. Все атрибуты макета задокументированы в RelativeLayout.LayoutParams (смотрите таблицу в конце этой статьи).

Значение для каждого свойства макета либо логическое, что позволяет установить позицию макета относительно родительского RelativeLayout, либо ID, который ссылается на другой view в макете, по отношению к которому view должен быть расположен.

В вашем XML layout, зависимости по отношению к другим view в макете могут быть объявлены в любом порядке. Например, вы можете указать, что “view1” будет расположен ниже “view2“, даже если “view2” – последний элемент, объявленный в иерархии. Пример ниже демонстрирует такой сценарий.

Пример

Каждый из атрибутов, которые контролируют относительное положение view, выделен.

Таблица всех атрибутов макета, доступных дочерним view в RelativeLayout:
Перевод таблицы. Оригинал здесь.
XML Атрибуты элементов (views)
Имя атрибута Способ относительного расположения
android:layout_above Расположение текущего элемента выше элемента, указанного по ID
android:layout_alignBaseline Расположение текущего элемента на одной линии с элементом, указанным по ID
android:layout_alignBottom Выравнивание текущего элемента по нижнему краю элемента, указанного по ID
android:layout_alignEnd Конечный край текущего элемента соответствует конечному краю элемента, указанного по ID
android:layout_alignLeft Выравнивание текущего элемента по левому краю элемента, указанного по ID
android:layout_alignParentBottom Выравнивание текущего элемента по нижнему краю родителя
android:layout_alignParentEnd Конечный край текущего элемента соответствует конечному краю родителя
android:layout_alignParentLeft Выравнивание текущего элемента по левому краю родителя
android:layout_alignParentRight Выравнивание текущего элемента по правому краю родителя
android:layout_alignParentStart Начальный край текущего элемента соответствует начальному краю родителя
android:layout_alignParentTop Выравнивание текущего элемента по верхнему краю родителя
android:layout_alignRight Выравнивание текущего элемента по правому краю элемента, указанного по ID
android:layout_alignStart Начальный край текущего элемента соответствует начальному краю элемента, указанного по ID
android:layout_alignTop Выравнивание текущего элемента по верхнему краю элемента, указанного по ID
android:layout_alignWithParentIfMissing Родитель будет использоваться в качестве привязки в случае её отсутствия для layout_toLeftOf, layout_toRightOf, и т.д.
android:layout_below Расположение текущего элемента ниже элемента, указанного по ID
android:layout_centerHorizontal Выравнивание текущего элемента по центру горизонтально
android:layout_centerInParent Выравнивание текущего элемента по центру вертикально и горизонтально относительно родителя
android:layout_centerVertical Выравнивание текущего элемента по центру вертикально
android:layout_toEndOf Начальный край текущего элемента соответствует конечному краю элемента, указанного по ID
android:layout_toLeftOf Расположение текущего элемента слева от элемента, указанного по ID
android:layout_toRightOf Расположение текущего элемента справа от элемента, указанного по ID
android:layout_toStartOf Конечный край текущего элемента соответствует начальному краю элемента, указанного по ID

Android Layouts: обзор RelativeLayout и LinearLayout

Android Layouts: обзор RelativeLayout и LinearLayout | Prologistic.com.ua

В этой статье мы ударимся в теорию и рассмотрим основные блоки для построения пользовательского интерфейса: рассмотрим различные XML макеты (компоновки) в Android, основательно разберемся с RelativeLayout и LinearLayout .

Эта статья является хорошей шпаргалкой по работе с Android Layouts, а именно с компоновкой RelativeLayout и LinearLayout .

Обзор XML макетов (Android Layouts)

В Android основным строительным блоком пользовательского интерфейса является объект View , который по умолчанию он занимает прямоугольную область на экране. Этот объект является экземпляром одноименного класса View и базовым классом для всех компонентов пользовательского интерфейса, например: TextView, Button, EditText и другие.

Также есть класс ViewGroup , который является подклассом View . Один или несколько View могут быть сгруппированы в ViewGroup . Этот класс обеспечивает компоновку, вид и последовательность View . Примерами ViewGroup являются LinearLayout , RelativeLayout , о которых мы сегодня и поговорим.

Основные макеты в Android:

  • RelativeLayout — это ViewGroup , который определяет положение дочерних View относительно друг друга.
  • LinearLayout — это ViewGroup , который определяет расположение всех дочерних элементов: по вертикали или по горизонтали.
  • AbsoluteLayout позволяет указать точное положение дочерних View .
  • TableLayout рассматривает дочерние элементы в виде строк и столбцов.
  • GridView — разновидность ViewGroup , в котором элементы представлены в двумерной сетке с прокруткой. Элементы в GridView попадают из назначенного экземпляра ListAdapter .
  • FrameLayout заполняет собой экран для отображения единственного View .
  • ListView — набор View , который можно скроллить (прокручивать).
  • Scrollview — разновидность FrameLayout , позволяющая просматривать элементы пользовательского интерфейса даже если они не видны на первом экране. Это происходит с помощью скроллинга (пользователь прокручивает экран для полной видимости содержимого). Scrollview может содержать только один вид дочерний View и же макет ViewGroup .

Android Layouts: атрибуты XML макета/компоновки

  • android:id — это идентификатор, который однозначно идентифицирует элемент View
  • android:layout_width — ширина макета
  • android:layout_height — высота макета
  • android:layout_margin — дополнительное пространство за пределами элемента View .
  • android:layout_padding определяет дополнительное пространство внутри элемента View .
  • android:layout_gravity определяет расположение дочернего View .
  • android:layout_weight определяет дополнительного пространства для View .
  • android:layout_x определяет координаты макета по оси Ox
  • android:layout_y определяет координаты макета по оси Oy

Атрибут android:layout_width=»wrap_content» указывает, что View должно занять ровно столько места по ширине, сколько занимает его содержимое.

Атрибут android:layout_width указывает, что View должно занять ровно столько места по ширине, сколько занимает его родительский элемент.

В этом уроке мы рассмотрим два наиболее популярных в разработке под Android макета:

  • LinearLayout
  • RelativeLayout

Макет LinearLayout в Android

  • Макет LinearLayout в Android группирует элементы в одну линию. В разметке макета указываем атрибут android:orientation , который определяет тип размещения: по вертикали или по горизонтали. По умолчанию стоит значение по горизонтали.
  • Значение «по вертикали» в LinearLayout означает только один дочерний элемент в строке, а «по горизонтали» означает одну сплошную строку элементов на экране.
  • Атрибут android:layout_weight указывает важность элемента. Элемент с большим весом занимает больше места на экране.

Макет RelativeLayout в Android

Макет RelativeLayout определяет положение дочерних View относительно друг друга. Дочерние элементы в RelativeLayout определяют свое положение с помощью специальных атрибутов: toLeftOf , toRightOf , below , above . Например, мы явно указываем, что один элемент View должен быть toLeftOf (слева от) другого элемента View .

Мы также можем позиционировать View по отношению к своему родительскому элементу RelativeLayout , например, layout_centerHorizontal — элемент должен быть выравнен по горизонтали и быть по центру. Если ни один из атрибутов для позиционирования не указан, то View будет определен по умолчанию — в левом верхнем углу родительского элемента.

Ниже перечислены основные атрибуты макета RelativeLayout по трех различных категориях позиционирования:

По отношению к родительскому элементу

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

По отношению к соседним элементам

  • Атрибут android:layout_above устанавливает элемент выше указанного элемента
  • Атрибут android:layout_below устанавливает элемент ниже указанного элемента
  • Атрибут android:layout_toLeftOf устанавливает элемент слева от указанного элемента
  • Атрибут android:layout_toRightOf устанавливает элемент справа от указанного элемента

Следует отметить, что элемент устанавливается относительно другого элемента по его id. Это делается с помощью конструкции « @id/уникальныйИдентификаторЭлемента «, например:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *