Дизайн в XML-файлах
Дизайн программы описывается в файлах с расширением .xml. Для редактирования можно использовать графический редактор или текстовый редактор с функцией предварительного просмотра.
Работа с XML-разметкой
Разработка дизайна путем написания кода часто удобнее и функциональнее, чем работа в графическом интерфейсе.
Основные элементы дизайна
Наш дизайн будет использовать ConstraintLayout. В нём разместим кнопку, текстовое поле и список сообщений.
Кнопка отправки
Создадим плавающую кнопку действия (FloatingActionButton) из библиотеки com.android.support.design.widget.FloatingActionButton:
- android:id="@+id/buttonSend": уникальный идентификатор.
- android:layout_width="wrap_content" и android_layout_height="wrap_content": автоматическое определение размеров.
- android:clickable="true": разрешить нажатия.
- android:src="@drawable/ic_send_button": изображение (см. создание ниже).
- app:fabSize="mini": миниатюрный размер.
- android:layout_alignParentBottom="true": прижатие к нижнему краю.
- android:layout_margin="16dp": отступы.
Создание изображения для кнопки:
- res/drawable: Создайте изображение через New -> Image Asset, выбрав тип Action Bar, имя (например, ic_send_button), картинку и тему.
Цвет картинки можно изменить через android:tint (например, @android:color/white).
Текстовое поле для сообщений
Используем android.support.design.widget.TextInputLayout для текстового поля:
- android:id="@+id/editTextMessage": уникальный идентификатор.
- android:layout_width="match_parent": растягивание на всю ширину.
- android:layout_height="wrap_content": автоматическое определение высоты.
- app:layout_constraintLeft_toLeftOf="@+id/buttonSend": привязка к левой стороне кнопки.
- app:layout_constraintBottom_toBottomOf="parent": привязка к нижней части экрана.
- app:layout_constraintStart_toStartOf="parent": привязка к началу экрана.
Внутри TextInputLayout добавим android.widget.EditText с атрибутами android_layout_width="match_parent", android_layout_height="wrap_content", android_id="@+id/messageField" и android:hint (подсказка).
Список сообщений
Для отображения списка сообщений используем android.widget.ListView:
- android:id="@+id/listOfMessages": уникальный идентификатор.
- android:layout_width="match_parent".
- android:layout_height="match_parent".
- app:layout_constraintTop_toTopOf="parent": привязка к верху экрана.
- app:layout_constraintStart_toStartOf="parent": привязка к началу экрана.
- app:layout_constraintTop_toBottomOf="@+id/editTextMessage": привязка к текстовому полю.
Разделитель между текстовым полем и списком: android.view.View с атрибутами android:background, android_layout_height="1dp", android_layout_marginBottom="8dp" и android_layout_marginTop="8dp".
Дизайн элемента списка (item_list_item.xml)
Создайте отдельный XML-файл (item_list_item.xml) для дизайна элементов списка. Он будет содержать три TextView: для имени пользователя, времени и текста сообщения (с атрибутами android:id, android:layout_width, android:layout_height, и другими необходимыми для расположения и форматирования текста).
В этом уроке мы создали базовый дизайн приложения: кнопку отправки, текстовое поле и список сообщений. В следующем уроке реализуем функционал отправки и получения сообщений.