Краткий обзор View
Все распространенные элементы пользовательского интерфейса и диспетчеры компоновки наследуются от класса View. Который, в свою очередь наследуется от класса Object.
Наследуясь от класса View, элементы пользовательского интерфейса получают одинаковые возможности.
Например:
background - позволяет задать фон элемента управления.
id - позволяет задать уникальный идентификатор элемента.
visibility - позволяет логически скрыть или отобразить элемент из визуального дерева.
padding - задает отступ в pixels между внутренней и внешней частями элемента управления. Отступ задается для всех четырех сторон.
paddinbottom - задает отступ в pixels аналогично android:padding, но только от нижнего края.
paddingLeft - задает отступ в pixels аналогично android:padding, но только от левого края.
paddingRight - задает отступ в pixels аналогично android:padding, но только от правого края.
paddingTop - задает отступ в pixels аналогично android:padding, но только от верхнего края.
К распространенным элементам пользовательского интерфейса можно отнести:
TextView |
Стандартный элемент, предназначенный только для вывода текста. Поддерживает многострочное отображение, форматирование и автоматический перенос. Обладает функцией распознавания почтовых и URL-адресов, телефонов и т.п. |
EditText |
Редактируемое поле для ввода текста. Поддерживает многострочный ввод, перенос слов на новую строку и текст подсказки. Поддерживает исправление распространенных грамматических ошибок и режимы набора только в верхнем регистре, телефонных номеров и паролей. |
AutoCompleteTextView |
Разновидность TextView с функцией автозаполнения. Предлагает пользователю возможные варианты продолжения набора, когда тот вводит текст (варианты предлагаются для всего текста целиком). |
MultiAutoCompleteTextView |
Аналогичен AutoCompleteTextView, но позволяет выводить варианты набора для каждого слова. |
Button |
Кнопка. |
ImageButton |
Кнопка с изображением. Кнопку можно сделать прозрачной и тем самым за счет изображения придать кнопке любой вид. |
ToggleButton |
Кнопка с полоской. Имеет два состояния: вкл. (полоска зажигается зеленым цветом) и выкл. |
RadioButton |
«Радиокнопка» или кнопки переключателя, позволяет выбрать только один из нескольких вариантов. |
CheckBox |
Кнопка, имеющая два состояния. Представлена в виде отмеченного или неотмеченного флажка («галки»). |
ImageView |
Позволяет отобразить изображение из файла. Вместо файла можно указывать цвет. |
DataPicker |
Позволяет реализовать выбор даты. |
TimePicker |
Предназначен для реализации выбора времени. |
DigitalClock |
Цифровые часы (часы, минуты и секунды) |
AnalogClock |
Аналоговые часы (только две стрелки) |
MapView |
Предназначен для вывода карт Google |
ListView |
Выводит вертикальный список элементов. Если количество выводимых элементов превысит размеры экрана, то список можно будет прокручивать. ЭлементыListView могут реагировать на щелчки. |
GridView |
Позволяет выводить данные в виде таблицы. |
Spinner |
Составной элемент, отображающий TextView в сочетании с ListView. Элемент представляет собой раскрывающийся список. |
ViewFlipper |
Позволяет задать несколько видов и одну горизонтальную строку. Переход между отображающимися элементами осуществляются с помощью анимации. |
Все элементы - диспетчеры компоновки наследуются от класса ViewGroup, который в свою очередь наследуется от класса View. Таким образом, каждый диспетчер обладает такими же особенностями что и распространенные элементы управления плюс обладает характерными только для диспетчера, которые он получает от класса ViewGroup. Как правило, свойства диспетчеров направлены на управления компоновкой вложенных элементов.
В классе ViewGroup объявлен встроенный или как еще называют вложенный класс (Nested class) - LayoutParams. Он позволяет задать, будут ли вложенные элементы занимать всю ширину (fill_parent или match_parent в более поздних версиях Google Android (андроид)) или всю высоту диспетчера (wrap_content).
И в классе View объявлен вложенный класс - Gravity. Который позволяет наделить элементы такими свойствами как:
gravity - позволяет задать, например, расположение текста внутри элемента EditText (left, center или right)
layout_gravity - позволяет задать расположение элемента внутри панели (контейнера)
К панелям можно отнести:
LinearLayout |
Выстраивает дочерние элементы друг за другом в горизонтальный или вертикальный ряд. Вертикальная разметка представляет собой колонку, а горизонтальная – строку с элементами. Данная разметка позволяет задавать не только размеры, но и «относительный вес» дочерних элементов относительно друг друга. |
RelativeLayout |
Позволяет задать расположение элементов относительно диспетчера, либо относительно другого элемента(-ов) в этом диспетчере. |
TableLayout |
Позволяет размещать дочерние элементы внутри таблицы. Размеры ячеек таблицы могут оставаться постоянными или автоматически растягиваться при необходимости. |
AbsoluteLayout |
для каждого элемента указывается явная позиция на экране в системе координат (x,y)
|
Gallery |
Представляет элементы в виде прокручиваемого горизонтального списка (обычно графические элементы). |
Давайте попробуем добавить в layout еще несколько компонентов и расположить их должным образом. Откроем activity_main.xml, поменяем элемент верхнего уровня на LinearLayout, добавим ему атрибут android:orientation="vertical" и удалим все его содержимое. Затем добавим в начало тега LinearLayout еще один TextView и установим у него следующие свойства:
android:id="@+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="14dip"
android:layout_marginLeft="26dip"
android:text="Trip computer"
android:textAppearance="?android:attr/textAppearanceLarge"
это можно сделать как через xml так и через редактор интерфейса.
Затем добавим сразу еще один TextView:
<TextView
android:id="@+id/textViewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginTop="26dp"
android:text="Лабораторная работа по ОС Android"
android:textAppearance="?android:attr/textAppearanceMedium" />
Теперь добавим картинку:
<ImageView
android:id="@+id/imageViewAndroid"
android:layout_width="fill_parent"
android:layout_height="80dip"
android:src="@android:drawable/sym_def_app_icon" />
свойство src указывает откуда брать картинку, в данном случае она берется из ресурсов ОС.
И в конце добавим кнопку которая будет привязана к правому краю экрана, для этого необходимо сначала создать RelativeLayout, вложить в него Button и затем использовать свойство android:layout_alignParentRight="true"
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip" >
<Button
android:id="@+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="20dip"
android:minWidth="100dip"
android:text="Start" />
</RelativeLayout>
Вот что должно получиться в итоге.
Результат:
И код верстки:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="14dip"
android:layout_marginLeft="26dip"
android:text="Trip computer"
android:textAppearance="?android:attr/textAppearanceLarge"
tools:context=".MainActivity" />
<TextView
android:id="@+id/textViewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginTop="26dp"
android:text="Лабораторная работа по ОС Android"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="@+id/imageViewAndroid"
android:layout_width="fill_parent"
android:layout_height="80dip"
android:src="@android:drawable/sym_def_app_icon" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip" >
<Button
android:id="@+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="20dip"
android:minWidth="100dip"
android:text="Start" />
</RelativeLayout>
</LinearLayout>