Руководство Android UI Layouts

1- What is Layout?

Android Layout это класс управляющий как его подкомпоненты появляются на экране. Любой компонент является  View (или дочерним от  View) может быть дочерним  Layout. Все классы  Layout расширены из класса  ViewGroup (дочерний  View), поэтому вы тоже можете создать кастомизированный  Layout, создав расширенный класс из  ViewGroup.
  • Иллюстрация показывает иерархию наследия можеду интерфейсами в Android.

2- The standard Layouts in Android

  • Стандартные Layout:
Layout Описание
LinearLayout


(Horizontal)

(Vertical)

LinearLayout это ViewGroup который располагает дочерние компоненты по единственному направлениюб вертикально или горизонтально. Вы можете определить направление используя:  android:orientation.

RelativeLayout

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

TableLayout

TableLayout это ViewGroup который отображает дочерние компоненты в строках и столбцах.

GridLayout

GridLayout использует сетку бесконечно тонких линий для отделения области рисования на: строки, столбцы и ячейки (cell). Он так же помогает расположить (span) строки и столбцы, то есть позволяет объединить смежные ячейки в большую ячекйку (прямоугольник) чтобы содержать View.
FrameLayout

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

AbsoluteLayout

AbsoluteLayout позволяет указать точное местоположение детей. Расположите детей по координатам x, y.

  • The standard Containers:
Container Description
RadioGroup

 

ListView

 

GridView

 

ExpandableListView

 
ScrollView

 

HorizontalScrollView

 

SearchView

 

TabHost

 

VideoView

 
DialerFilter

 

3- RelativeLayout

RelativeLayout это  ViewGroup который изображает  View в связанной позиции. Позиция каждого View может быть определен как связанный к другим дочерним View (например слева или внизу другого View) или в позициях связанных с родителем  RelativeLayout (например расставить внизу, слева или в центре).
RelativeLayout это мощная утилита для дизайна интерфейса для пользователя, потому что она может исключить  View группы и оставляет плоскую иерархию, а так же повысить производительность. Если используете несколько вложенных групп  LinearLayout, вы можете их заменить единственным  RelativeLayout.
Посмотрим на интерфейс ниже, и вы можете сделать такой используя  RelativeLayout.
  • SLIDER:

4- LinearLayout

LinearLayout это  ViewGroup который располагает дочерние компоненты по единственному направлениюб вертикально или горизонтально. Вы можете определить направление используя:  android:orientation.
Атрибуты:
Атрибут Описание
android:orientation Данный атрибут определяет направление позиционирования Layout, bạn sử dụng "horizontal" для строк, и "vertical" для столбца. По умолчанию ставится "horizontal".
Пример:
Заметка: Если коренным элементом интерфейса не является LinearLayout, вы моежете поменять название тага без необходимости вношения других изменений, так у вас будет интерфейс с коренным элементом  LinearLayout.
С дочерними  View расположенными в  LinearLayout имеется важный атрибут: android:layout_weight.

android:layout_weight

Данный атрибут относится к "важным" для  View, он определяет сколько пространства  View занимает на экране. Большое значение веса (weight) позволяет ему расширяться чтобы заполнить любое оставшееся пространство в родительском  View. Дочерний  View может определить значение веса. и потом любое пространство оставшееся в  ViewGroup будет прикреплено к дочерним  View с пропорцией из объявленного веса. Вес по умолчанию это 0.
Дочерние компоненты имеющие вес (weight) заполнят оставшееся пространство  LinearLayout пропорционально его весу.
С LinearLayout (Vertical), дочерние компоненты с атрибутом  android:width=fill_parent заполнят по горизонтали  LinearLayout (Vertical).
Можно так же настроить определенные значения widthheight для дочерних компонентов.
Различать  gravity и  layout_gravity:
  • android:layout_gravity настраивает притяжение View или Layout в родительском компоненте.
  • android:gravity настраивает притяжение содержания в View который используется (Например text). 

5- TableLayout

TableLayout это  ViewGroup который отображает дочерние компоненты в строках и столбцах.
TableLayout позиционирует дочерние компоненты по строкам или столбцам. Контейнер  TableLayout не показывает линию границы (border) для его строк, стобцов, или ячеек. Таблица будет иметь много столбцов со строками и ячейками. Таблица может иметь пустые ячейки, но ячейки не могут располагаться (span) вертикально, как в  HTML.
  • TableRow
Объекты  TableRow это дочерние  View в TableLayout (каждый  TableRow определяет единственную строку в таблице). Каждая строка имеет 0 или больше ячеек, каждая ячейка может содержать любой вид  View. Поэтому, каждая строка может содержать несколько объектов  View, как  ImageView или  TextView. Ячейка так же может содержать  ViewGroup (например, вы можете вложить другой  TableLayout в 1 ячейку).

Например:

Заметка: Если коренной элемент интерфейся не является TableLayout, вы можете поменять таг без других изменений, так вы получите интерфейс с коренным элементом  TableLayout.
TableRow будет автоматически создан (если этой строки не существует) при перетаскивании дочерних  View в ячейки таблицы.
Ячейки могут располагать (span) по горизонтали, но не по вертикали. Могут так же быть ячеки не содержащие никаких дочерних  View.
Вы можете настроить опеределенные размеры для  View в ячейке, это поменяет размер ячейки.
Вы можете настроить атрибуты android:layout_gravity и  android:gravity для  view расположенным в ячейках, описано в деталях в  LinearLayout.

6- GridLayout

GridLayout использует сетку бесконечно тонких линий для отделения области рисования на: строки, столбцы и ячейки (cell). Он так же помогает расположить (span) строки и столбцы, то есть позволяет объединить смежные ячейки в большую ячекйку (прямоугольник) чтобы содержать View.
Размер (Size), Поля (Margin) и Выравнивание/Гравитация (Alignment/Gravity)
In GridLayout, specifying sizes and margins is done just as with a LinearLayout. Alignment/gravity also works just like gravity in LinearLayout and uses the same constants: left, top, right, bottom, center_horizontal, center_vertical, center, fill_horizontal, fill_vertical and fill.
Flexibility
Не похожий на другое большигство инструментов, Android GridLayout не соединяет данные со строками или столбцами. Вместо этого, все делается с помощью Aligment (выравнивание) и гибкостью соединяется с самими компонентами.

Гибкость столбцов определятся из  gravity (гравитации) компонентов в столбцах. Если компоненты определяют  gravity, столб является гибким, если нет. то является негибким.

Пример:

Заметка: Если коренной элемент не является  GridLayout, вы можете поменять название тага без других измнений, так вы получите интерфейс с коренным элементом  GridLayout.
Подкомпоненты определяют их позицию в сетке соответствуя атрибутам  layout_row & layout_column:
С  GridLayout, если в колонне сетки нет объекта, ширина этой сетки будет равняться 0. Так же если строка сетки не имеет объекта, высота сетки будет равна 0.

layout_columnWeight

В GridLayout атрибут  layout_columnWeight это тяжесть по столбцу (column) объекта в ячейке, он влияет размещение по столбцу, по умолчанию его значение 0.
Если вы определяете другое значение помимо 0 для  layout_columnWeight вам нужно настроить значение  layout_gravity (гравитация layout) для объекта, это обязательно, без указания значения объекта  layout_gravity может не отобразиться на сетке:
  • Значения для layout_gravity для данного случая должны быть:
  • left
  • right
  • center_horizontal
  • center
  • fill_horizontal
  • fill

layout_rowSpan

layout_rowWeight

В GridLayout атрибут  layout_rowWeight это тяжесть по строкам (row) объекта в ячейке, он влияет на расположение по строками, значение по умолчанию является 0.

layout_columnSpan

OK, можете ли вы использовать  GridLayout для дизайна интерфейса как показано ниже?

7- FrameLayout

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

Пример:

Сделайте дизайн следующего интерфейса с  FrameLayout.
Приготовить файл изображения:
  • halong.png
Копировать и вставить файл в папку  mipmap.
Перетащить  ImageView в экран в область  left+top.
Индентично, перетащите 2 других объекта  TextView в экран:
Настроить атрибуты позволяющие  ImageView заполнить экран.
ImageView:
  • layout_width: fill_parent
  • layout_height: fill_parent
  • src: @mipmap/halong
Поменять атрибут для  TextView 1:
TextView 1:
  • layout_width: fill_parent
  • text: Halong Bay, Vietnam
  • layout_gravity:
    • top
    • left
  • layout_marginTop: 100dp
  • padding: 10dp
  • background: #d7cece
Поменять атрибуты для  TextView 2:
TextView 2:
  • text: Photo by intrepidtravel.com
  • layout_gravity:
    • right
    • bottom
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_gravity="top|left"
        android:src="@mipmap/halong" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Halong Bay, Vietnam"
        android:id="@+id/textView"
        android:layout_gravity="top|left|center_vertical"
        android:layout_marginTop="100dp"
        android:background="#d7cece"
        android:padding="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Photo by intrepidtravel.com"
        android:id="@+id/textView2"
        android:layout_gravity="right|bottom" />

</FrameLayout>
Перезапустить приложение: