Шаблон "Basic Views Activity"

Обновлено 14 октября 2023 года

Раньше шаблон назывался "Basic Activity" и использовал компоненты из библиотеки Android Support Design и был специально спроектирован под новый дизайн Material Design. Позже появился Jetpack AndroidX и шаблон переделали. Затем его в очередной раз изменили, добавив фрагменты и новый способ навигации между ними.

Создадим проект при помощи шаблона Basic Views Activity.

Заполняем нужные поля.

При использовании шаблона будут задействованы различные компоненты: CoordinatorLayout, AppBarLayout, FloatingActionButton, Snackbar.

Первые три компонента доступны через XML-разметку, а Snackbar вызывается программно.

Изучим разметку активности activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        android:layout_marginBottom="16dp"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Корневым элементом разметки служит компонент CoordinatorLayout, который является наследником стандартного FrameLayout. Но если обычный FrameLayout позволяет просто накладывать один компонент поверх другого, то CoordinatorLayout позволяет координировать определённые зависимости между дочерними компонентами. Сейчас мы не будем вдаваться в тонкости, этой теме можно посвятить отдельную статью.

Далее идёт AppBarLayout с вложенным MaterialToolbar. Связка компонентов образуют внешний вид и поведение продвинутого заголовка экрана активности, который пришёл на смену ActionBar из Android 4.x, который в свою очередь заменил стандартный заголовок (Title) в Android 2.x. Опять оставляем их пока без внимания.

Потом следует интересный приём, который вам может впоследствии пригодиться. В существующую разметку вставляется ещё одна разметка при помощи тега include и с указанием вставляемой разметки - layout/content_main.xml.

Завершает основную разметку красивая кнопка FloatingActionButton, которая на самом деле является продвинутым вариантом ImageView. Но в спецификации Material Design кнопке отводится большая роль и практически является визитной карточкой нового дизайна. Наверняка, вы уже видели её на различных картинках. Раньше кнопка была круглой, но в Material 3 она стала квадратной с закруглёнными углами.

Подробнее о возможностях кнопки в отдельной статье. Обратите внимание, что кнопка "пришпилена" к нижнему правому углу экрана при помощи layout_gravity. В качестве значка используется изображение из системных ресурсов @android:drawable/ic_dialog_email в атрибуте app:srcCompat. Вы можете установить собственное изображение, подходящее по контексту. На данный момент Гугл рекомендует активно использовать векторные изображения.

Заменим значок электронной почты на изображение лапы кота. Щёлкаем правой кнопкой мыши по папке app и вызываем контекстное меню New | Vector Asset. В диалоговом окне щёлкаем по значку Clip Art, чтобы открыть другое окно для выбора значка. В строке поиска набираем pets и находим нужный значок. Выделяем его и нажимаем OK.

По умолчанию значок имеет чёрный цвет. Для нашего примера удобнее использовать белый цвет. В том же окне есть настройка цвета. Впрочем, цвет можно будет поменять и вручную позже. Для нашего урока это пока не важно, можете вообще не менять цвет.

Далее нажимаем кнопку Next и в следующем окне запоминаем название файла в ресурсах. Если вы всё-таки поменяли цвет, то логичнее будет поменять и название файла, убрав слово "black". Для этого можно вернуться на шаг назад и отредактировать поле Name. Оставляю на ваше усмотрение.

Теперь вы можете заменить значок для кнопки, выбрав соответствующий атрибут. Скриншот от старого варианта, когда кнопка была ещё круглой.

Также у активности есть меню в виде трёх точек, как создавать меню вы должны уже знать.

Snackbar

Если раньше для всплывающих сообщений использовались Toast, то теперь можно использовать новый компонент Snackbar.

Класс Snackbar имеет много общего с классом Toast и имеет практически тот же синтаксис.

Пример запуска сообщения находится в файле класса MainActivity.kt.

binding.fab.setOnClickListener { view ->
    Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
        .setAction("Action", null).show()
}

Как видите, код очень похож. Но есть и различия. Если Toast является частью активности и выводится поверх неё в нижней части по умолчанию, если не заданы другие параметры, то Snackbar выводится в "подвале" родительского элемента. В первом параметре указывается подходящий компонент, по которому система попытается найти родителя, обычно им является CoordinatorLayout. В некоторых примерах я видел код, когда родитель указывается явно.

Навигация между фрагментами

Раньше шаблон состоял из одного класса активности. Сейчас всё поменяли. Теперь за экран активности отвечают два фрагмента, между которыми можно переключаться кнопками. Взаимодействие между фрагментами реализовано через новый способ навигации.

Для начала просто откройте файлы fragment_first.xml и fragment_second.xml в папке res/layout. Разметка у них идентичная - кнопка и текстовая метка. Измените текст, если хотите.

Общение между фрагментами основано на новом способе Jetpack Navigation. Мы уже разбирали этот способ при знакомстве с фрагментами. Тогда мы вручную создавали фрагменты, устанавливали связи между ними через граф навигации и т.д. Теперь навигация в готовом виде. Откройте файл res/navigation/nav_graph.xml. Его можно посмотреть в текстовом и визуальном виде. Переключитесь в режим Design, чтобы увидеть связь между фрагментами. Теперь вам всё должно быть знакомо и понятно.

Единственное, что может сбить с толку - наличие binding. Технология ViewBinding появилась несколько лет назад, но я до сих пор не использую её. Вкратце, ViewBinding позволяет обойтись без вызовов методов findViewById().

Второй момент, на который стоит обратить внимание - код для навигации между фрагментами происходит в методе onViewCreated() вместо onCreateView(). Это более лучший вариант, хотя старый вариант вполне рабочий в большинстве случаев.

Подводим итоги - если вам нужен проект с навигацией между фрагментами, кнопкой Fab и вызов Snackbar, то используйте шаблон Basic Views Activity.

Дополнительные материалы

Реклама