Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Разработка мобильных приложений в среде Android Studio. Учебное пособие
.pdf
21
2. ИНТЕРФЕЙС МОБИЛЬНОГО ПРИЛОЖЕНИЯ (ACTIVITY)
Activity – это самый основной компонент приложения, который представляет собой экран интерфейса. Обычно Activity отображается во весь
экран, однако его размер может быть меньше, и оно может размещаться
поверх других окон. Мобильное приложение состоит из Activity, которые
вызывают друг друга, и с которыми пользователи могут взаимодействовать
для выполнения каких-либо действий. Каждой операции присваивается
экран для прорисовки соответствующего пользовательского интерфейса.
Создание активности было рассмотрено в предыдущей лабораторной
работе.
2.1. Создание Activity
Создать Activity можно нажатием одной кнопки: нажатие правой
кнопкой по папке java -> New -> Activity. Далее нужно выбрать тип
Activity. Затем среда разработки предложит указать опции для создаваемого Activity (рис. 11):
- название класса Activity;
- название файла разметки;
- отображаемое имя;
- использовать ли это Activity как первое при запуске;
- создать ли в этом Activity фрагмент;
- есть ли у этого Activity особый родитель;
- в какой папке должно располагаться Activity;
- язык исходного кода.
и среда разработки создаст все необходимое для работы нового Activity.
Другой вариант создания Activity – выполнение представленных выше действий вручную:
1. Создание макета (файла xml-разметки), в примере activity_main3.
Правый клик по подпапке layout в папке res New->Layout Resource File [6].
2. Создание нового класса – наследника от Activity. Правый клик по
папке java New->Java [7]. Обязательно необходимо переопределить метод
onCreate(), который должен выглядеть примерно следующим образом:
2. Интерфейс мобильного приложения (Activity)
22
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main3);
}
3. Сделать запись о новом Activity в манифест:
<activity
android:name=".Main3Activity"
android:label="@string/title_activity_main3"></activity>
На данном этапе можно считать создание Activity завершенным.
Рис. 11. Создание нового Activity
2.2. Xml-разметка
23
2.2. Xml-разметка
Макет (xml-разметка) приложения определяет набор объектов пользовательского интерфейса и их расположение на экране [8]. Макет формируется из определений, написанных на языке XML. Каждое определение
используется для создания объекта, выводимого на экране (например,
кнопки или текста).
Создание файла разметки представлено в подразд. 2.1.
Существует два способа наполнить макет содержимым:
1. Объявление элементов пользовательского интерфейса в XML.
В Android имеется удобный справочник XML-элементов для классов View
и их подклассов, например таких, которые используются для виджетов и
макетов.
2. Создание экземпляров элементов во время выполнения. Приложение может программным образом создавать объекты View и ViewGroup
(а также управлять их свойствами).
Платформа Android предоставляет гибкость при использовании любого из этих способов для объявления пользовательского интерфейса приложения и его управления. Например, возможно объявить XML – макеты
по умолчанию, включая элементы экрана, которые будут отображаться в
макетах, и их свойства. Затем добавить в приложение код, который позволяет изменять состояние объектов на экране (включая объявленные в XML)
во время выполнения.
Мобильная платформа поддерживает поворот экрана, соответственно, приложения также должны корректно отображать макеты для обоих
типов поворота. Поэтому необходимо создавать два макета с одинаковым
именем: один – горизонтальный, другой – вертикальный, на которых следует располагать элементы на нужных позициях. Для этого определяется
новый xml-файл со свойством Orientation в Available qualifiers, где необходимо нажать стрелочку вправо и выбрать необходимую ориентацию
(рис. 12).
При создании макета будет соблюдаться определенная структура:
корневым объектом всегда будет являться элемент-наследник класса View
или ViewGroup. Далее в корневой элемент можно добавить необходимое
количество элементов.
2. Интерфейс мобильного приложения (Activity)
24
При создании элементов в графическом редакторе обязательным параметром является идентификатор. Идентификатор представляет собой
строку формата - @+id/name, где + означает, что это новый ресурс, и он
должен добавиться в R.java класс, если он там еще не существует. При создании элементов из кода идентификатор по умолчанию не задается.
Рис. 12. Создание макета для горизонтальной ориентации экрана
После присваивания id элементу запись о нем появляется в файле
R.java. Этот файл содержит ссылки на все элементы проекта с заданным id.
При необходимости можно найти любой элемент по его id.
Чаще всего корневым элементом в хml-разметке является какой-либо
из разновидностей Layout:
1) LinerLayout с атрибутом – горизонтальный или вертикальный;
2) ConstraintLayout;
3) TableLayout;
4) FrameLayout.
Выше приведен не весь перечень существующих Layout, а только
лишь используемые чаще всего.
2.2. Xml-разметка
25
2.2.1. LinearLayout
LinerLayout [9] – дочерний элемент ViewGroup, который имеет свойство Orientation, определяющее, как будут расположены дочерние элементы – горизонтальной или вертикальной линией.
Основные атрибуты Layout:
1) layout_width;
2) layout_height;
3) layout_weight;
4) gravity;
5) orientation.
Layout_width – определяет ширину разметки, Layout_height – высоту.
Данные параметры могут принимать три значения:
- match_parent – ширина или высота будет равна ширине или высо-
те родительского элемента;
- wrap_content – ширина или высота будет равна ширине или высо-
те содержимого контейнера;
- константное значение в dp.
Layout_weight – необязательный параметр, но очень полезный. Он
определяет вес дочернего элемента в строке или столбце. Например, при
горизонтальном LinerLayout и расположенными в нем двумя кнопками с
заданным layout_weight 0.4 и 0.6 соответственно, размер первой кнопки будет составлять 40 % от размера LinerLayout, а другой 60 %. Важное уточнение: layout_width дочернего элемента (при вертикальном layout) должен
быть установлен в значение wrap_content, иначе значение layout_weight будет проигнорировано. Проще говоря, модификаторы высоты и ширины
имеют приоритет выше, чем модификатор веса.
Gravity – свойство Layout, определяющее к какому краю (или к центру) будут смещены элементы. Необязательный параметр. Например, если
расположить на LinerLayout кнопку и установить значение gravity в bottom,
то кнопка притянется к нижней границе LinerLayout.
Orientation – определяет последовательность расположения элементов в Layout. Может принимать значения horizontal или vertical .
Интерфейс приложения на рис. 13 соответствует следующей xmlразметке:
2. Интерфейс мобильного приложения (Activity)
26
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
В данном примере представлен горизонтальный LinerLayout, где до-
черние элементы будут располагаться друг за другом слева направо. Все
2.2. Xml-разметка
27
дочерние элементы имеют одинаковое значение layout_weight = 1, layout_width = wrap_content, поэтому они имеют одну ширину и растянуты на
всю доступную ширину родительского элемента.
На рис. 14 представлен вертикальный LinerLayout. Для него характерен такой же макет, как и для разметки, представленной на рис. 13, с одним
отличием: свойство orientation принимает значение vertical, поэтому дочерние элементы расположены друг за другом сверху вниз. На каждом из них
ширина имеет значение wrap_content, т.е. она равна самому широкому элементу кнопки – тексту. Так как layout вертикальный, значение layout_weight влияет не на ширину, а высоту кнопки. На рис. 13 видно, что все
три кнопки одинаково растянуты по высоте.
Рис. 13. Интерфейс приложения с использованием LinearLayout (Horizontal)
2. Интерфейс мобильного приложения (Activity)
28
Рис. 14. Интерфейс приложения с использованием LinearLayout (Vertical)
2.2.2. TableLayout
TableLayout [10] состоит из строк TableRow. Каждая TableRow в свою
очередь содержит View-элементы, формирующие столбцы. То есть количество View в TableRow – это количество столбцов. Но количество столбцов
в таблице должно быть равным для всех строк. Поэтому если в разных
TableRow разное количество View-элементов (столбцов), то общее количество определяется по TableRow с максимальным количество.
Для данного типа Layout характерны те же свойства, что и для Liner-
Layout, кроме orientation.
2.2.3. FrameLayout
FrameLayout [11] – самый простой тип разметки. Обычно это пустое
пространство на экране, которое можно заполнить только дочерними объ-
2.2. Xml-разметка
29
ектами View или ViewGroup. Все дочерние элементы FrameLayout прикрепляются к верхнему левому углу экрана.
В разметке FrameLayout нельзя определить различное местоположение для дочернего объекта. Последующие дочерние объекты View будут
просто рисоваться поверх предыдущих компонентов, частично или полностью затеняя их, если находящийся сверху объект непрозрачен, поэтому
единственный дочерний элемент для FrameLayout обычно растянут до размеров родительского контейнера. Чтобы задать разное расположение элементов, используется свойство layout_gravity, которое указывает, к какому
краю или к центру будет притянут элемент.
Для этого компонента характерны три атрибута из рассмотренных
выше: layout_width, layout_height, gravity. Атрибут layout_weight этим ти-
пом контейнера не поддерживается.
Интерфейс приложения, представленный на рис. 15, соответствует
следующей xml-разметке:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
2. Интерфейс мобильного приложения (Activity)
30
android:layout_gravity="center_horizontal"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Button" />
</FrameLayout>
Рис. 15. Интерфейс приложения с использованием FrameLayout
В данном примере каждый дочерний элемент имеет значение высоты
и ширины «по содержимому», т.е. принимает минимально возможные размеры. Отличие всех трех элементов заключается в значении layout_gravity.
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]