Компоновка элементов в Activity

Компоновка — это архитектура расположения элементов интерфейса пользователя для конкретного окна, представляющего Activity. Компоновка определяет структуру расположения элементов в окне и содержит все элементы, которые отображаются пользователю программы.
Это довольно важная тема в разработке мобильных приложений, поскольку проектирование пользовательского интерфейса для мобильных телефонов и планшетов сложнее, чем для настольных систем или для веб-страниц. Экраны мобильных телефонов имеют гораздо меньшие размеры, чем обычные мониторы. Кроме того, существует много разновидностей дисплеев для мобильных телефонов, отличающихся размерами, разрешением и плотностью пикселов.
Необходимо также учесть, что большинство экранов для мобильных телефонов сенсорные, причем они могут быть разного типа. Например, емкостный экран реагирует на касание пальцем, а для взаимодействия с резистивным экраном используется стилус. Поэтому важно правильно задавать компоновку и размеры элементов управления, чтобы пользователю было удобно управлять вашим приложением независимо от типа экрана.

Формирование графического интерфейса пользователя

В Android-приложении графический интерфейс пользователя формируется с использованием объектов View и ViewGroup.
Объекты View — это основные модули для создания графического интерфейса пользователя на платформе Android. Класс View служит базовым для классов элементов управления, называемых виджетами, — текстовых полей, кнопок и т. д. Объект View является структурой, свойства которой сохраняют параметры компоновки и содержание для определенной прямоугольной области экрана. В графическом интерфейсе пользователя объект View является точкой взаимодействия пользователя и программы.
Класс ViewGroup представляет собой контейнер, который служит ядром для подклассов, называемых компоновками (layouts). Эти классы формируют расположение элементов пользовательского интерфейса на форме и содержат дочерние элементы View или ViewGroup.
При разработке пользовательского интерфейса для Android необходимо определить компоновку для каждого Activity в виде дерева, используя иерархии узлов View и ViewGroup.

Прорисовка графического интерфейса на экране

При запуске программы система Android получает ссылку на корневой узел дерева компоновки и использует ее для прорисовки графического интерфейса на экране мобильного устройства. Система также анализирует элементы дерева от вершины дерева иерархии, прорисовывая дочерние объекты View и ViewGroup и добавляя их родительским элементам. Для этого в методе onCreate() необходимо вызвать метод setContentView(), передав ему в качестве параметра ссылку на ресурс компоновки в следующем виде:
R.layout.layout_file_name
Например, если компоновка находится в файле activity_main.xml, ее загрузка в методе onCreate() происходит так:

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main);
}

Прорисовка элементов дерева компоновки всегда начинается с корневого узла. Затем последовательно прорисовываются дочерние объекты дерева компоновки. Это означает, что родители будут прорисовываться раньше, чем их дочерние объекты, т. е. по окончании процесса прорисовки элементов на экране родители будут находиться на заднем плане по отношению к дочерним узлам.

Layout Editor

Android Studio для разработки интерфейса предлагает визуальный редактор компоновки Layout Editor, применяемый для создания и предварительного просмотра создаваемых файлов компоновки, которые находятся в каталоге res/layout/ проекта:

Например, можно создавать XML-компоновки для различных ориентаций экрана мобильного устройства (portrait, landscape), размеров экрана, версии SDK и языков интерфейса.
В разделе Outline отображается компоновка в виде дерева. Объекты View — листья дерева, объекты ViewGroup — ветви. В разделе Properties можно задавать свойства для элементов интерфейса.

Создание компоновки

Компоновку можно создавать двумя способами:

• объявить элементы пользовательского интерфейса в XML-файле. Android обеспечивает прямой XML-словарь, который соответствует классам View и ViewGroup;
• создать компоновку для окна в коде программы во время выполнения — инициализировать объекты Layout и дочерние объекты View, ViewGroup и управлять их свойствами программно.

При разработке пользовательского интерфейса можно применять каждый из этих методов в отдельности или оба сразу для объявления и управления пользовательским интерфейсом в приложении. Например, можно объявить заданную по умолчанию компоновку окна вашего приложения в XML-файле, включая экранные элементы, которые появятся в них, и их свойства, а затем добавить код в приложение, который во время выполнения изменит состояние объектов на экране, включая объявленные в XML-файле.
Обычно, если интерфейс статический, используется XML-файлы. Преимущество объявления пользовательского интерфейса в XML-файле состоит в том, что это дает возможность отделить дизайн приложения от программного кода, который управляет поведением приложения. Ваше описание пользовательского интерфейса является внешним по отношению к программному коду. Это означает, что вы можете изменять пользовательский интерфейс в файле компоновки без необходимости изменения вашего программного кода.
Используя XML-компоновку, можно быстро проектировать пользовательский интерфейс тем же самым способом, которым вы создаете веб-страницы в HTML, — с рядом вложенных элементов.
Каждый файл компоновки должен содержать только один корневой элемент, который должен быть объектом View или ViewGroup. К корневому элементу, вы можете добавить дополнительные объекты компоновки как дочерние элементы.
Например, вот этот XML-файл компоновки приложения нашего тестового приложения:

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> 
 
    <TextView 
        android:text="@string/hello_world" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" /> 
 
</RelativeLayout> 

В этой XML-компоновке есть корневой элемент <RelativeLayout> и только один дочерний элемент TextView (текстовое поле), которые имеют следующие атрибуты:

• xmlns:android — объявление пространства имен XML, которое сообщает среде Android, что вы ссылаетесь на общие атрибуты, определенные в пространстве имен Android. В каждом файле компоновки у корневого элемента должен быть этот атрибут со значением "http://schemas.android.com/apk/res/android";
• android:layout_width — атрибут определяет, сколько из доступной ширины экрана должен использовать этот объект View (или ViewGroup). В нашем случае он — единственный объект, таким образом, можно растянуть его на весь экран, которому в данном случае соответствует значение fill_parent;
• android:layout_height — аналогичен атрибуту android:layout_width за исключением того, что он ссылается на доступную высоту экрана.
• группа 
• android:padding... — задают отступы вложенных элементов от границ контейнера.

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

Типы компоновок

Для создания окон существует несколько стандартных типов компоновок, которые вы можете использовать в разрабатываемых приложениях:

• FrameLayout;
• LinearLayout;
• TableLayout;
• GridLayout;
• RelativeLayout.

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

Компоновка LinearLayout
Компоновка FrameLayout
Компоновка TableLayout
Компоновка GridLayout
Компоновка RelativeLayout