Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Разработка мобильных приложений в среде Android Studio. Учебное пособие
.pdf
2.2. Xml-разметка
31
У первой кнопки оно имеет значение “start”, значит кнопка притянется к
началу родительского элемента, т.е. к его левой стороне. У второй кнопки
это значение равно “center_horizontal” – ее расположение будет по центру
по горизонтали. У третьей кнопки – “end”,она притянется к концу родительского элемента (к правому краю). Никаких модификаторов, затрагивающих вертикальное положение дочерних элементов, не установлено, а все
кнопки располагаются в одну линию. При необходимости можно задать
сразу несколько значений layout_gravity.
2.2.4. ConstraintLayout
ConstraintLayout [12] позволяет создавать большой макет с разветвленной иерархией. Данный вид разметки предполагает зависимость положения дочерних элементов друг от друга.
Данный тип контейнера сильно отличается от всех остальных наличием многих дополнительных атрибутов. Главный и отличительный атрибут – связи (ограничения) между элементами: constraints. Существует несколько типов ограничений. В частности, для установки позиции относительно определенного элемента используются следующие ограничения:
1) layout_constraintLeft_toLeftOf: левая граница позиционируется от-
носительно левой границы другого элемента;
2) layout_constraintLeft_toRightOf: левая граница позиционируется от-
носительно правой границы другого элемента;
3) layout_constraintRight_toLeftOf: правая граница позиционируется
относительно левой границы другого элемента;
4) layout_constraintRight_toRightOf: правая граница позиционируется
относительно правой границы другого элемента;
5) layout_constraintTop_toTopOf: верхняя граница позиционируется
относительно верхней границы другого элемента;
6) layout_constraintBottom_toBottomOf: нижняя граница позициониру-
ется относительно нижней границы другого элемента;
7) layout_constraintBaseline_toBaselineOf: базовая линия позициониру-
ется относительно базовой линии другого элемента;
8) layout_constraintTop_toBottomOf: верхняя граница позиционирует-
ся относительно нижней границы другого элемента;
9) layout_constraintBottom_toTopOf: нижняя граница позиционируется
относительно верхней границы другого элемента;
2. Интерфейс мобильного приложения (Activity)
32
10) layout_constraintStart_toEndOf: аналог layout_constraintLeft_
toRightOf;
11) layout_constraintStart_toStartOf: аналог layout_constraintLeft_
toLeftOf;
12) layout_constraintEnd_toStartOf: аналог layout_constraintRight_
toLeftOf;
13) layout_constraintEnd_toEndOf: аналог layout_constraintRight_
toRightOf.
Позиционирование может производиться относительно границ само-
го контейнера ConstraintLayout (в этом случае ограничение имеет значение
"parent"), либо же относительно любого другого элемента внутри ConstraintLayout, тогда в качестве значения ограничения указывается id этого
элемента.
Для того чтобы указать отступы от элемента, относительно которого
производится позиционирование, применяются следующие атрибуты:
1) android:layout_marginLeft: отступ от левой границы;
2) android:layout_marginRight: отступ от правой границы;
3) android:layout_marginTop: отступ от верхней границы;
4) android:layout_marginBottom: отступ от нижней границы;
5) android:layout_marginStart: отступ от левой границы;
6) android:layout_marginEnd: отступ от правой границы.
Представленные выше параметры можно устанавливать в текстовом
редакторе, вручную указывая к какому элементу присоединить текущий и с
каким параметром. Также можно в графическом редакторе потянуть за белые круги по краям элемента к желаемому элементу или границе, и свойство установится автоматически. В списке атрибутов также есть эти свойства, можно прописать их там.
Ниже представлен пример разметки с использованием ConstraintLay-
out, интерфейс которого представлен на рис. 16:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
2.2. Xml-разметка
33
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
В представленном выше примере у первой кнопки заданы значения
layout_constraintEnd_toEndOf = parent – ее правая граница будет смещаться
в зависимости от правой границы родительского элемента, layout_constraintStart_toStartOf = parent – левая граница будет смещаться в за-
2. Интерфейс мобильного приложения (Activity)
34
висимости от левой границы родительского элемента. Если не задавать одно из этих свойств – кнопка притянется к заданной границе. Layout_constraintTop_toTopOf = parent – кнопка притянется своей верхней границей к верхней границе родительского элемента. В примере не задано к
чему должен элемент притянуться снизу, поэтому кнопка осталась вверху.
Если задать модификаторы привязки по всем четырем границам, кнопка
окажется посередине экрана. У второй кнопки как раз заданы все четыре
модификатора, поэтому она располагается посередине между привязанными элементами. Третья кнопка имеет модификаторы аналогичные первой,
кроме одного – она привязана не верхней границей, а нижней к нижней
границе родительского элемента. Следует отметить: нельзя привязать две
кнопки друг к другу, только одна кнопка может быть привязана к другой,
но никогда обе вместе.
Рис. 16. Интерфейс приложения с использованием ConstraintLayout
2.2. Xml-разметка
35
Все элементы в Layout, находящиеся в xml-файле можно передвигать
и устанавливать свойства двумя способами:
в графическом редакторе. В данном случае среда добавит необхо-
димые свойства самостоятельно, но это не гарантирует реальную необходимость этих свойств и их правильность;
дописать свойства непосредственно в xml-файл. В данном случае
гарантируется точное желаемое установленное значение. В случае возникновения конфликтов, среда разработки сообщит об этом.
Идентификаторы лучше править в графическом редакторе.
Переключаться между графическим и текстовым редактором макета
можно с помощью вкладок меню Text и Designer, находящимися внизу
экрана (рис. 17).
Рис. 17. Переключение текстового и графического режимов
2. Интерфейс мобильного приложения (Activity)
36
2.3. View-элементы
Все view-элементы имеют атрибуты размерности (layout_width,
layout_height), задний фон (background) и еще множество разных парамет-
ров. Полный список свойств элемента можно посмотреть в меню Attributes.
Каждый view-элемент имеет свои особенности (присущие только ему
свойства). Например, поля вывода текста (TextView) имеют свойство
textColor (цвет текста), textSize (размер текста), textAllCaps (все буквы
большие или нет), textDirection (устанавливает направление текста). По
умолчанию используется направление слева направо, но с помощью значения rtl можно установить направление справа налево, textAlignment (по какому краю выравнивание текста: start – по левому краю, end – по правому
краю) [13].
EditText – текстовое поле для отображения и ввода текстовой информации пользователем. EditText является наследником TextView, и обладает
всеми его свойствами. У каждого EditText имеется атрибут inputType, который позволяет выбрать какие данные мы хотим видеть в поле ввода [14].
Для удобства работы с EditText разработчики Android Studio вынесли часто
используемые виды EditText как отдельные элементы в панели элементов,
такие как:
Plain Text – самый простой вариант EditText без какой-либо спе-
цифики.
Person Name – вариант EditText, в который разрешен ввод только
букв.
Password – вариант EditText, в котором показываемые символы
заменяются звездочками.
Password (Numeric) – вариант EditText, где показываемые симво-
лы заменяются звездочками, но для ввода разрешены только цифры.
E-mail – вариант EditText, в котором добавляется дополнительный
символ на клавиатуру @, обязательно присутствующий в любом E-mail адресе.
Phone – вариант EditText использует цифровую клавиатуру, по-
хожую на клавиатуру старого кнопочного телефона, а также символы * и #.
Multiline Text – вариант EditText, позволяющий сделать текстовое
поле многострочным, а также позволяет задать атрибут lines, задающий количество строк, видимых на экране.
2.3. View-элементы
37
Time и Date – варианты EditText, позволяющие вводить данные в
нужном формате Time или Date, на клавиатуре присутствуют цифры, точка,
запятая, тире.
Для отображения изображений используется элемент ImageView [15].
Его особенность – специальный параметр для отображения: scaleType. Он
может принимать следующие значения:
Center – устанавливает изображение по центру.
Center_crop – равномерно растягивает картинку, чтобы заполнить
весь контейнер и обрезает лишнее.
Center_inside – если изображение большего размера, то оно мас-
штабируется, чтобы поместиться в центре.
Fit_center – растягивает/сжимает картинку по большему краю и
устанавливает в центре.
Fit_end – изображение прижимается к нижней границе и заполня-
ет нижнюю часть ImageView.
Fit_start – изображение прижимается к левому верхнему углу и
таким образом заполняет верхнюю часть ImageView.
Fit_xy – растягивает/сжимает картинку, чтобы подогнать её к кон-
тейнеру.
Matrix – выводит картинку без изменений в левом верхнем углу.
Установить изображение можно либо в xml-файле в свойство src:
<ImageView
android:id="@+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
Либо из кода с помощью метода setImage:
ImageView myImageView = findViewById(R.id.myImageView);
myImageView.setImageDrawable(getResources().getDrawable(R.drawabl
e.my_drawable));
Для использования этого метода необходимо добавить изображение в
ресурсы, просто скопировав его в папку drawables.
2. Интерфейс мобильного приложения (Activity)
38
2.3.1. Управление View-элементами
После того, как в макете были установлены все необходимые элементы, необходимо добавить им функциональность, которая указывается в Activity, к которому принадлежит файл разметки.
2.3.1.1. Обработка нажатия на кнопку
Предположим, в макете кнопка объявлена следующим образом:
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Соответственно, чтобы совершать с ней какие-либо действия из кода,
необходимо ее объявить в Activity:
Button myButton = findViewById(R.id.mybutton);
Функция findViewById ищет элемент по его id в файле R.java. После
этого с кнопкой можно выполнять различные действия, например, изменить ее текст (setText(String)) или добавить обработчик на нажатие [16].
Главная функция кнопок – отрабатывать нажатия, которые можно
сделать несколькими способами.
1. В Activity создать метод, принимающий на вход View.
Модификатор public обязателен.
public void onMyButtonClick(View view){
Log.i("MyApplication", "click on my button");
}
В свойства кнопки onClick прописать созданную функцию:
2.3. View-элементы
39
<Button
android:id="@+id/mybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onMyButtonClick"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
При нажатии на кнопку в логах появится сообщение «click on my but-
ton».
2. Кнопке можно добавить слушателя нажатий:
myButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.i("MyApplication", "click on my button");
}
});
В файл разметки ничего добавлять не нужно. Необходимо использо-
вать лишь один из методов.
Любому view-элементу можно добавить слушателя на что-либо:
нажатие, смену фокуса и многое другое. Часть слушателей одинакова для
всех элементов, часть отличается, например OnClickListener есть только у
кнопок.
Все свойства view-элементов можно изменять и из кода.
2.3.1.2. Пример работы с EditText и TextView
Для того чтобы получить введенный в EditText текст, следует использовать функцию:
EditText myEditText = findViewById(R.id.myEditText);
String myString = myEditText.getText().toString();
2. Интерфейс мобильного приложения (Activity)
40
Для того чтобы присвоить TextView какой-либо текст, следует вы-
полнить следующие действия:
TextView myTextView = findViewById(R.id.myTextView);
myTextView.setText("some text");
2.4. Переход между Activity
Все описанные выше действия происходят на одном экране. Но что,
если экранов несколько и нужно организовать переходы между ними? Для
этого используется функция startActivity, на вход которой подается такое
понятие, как Intent [17].
Intent представляет собой объект обмена сообщениями, с помощью
которого можно запросить выполнение действия у компонента, т.е. Intent
задает параметры перехода.
2.4.1. Создания Intent
На вход объекта Intent подаются два параметра: откуда будет совершен переход и куда:
Intent myIntent = new Intent(context, Main2Activity.class);
startActivity(myIntent);
Первый параметр имеет тип Context – содержит всю информацию о месте
выполнения приложения. Для использования его в Intent должен инициироваться Activity, например в методе onCreate:
context = this;
Саму переменную сделать глобальной. Второй параметр – класс второго
Activity.
При передаче информации между Activity можно использовать либо
Intent, либо Bundle. Bundle может хранить более широкий набор типов дан-
ных, что делает его очень полезным при передаче массивов байтов или
«кастомных» классов. Данные передаются с помощью структуры ключ–
начение.
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]