Реализация пользовательского интерфейса - Разработка мобильного приложения расчета и учета оплаты коммунальных услуг

Рассмотрим иерархию компонентов (Рис. 26) и вид интерфейса (Рис. 27) на примере экрана "Информация о пользователе".

Экран "Информация о пользователе" представляет собой RelativeLayout, который в свою очередь включает в себя ScrollView и вертикальный LinearLayout. LinearLayout содержит в себе два элемента - Button. ScrollView является наследником класса FrameLayout. Основным отличием является то, что он позволяет прокручивать элементы, если они занимают больше места, чем физический размер экрана. В ScrollView может содержаться только один элемент. В нашем случае это еще один вертикальный LinearLayout, который содержит четыре элемента TextView и столько же элементов EditText.

иерархия компонентов

Рис.26 Иерархия компонентов

скриншот экрана

Рис.27 Скриншот экрана "Информация о пользователе"

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:layout_margin="15dp"

Tools:context="course. utilities. User">

<ScrollView

Android:layout_width="fill_parent"

Android:layout_height="wrap_content"

Android:layout_above="@+id/linearLayout"

Android:layout_alignParentTop="true"

<LinearLayout

Android:layout_width="fill_parent"

Android:layout_height="wrap_content"

Android:orientation="vertical">

<TextView

Android:layout_width="fill_parent"

Android:layout_height="wrap_content"

Android:textAppearance="?android:attr/textAppearanceLarge"

Android:text="ФИО"/>

<EditText

Android:layout_width="fill_parent"

Android:layout_height="wrap_content"

Android:textAppearance="?android:attr/textAppearanceLarge"

Android:id="@+id/editTextUserFullName"/>

</LinearLayout>

</ScrollView>

<LinearLayout

Android:layout_width="wrap_content"

Android:layout_height="wrap_content"

Android:id="@+id/linearLayout"

Android:layout_alignParentBottom="true"

Android:layout_alignParentRight="true"

Android:layout_alignParentEnd="true">

<Button

Android:layout_width="wrap_content"

Android:layout_height="wrap_content"

Android:text="Сохранить"

Android:id="@+id/btnUserSave"

Android:onClick="btnUserSave_OnClick"/>

</LinearLayout>

</RelativeLayout>

Все элементы имеют атрибуты, позволяющие управлять их размерами или расположением. Рассмотрим атрибуты, представленные в примере.

Поскольку RelativeLayout является корнем в макете, он должна заполнить всю область экрана, которая доступна в приложении, установив ширину (layout_width) и высоту (layout_height) "match_parent". Это значение указывает, что вид должен расширить свою ширину или высоту, чтобы соответствовать ширине или высоте родительского вида. Атрибут android:layout_margin определяет отступ элемента от соседних элементов(или от родительского). В нашем примере значение этого элемента 15dp. Dp - абстрактная единица, основанная на плотности экрана. Атрибут tools:context позволяет определить связь между макетом и классом активности, в которой данный макет будет реализован.

Теперь рассмотри атрибуты ScrollView. Атрибута определяющий ширину имеет размер такой же, как и родительский элемент (fill_parent), а атрибут определяющий длину - по своему содержимому (wrap_content). Следующий атрибут обозначает то, что элемент располагается выше элемента, указанного в значении, т. е. выше LinearLayout, содержащего кнопки. И последний атрибут обозначает, что верхняя граница нашего элемента, располагается на верхней границу RelativeLayout.

Следующий элемент LinerLayout имеет такие же значения атрибутов, описывающих высоту и ширину. У этого элемента следует указывать ориентацию, в примере значение этого атрибута "vertical".

Дальше представлены элементы TextView и EditText (по одному элементу в качестве примера). Здесь появляются новые атрибуты. В TextView - это размер текста и строка отображаемая в этом элементе. В EditText добавляется значение идентификатора, для дальнейшего использования этого элемента.

У элемента Button инициализируется событие on_Click (нажатие кнопки), которому присваивается имя. Это событие описывается в соответствующем Java-классе.

Похожие статьи




Реализация пользовательского интерфейса - Разработка мобильного приложения расчета и учета оплаты коммунальных услуг

Предыдущая | Следующая