ПРОграммирование под Android: декабря 2014

1 декабря 2014 г.

RelativeLayout

RelativeLayout (относительная разметка) позволяет дочерним представлениям определять свою позицию относительно родительского представления или относительно соседних дочерних элементов (по идентификатору элемента).

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

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

android:layout_toLeftOf="@id/button_right"

Где @id/button_right – это идентификатор другого элемента.

Рассмотрим пример:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="fill_parent"
 android:layout_width="fill_parent">
 
 <Button
  android:id="@+id/button_center"
  android:text="Center"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerVertical="true"
  android:layout_centerInParent="true"/>
 <Button
  android:id="@+id/button_bottom"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Bottom"
  android:layout_centerHorizontal="true"
  android:layout_alignParentBottom="true"/>
 <Button
  android:id="@+id/button_top"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Top"
  android:layout_alignParentTop="true"
  android:layout_centerHorizontal="true"/>
 <Button
  android:id="@+id/button_left"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Left"
  android:layout_alignParentLeft="true"
  android:layout_centerVertical="true"/>
 <Button
  android:id="@+id/button_right"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Right"
  android:layout_alignParentRight="true"
  android:layout_centerVertical="true"/>
 <Button
  android:id="@+id/button_rel_right"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_toLeftOf="@id/button_right"
  android:layout_alignTop="@id/button_right"
  android:text="RelRight"/>
 <Button
  android:id="@+id/button_rel_left"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_toRightOf="@id/button_left"
  android:layout_alignTop="@id/button_left"
  android:text="RelLeft"/>
  
</RelativeLayout>

В данном коде первые пять кнопки позиционируются относительно родительского элемента RelativeLayout. Это кнопки Center, Top, Bottom, Left и Right. Они позиционируются ссылаясь на родительский элемент.

Кнопка RelLeft позиционируется относительно кнопки Left (строки 52, 53). Эти кнопки позиционируются ссылаясь на id элемента, относительно которого позиционируются. Кнопка RelRight позиционируется относительно кнопки Right (строки 45, 46).

Ну и посмотрим как это выглядит при запуске:

TableLayout

Разметка TableLayout, является расширением разметки LinearLayout и позиционирует свои дочерние элементы в строки и столбцы. TableLayout не отображает линии обрамления для их строк, столбцов или ячеек. TableLayout может иметь строки с разным количеством ячеек. При формировании разметки таблицы некоторые ячейки при необходимости можно оставлять пустыми.

При создании разметки для строк используются объекты TableRow, которые являются дочерними классами TableLayout (каждый TableRow определяет единственную строку в таблице). Строка может не иметь ячеек или иметь одну и более ячеек, которые являются контейнерами для других объектов View или viewGroup. Ячейка может также быть объектом ViewGroup (например, допускается вложить другой TableLayout или LinearLayout как ячейку).

Вот несколько правил для TableLayout. Во-первых, ширина каждой колонки определяется по наиболее широкому содержимому в колонке. Дочерние элементы используют в атрибутах значение match_parent. Атрибут TableRow для layout_height всегда wrap_content. Ячейки могут объединять колонки, но не ряды. Достигается слияние колонок через атрибут layout_span.

Если атрибуту android:stretchColumns компонента TableLayout присвоить значение "*", то содержимое каждого компонента TableRow может растягиваться на всю ширину макета.

Пример использования создание окна похожего на наборную панель телефона. Файл разметки:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center" >

    <TableRow
        android:id="@+id/TableRow01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <Button
            android:id="@+id/Button01"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="1" >
        </Button>

        <Button
            android:id="@+id/Button02"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="2" >
        </Button>

        <Button
            android:id="@+id/Button03"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="3" >
        </Button>
    </TableRow>

    <TableRow
        android:id="@+id/TableRow02"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <Button
            android:id="@+id/Button04"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="4" >
        </Button>

        <Button
            android:id="@+id/Button05"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="5" >
        </Button>

        <Button
            android:id="@+id/Button06"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="6" >
        </Button>
    </TableRow>

    <TableRow
        android:id="@+id/TableRow03"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <Button
            android:id="@+id/Button07"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="7" >
        </Button>

        <Button
            android:id="@+id/Button08"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="8" >
        </Button>

        <Button
            android:id="@+id/Button09"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="9" >
        </Button>
    </TableRow>

    <TableRow
        android:id="@+id/TableRow04"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <Button
            android:id="@+id/Button10"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="*" >
        </Button>

        <Button
            android:id="@+id/Button11"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="0" >
        </Button>

        <Button
            android:id="@+id/Button12"
            android:layout_width="20pt"
            android:layout_height="wrap_content"
            android:text="#" >
        </Button>
    </TableRow>

</TableLayout>

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

Страницы

1 декабря 2014 г.

RelativeLayout

TableLayout

1 декабря 2014 г.