Проектирование элементов из группы Layouts

В лаб. работе 1 без написания программного кода был создан простейший проект с одним элементом. Там же был рассмотрен код XML-файлов, в которых хранятся данные приложения. В частности в нем заданы свойства контейнера, занимающего всю сцену и его единственного дочернего элемента типа TextView.

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

Во-первых, вставлять элементы и изменять их свойства можно при помощи вкладок Palette (левый край рабочего стола) и Properties (правый край) (рис.2.2).

Во-вторых свойства элементов можно менять программно. Android поддерживает способ, основанный на XML-разметке. Файлы XML-разметки находятся в папке res/layout проекта. Сокращение "res" образовано от слова "resources" (ресурсы). Папка содержит ресурсы, не связанные с программным кодом приложения. Кроме разметки там же содержатся изображения, звуки, строки для локализации и т.д. Для ее просмотра надо слева в структуре проектов раскрыть папки res/layout, а также дважды щелкнуть по файле activity_main.xml (если он у вас закрыт) в строке над рабочей областью. XML-файлы можно просматривать в двух режимах: текстовом и визуальном. Для переключения их предназначены две кнопки внизу вкладки Palette: Design и Text. При нажатии кнопки Text откроется текстовый вид файла 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"

android:id="@+id/hello_world">

<TextView android:text="@string/hello_world" android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="44dp"

android:id="@+id/textView" />

</RelativeLayout>

Удаление элементов в режиме Design проще всего выполнить при помощи правой кнопки мыши (Delete), в режиме Text - стиранием соответствующего программного кода файле activity_main.xml.

Рассмотрим работу c элементами из группы Layouts, содержащей макеты размещения на заданном контейнере дочерних элементов. Для этого надо переключится в конструкторский режим нажатием кнопки Design внизу вкладки Palette. Обычная сцена приложения представляет собой некоторый макет типа Layouts, который заполнен дочерними элементами типа View.

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

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

В группе Layouts найдите элемент FrameLayout, перетащите его на форму и отпустите. После этого на экране приложения появится схематическое изображение рамки, а в программном коде XML-файла приложения (activity_main.xml) добавится описание нового элемента, в которое внесены его свойства, заданные системой по умолчанию:

<FrameLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_centerVertical="true"

android:layout_alignRight="@+id/textView"

android:layout_alignEnd="@+id/textView"

android:layout_marginRight="23dp"

android:layout_marginEnd="23dp"></FrameLayout>

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

После растягивания рамки вправо (в режиме Design) программное описание нового элемента изменится следующим образом:

<FrameLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_below="@+id/textView"

android:layout_marginTop="23dp"></FrameLayout>

Пример 1 кода приложения с использованием FrameLayout, содержащего изображение (ImageView) и текстовую надпись (TextView):

<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:src="@drawable/icon" android:scaleType="fitCenter" android:layout_height="fill_parent" android:layout_width="fill_parent"/> <TextView android:text="Learn-Android.com" android:textSize="24sp" android:textColor="#000000" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="center"/></FrameLayout>

2. LinearLayout -линейный макет общей формы контейнера, который делится на отдельные строки, в каждую из которых помещается один элемент. Разбиение может быть вертикальное или горизонтальное, тип разбиения указывается в атрибуте LinearLayout android:orientation. Внутри верстки возможно комбинировать вертикальную и горизонтальную разбивки, а кроме того, возможна комбинация нескольких разных типов верстки например использование LinearLayout внутри FrameLayout.

Перетащите элемент с панели Palette на форму. При этом в коде появится следующее дополнительное описание элемента, у которого свойства заданы системой по умолчанию:

<LinearLayout

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_centerVertical="true"

android:layout_alignRight="@+id/textView"

android:layout_alignEnd="@+id/textView"></LinearLayout>

Требуется изменить фон элемента на насыщенный желтый без канала прозрачности. Для этого надо в Свойствах выбрать пункт background. В этой строке справа вызвать окно Resourses и выбрать в нем из опций Project, System, Color последнюю. Откроется окно настройки цветов. В нем вначале выбираем систему задания цвета - RGB (сумму красного, зеленого и синего цветов без использования канала прозрачности). Поскольку желтый цвет образуется сложением красного и синего, то для задания насыщенного желтого надо задать интенсивности 255 в окнах Red, Green и интенсивность 0 в окне Blue. В верхней строке будет выведен полученный цвет, а в текстовом поле с меткой # - его 16-ричная кодировка FFFF00, в которой каждое из соответствующих чисел в интервале от 0 до 256 представлено двумя 16-ричными цифрами (рис.2.3).

Рис.2.3. Задание желтого цвета фону элемента

После нажатия OK: на изображении устройства рамка, соответствующая элементу, станет желтой (рис.2.4), в конце программного описания элемента (перед закрывающим тегом) появится соответствующая дополнительная строка:

android:background="#ffffff00">

 

Рис.2.4. Измененное изображение устройства

Пример горизонтальной ориентации в линейном макете, содержащем 3 кнопки (Button):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /></LinearLayout>

Пример комбинации нескольких LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /></LinearLayout> </LinearLayout>

3. RelativeLayout - тип верстки при котором позиционирование элементов происходит относительно друг друга и относительно главного контейнера. Атрибуты позиционирования относительно контейнера следующие:

android:layout_alignParentBottom – Низ элемента находится внизу контейнера,

android:layout_alignParentLeft – Левая часть элемента прилегает к левой части контейнера,

android:layout_alignParentRight – Правая часть элемента прилегает к правой части контейнера,

android:layout_alignParentTop – Элемент находится в верхней части контейнера,

android:layout_centerHorizontal – Элемент позиционируется по центру относительно горизонтального размера контейнера,

android:layout_centerInParent – Элемент позиционируется по центру относительно горизонтального и вертикального размеров размера контейнера,

android:layout_centerVertical – Элемент позиционируется по центру относительно вертикального размера контейнера.

Атрибуты позиционирования относительно других элементов. В качестве значений этих атрибутов ставятся id элемента относительно которого будет выполняться позиционирование.

android:layout_above – Располагает элемент над указанным,

android:layout_below – Располагает элемент под указанным,

android:layout_toLeftOf – Располагает элемент слева от указанного,

android:layout_toRightOf – Располагает элемент справа от указанного,

Выравнивание относительно других элементов.

android:layout_alignBaseline – Выравнивает baseline элемента с baseline указанного элемента,

android:layout_alignBottom – Выравнивает низ элемента по низу указанного элемента,

android:layout_alignLeft – Выравнивает левый край элемента с левым краем указанного элемента,

android:layout_alignRight – Выравнивает правый край элемента с правым краем указанного элемента,

android:layout_alignTop – Выравнивает верхнюю часть элемента в соответствие с верхней частью указанного элемента,

Пример применения типа версткиRelativeLayout.

<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <Button android:id="@+id/backbutton" android:text="Back" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/firstName" android:text="First Name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/backbutton" /> <EditText android:id="@+id/editFirstName" android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/firstName" android:layout_below="@id/backbutton"/> <EditText android:id="@+id/editLastName" android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/editFirstName" android:layout_alignLeft="@id/editFirstName"/> <TextView android:id="@+id/lastName" android:text="Last Name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline = "@id/editLastName" android:layout_below="@id/editFirstName" /> </RelativeLayout>

TableLayout

TableLayout — табличная верстка.
Организует элементы в строки и столбцы таблицы.
Для организации строк служит таг <TableRow>, а количество столбцов определяется максимальным количеством элементов внутри одного из <TableRow>.
В случае если элемент должен занимает несколько ячеек используется атрибут android:layout_span.
По умолчанию <TableRow> организует строки таблицы, если мы хотим организовывать не строки а столбцы, нужно использовать атрибут android:layout_column

 

<TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <TableRow> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="column1" android:textAppearance="?android:attr/textAppearanceMedium" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="column2" android:textAppearance="?android:attr/textAppearanceMedium" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="column 3" android:textAppearance="?android:attr/textAppearanceMedium"/> </TableRow> <TableRow> <TextView android:id="@+id/textViewSpan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" span three column" android:layout_span = "3" android:textSize="23sp" android:textAppearance="?android:attr/textAppearanceMedium"/> </TableRow></TableLayout>

Alternate Layouts

Alternate Layouts — альтернативная верстка. Позволяет использовать различную верстку для различных ориентаций экрана.
XML для альтернативной верстки помещается в папки проекта:

res/layout-land – альтернативная верстка для landscape UI
res/layout-port –альтернативная верстка для portrait UI
res/lauout-square – альтернативная верстка для square UI

и перед тем как получить макет из res/lauout система проверяет наличие файлов в этих папках.

И в завершении немного о стилях.

 

Стили

Во первых стили элемента могут быть описаны в атрибутах самого элемента.
Например:

 

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#00FF00" android:typeface="monospace" android:text="@string/hello" />

 

Кроме того стили можно вынести в отдельный xml файл и сохранить его в папке res/values/
Напимер:

 

<?xml version="1.0" encoding="utf-8"?><resources> <style name="CodeFont" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#00FF00</item> <item name="android:typeface">monospace</item> </style></resources>

Если мы вынесем стили в отдельный файл, то для описания стилей элемента будем использовать атрибут style.

 

<TextView style="@style/CodeFont" android:text="@string/hello" />

· android

·, android development

·, android layout

}

В разметке мы указали, что один из компонентов ImageView должен быть невидимым. Если бы мы этого не сделали, то увидели, что компоненты просто накладываются друг на друга в стопку. И если элементы разных размеров, то можно увидеть, как одно изображение частично перекрывает другое.

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

Если часть элементов сверху стопки являются невидимыми, то могут наблюдаться проблемы с выводом на экран. В этих случаях рекомендуется вызывать метод setMeasureAllChildren() с аргументом true (аналог метода - атрибут android:measureAllChildren="true").